3.Vue常用特性

1.表单操作

　　(1)基于Vue的表单操作

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

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

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

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

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

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

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

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

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

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

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

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

　　　

　　(2)表单域修饰符

　　　　number　　　转化为数值

　　　　trim　　　　  去掉开始和空格的结尾

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

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

2.自定义指令

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

　　　　内置指令不满足需求

　　(2)定义的语法规则　

　　　　全局指令定义

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

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

　　

　　(3)自定义指令用法

1 <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 钩子中可用。

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

　　(5)指令的用法

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

　　(6)局部指令

 1 directives:{
 2                 color:{
 3                     bind:function(el,binding){
 4                         // 根据指令的参数设置背景色
 5                         // console.log(binding.value.color);
 6                         el.style.backgroundColor = binding.value.color;
 7                     }
 8                 },
 9                 focus:{
10                     inserted:function(el){
11                         el.focus();
12                     }
13                 }
14             }

3.计算属性

　　为何需要计算属性?

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

　　

　　计算属性的用法

1 computed:{
2                 reverseString:function(){
3                     return this.msg.split('').reverse().join('');
4                 }
5             }

　　计算属性与方法的区别

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

　　　　方法不需要缓存

4.侦听器

　　(1)应用场景

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

　　(2)侦听器的用法

1 watch:{
2                 firstName:function(val){
3                     this.fullName = val + ' ' + this.lastName;
4                 },
5                 lastName:function(val){
6                     this.fullName = this.firstName + ' ' + val;
7                 }
8             }

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

　　　　}

5.过滤器

　　作用

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

　　自定义过滤器

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

　　　　　　　　// 过滤器业务逻辑

　　　　})

　　过滤器的使用　

1 <div>{{msg | upper}}</div>
2
3 <div>{{msg | upper | lower}}</div>
4
5 div :abc='msg | upper'>测试数据</div>

　　局部过滤器　　　

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

　　带参数的过滤器

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

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

　　})

　　过滤器的使用

1 <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 实例销毁后调用。