3.Vue常用特性

1.表单操作

　　(1)基于Vue的表单操作

　　　　input　　　　单行文本

　　　　textarea 　　多行文本

　　　　select　　    下拉多选

　　　　radio　　      单选框

　　　　checkbox　　多选框

　　(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('focus',{
2             inserted:function(el){
3                 // el表示指令所绑定的元素
4                 el.focus();
5             }
6  });

　　(3)自定义指令用法

1 <input type="text" v-focus>

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

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             }

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