3.Vue常用特性

1.表单操作

　　(1)基于Vue的表单操作

　　　　input　　　　单行文本　　　　处理方式就是使用 v-model双向绑定data中的数据　

<input type="text" v-model='uname'>

　　　　radio　　      单选框　　　　　处理方式是先使用value属性给其赋值以便区分，之后再使用v-model双向绑定data中的数据

<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>

　　　　checkbox　　多选框　　　　　处理方式是先使用value属性给其赋值以便区分，之后再使用v-model双向绑定data中的数据，与单选框不同之处在于，所绑定的data数据应该为一个数组

<span>爱好:</span>
<input type="checkbox" id="ball" value="1" v-model='hobby'>
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model='hobby'>
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model='hobby'>
<label for="code">写代码</label>

data:{
      uname:'lisi',
      gender:1,
      hobby:['1','2']
    },

　　　　select - option　　    下拉多选　　　　处理方式是先在<option>标签中使用value属性给其赋值以便区分，之后在<select>标签中使用v-model双向绑定绑定data中的数据，与单选框以及多选框的区别在于既可以与data中所绑定的数据既可以是单个值也可以为一个数组，为单个值则表示单选，为一个数组则表示多选。

<select v-model='occupation' multiple='true'>
       <option value="0">请选择职业...</option>
       <option value="1">教师</option>
       <option value="2">软件工程师</option>
       <option value="3">律师</option>
</select>

data:{
                uname:'lisi',
                // 单选框为单个值
                gender:1,
                // 多选框为一个数组
                hobby:['1','2'],
                // select - option 单选就为一个值，多选就为一个数组
                occupation:['1','2']
},

　　　　textarea 　　　　多行文本　　　　使用方式与单行文本相同，即使用v-model与data中的数据进行双向绑定即可

<textarea v-model='desc'></textarea>

　　　

　　(2)表单域修饰符

　　　　number　　　转化为数值

　　　　trim　　　　  去掉开始和空格的结尾

　　　　lazy 　　　　  将input事件切换为change事件, 鼠标失去焦点后才会触发

<input type="text" v-model.number='age'>
<input type="text" v-model.trim='info'>
<input type="text" v-model.lazy='msg'>

 

2.自定义指令

　　(1)为何需要自定义指令?

　　　　内置指令不满足需求

　　(2)定义的语法规则　

　　　　全局指令定义

Vue.directive('自定义指令名称',{
        // 自定义指令实现逻辑
})

Vue.directive('focus',{
            inserted:function(el){
                // el表示指令所绑定的元素
                el.focus();
            }
 });

　　

　　(3)自定义指令用法

<input type="text" v-focus>

 

　　(4)带参数的自定义指令(改变元素背景色)

　　自定义指令中的函数会自动传入以下参数

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Vue.directive('color',{
            bind:function(el,binding){
                // 根据指令的参数设置背景色
                // console.log(binding.value.color);
                el.style.backgroundColor = binding.value.color;
            }
        })

 

　　(5)指令的用法

<input type="text" v-color='msg'>

 

　　(6)局部指令

directives:{
                color:{
                    bind:function(el,binding){
                        // 根据指令的参数设置背景色
                        // console.log(binding.value.color);
                        el.style.backgroundColor = binding.value.color;
                    }
                },
                focus:{
                    inserted:function(el){
                        el.focus();
                    }
                }
            }

 

3.计算属性

　　为何需要计算属性?

　　　　表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

　　

　　计算属性的用法

computed:{
                reverseString:function(){
                    return this.msg.split('').reverse().join('');
                }
            }

 

　　计算属性与方法的区别

　　　　计算属性是基于它们的依赖缓存的

　　　　方法不需要缓存

 

4.侦听器

　　(1)应用场景

　　　　数据变化时执行异步或开销较大的操作

 

　　(2)侦听器的用法

watch:{
                firstName:function(val){
                    this.fullName = val + ' ' + this.lastName;
                },
                lastName:function(val){
                    this.fullName = this.firstName + ' ' + val;
                }
            }

 　　　　侦听的值:function(侦听的值){
　　　　　　　　// 执行逻辑

　　　　}

5.过滤器

　　作用

　　　　格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

 

　　自定义过滤器

　　　　Vue.filter('过滤器名称',function(value){

　　　　　　　　// 过滤器业务逻辑

　　　　})

 

　　过滤器的使用　

<div>{{msg | upper}}</div>

<div>{{msg | upper | lower}}</div>

div :abc='msg | upper'>测试数据</div>

 

　　局部过滤器　　　

// 局部过滤器只能在本组件中使用
            filters:{
                upper:function(val){
                    return val.charAt(0).toUpperCase() + val.slice(1);
                }
            }

 

　　带参数的过滤器

　　　　Vue.filter('format',function(value,arg1){

　　　　　　　　// value就是过滤器传递的参数

　　})

 

　　过滤器的使用

<div>{{date | format('yyyy-MM-dd')}}</div>

 

6.生命周期

　　1.主要阶段

　　　　挂载(初始化相关属性)

　　　　　　beforeCreate

　　　　　　created

　　　　　　beforeMount

　　　　　　mounted

　　　　更新(元素或组件的变更操作)

　　　　　　beforeUpdate

　　　　　　updated

　　　　销毁(销毁相关属性)

　　　　　　beforeDestroy

　　　　　　Destroyed

 

　　2.Vue实例的生产过程

　　　　　　① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。

　　　　　　② created 在实例创建完成后被立即调用。

　　　　　   ③ beforeMount 在挂载开始之前被调用。

　　　　　   ④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

　　　　　　⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。

　　　　　　⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

　　　　　　⑦ beforeDestroy 实例销毁之前调用。

　　　　　　⑧ destroyed 实例销毁后调用。