一. 常用特性2
1. 监听器
用watch来响应数据的变化, 一般用于异步或者开销较大的操作, watch 中的属性 一定是data 中 已经存在的数据!!! 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听.
案例1：监听firstName和lastName，当他们发生变化的时候，fullName也发生变化； 该需求也可也把fullName声明成一个计算属性，同样可以达到这个效果。
案例2：输入用户名，当光标离开input标签的时候，进行验证该用户名是否存在。
2. 过滤器
过滤器可以全局注册Vue.filter,也可以局部注册filters。过滤器可以用在两个地方：双花括号插值和v-bind属性表达式。过滤器不改变真正的 data ，而只是改变渲染的结果，并返回过滤后的版本.
(1).第一个参数表示管道符前面的数据，而且过滤器支持级联操作。
比如：{{msg | glq1 | glq2}} 支持多个过滤器
(2).带参数的过滤器： 第一个参数不需要传递，默认就是要过滤的数据,后面可以继续写参数进行传递。
(3).补充一个日期过滤器
3. 实例的生命周期（常用的8个）
(1) beforeCreate: 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
(2) created: 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
(3) beforeMount: 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
(4) mounted: el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上在这个钩子函数里面我们可以使用一些第三方的插件，数据的初始化可以放在这里。
(5) beforeUpdate: 数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
(6) updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
(7) beforeDestroy: 实例销毁之前调用
(8) destroyed: 实例销毁后调用
4. 变异方法和替换数组、动态响应数据处理
(1).变异方法：
背景：在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。所以：Vue中引入变异数组方法，即保持数组方法原有功能不变的前提下对其进行功能拓展，使其支持响应式。
常用方法如下：
a. push: 往数组最后面添加一个元素，成功返回当前数组的长度。
b. pop: 删除数组的最后一个元素，成功返回删除元素的值
c. shift: 删除数组的第一个元素，成功返回删除元素的值
d. unshift: 往数组最前面添加一个元素，成功返回当前数组的长度
e. splice: 有三个参数，第一个要删除元素的下标(必选)，第二个要删除元素的个数(必选)，第三个删除后想在原位置替换的值
f. sort: 将数组按照字符编码从小到大排序，成功返回排序后的数组
g. reverse: 将数组倒序排列，并返回倒叙后的数组
(2).替换数组
含义: 不会影响原始的数组数据，而是形成一个新的数组.
常用方法:
a. filter: 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
b. concat: 用于连接两个或多个数组,该方法不会改变现有的数组。
c. slice: 从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组
eg：从第0个开始，获取两个元素 this.list = this.list.slice(0, 2);
(3).动态响应数据的处理
A. 操作数组
Vue.set(vm.list, 1, 'ypf');
vm.$set(vm.list, 1, 'ypf');
以上两句话是等效的，都表示把list数组中的第二个元素改为ypf。
B. 操作对象
Vue.set(vm.info, 'sex', '女');
vm.$set(vm.info, 'sex', '女');
以上两句话等效，表示给info对象增加一个属性sex，值为‘女’，如果info对象里已经有了sex属性，则执行的是修改操作
代码分享：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>04-常用特性2</title> 6 <style type="text/css"> 7 p { 8 color: #0000FF; 9 font-size: 18px; 10 } 11 12 div { 13 margin-bottom: 10px; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="myApp"> 19 <p>1.监听器的使用</p> 20 <div> 21 <div> 22 <input type="text" v-model="firstName" placeholder="请输入firstName"> 23 <input type="text" v-model="lastName" placeholder="请输入lastName"> 24 </div> 25 <div>我的全名为：{{fullName}}</div> 26 </div> 27 <div> 28 验证用户名是否存在：<input type="text" v-model.lazy="userName"><span>{{tip}}</span> 29 </div> 30 <p>2.过滤器的使用</p> 31 <div> 32 <input type="text" v-model="msg"> 33 <div>我是大写过滤器：{{msg|higher}}</div> 34 <div>我是小写过滤器：{{msg|lower}}</div> 35 <div :myClass="msg | higher">过滤器加在属性上</div> 36 <span>多参数过滤器</span> 37 <input type="text" v-model.number="myNum"> 38 <div>结果为：{{myNum|myadd(10,20)}}</div> 39 <div>日期过滤器：{{myDate|format('yyyy-MM-dd hh:mm:ss')}}</div> 40 </div> 41 <p>4.变异方法和替换数组</p> 42 <div> 43 <ul> 44 <li :key="index" v-for="(item,index) in list">{{item}}</li> 45 </ul> 46 <input type="text" v-model='fname'> 47 <button @click='add'>添加</button> 48 <button @click='del'>删除</button> 49 <button @click='change'>替换</button> 50 </div> 51 <p>5.动态响应处理</p> 52 <div> 53 <button @click='handle1'>响应处理1</button> 54 <div> 55 <div>{{info.name}}</div> 56 <div>{{info.age}}</div> 57 <div>{{info.sex}}</div> 58 </div> 59 <button @click='handle2'>响应处理2</button> 60 </div> 61 </div> 62 <script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script> 63 <script type="text/javascript"> 64 //全局过滤器（小写过滤器） 65 Vue.filter('lower', function(val) { 66 return val.toLowerCase(); 67 }); 68 //多参数过滤器 69 //val表示要过滤的值，m,n 分别对应传递进来的两个值,对应上面的10和20 70 Vue.filter('myadd', function(val, m, n) { 71 if (val < 10) { 72 return val + m; 73 } else { 74 return val + n; 75 } 76 }); 77 //补充一个日期过滤器 78 Vue.filter('format', function(value, arg) { 79 function dateFormat(date, format) { 80 if (typeof date === "string") { 81 var mts = date.match(/(\/Date\((\d+)\)\/)/); 82 if (mts && mts.length >= 3) { 83 date = parseInt(mts[2]); 84 } 85 } 86 date = new Date(date); 87 if (!date || date.toUTCString() == "Invalid Date") { 88 return ""; 89 } 90 var map = { 91 "M": date.getMonth() + 1, //月份 92 "d": date.getDate(), //日 93 "h": date.getHours(), //小时 94 "m": date.getMinutes(), //分 95 "s": date.getSeconds(), //秒 96 "q": Math.floor((date.getMonth() + 3) / 3), //季度 97 "S": date.getMilliseconds() //毫秒 98 }; 99 100 format = format.replace(/([yMdhmsqS])+/g, function(all, t) { 101 var v = map[t]; 102 if (v !== undefined) { 103 if (all.length > 1) { 104 v = '0' + v; 105 v = v.substr(v.length - 2); 106 } 107 return v; 108 } else if (t === 'y') { 109 return (date.getFullYear() + '').substr(4 - all.length); 110 } 111 return all; 112 }); 113 return format; 114 } 115 return dateFormat(value, arg); 116 }) 117 118 var vm = new Vue({ 119 el: '#myApp', 120 data: { 121 firstName: '', 122 lastName: '', 123 fullName: '', 124 userName:'', 125 tip:'', 126 msg: '', 127 myNum: '', 128 myDate: new Date(), 129 list: ['apple', 'orange', 'banana'], 130 fname: '', 131 info: { 132 name: 'lmr', 133 age: 20 134 } 135 }, 136 methods: { 137 //验证用户名 138 checkUserName:function(uname){ 139 var that=this; 140 //模拟调用后台 141 setTimeout(function(){ 142 if (uname=='admin') { 143 that.tip='存在'; 144 } else{ 145 that.tip='不存在'; 146 } 147 },1500); 148 }, 149 //增加 150 add: function() { 151 this.list.push(this.fname); 152 }, 153 //删除最后一个 154 del: function() { 155 this.list.pop(); 156 }, 157 //替换 158 change: function() { 159 //从第0个开始，获取两个元素 160 this.list = this.list.slice(0, 2); 161 }, 162 handle1: function() { 163 //下面两句话等效，把list数组中的第二个元素改为ypf 164 Vue.set(vm.list, 1, 'ypf'); 165 // vm.$set(vm.list, 1, 'ypf'); 166 }, 167 handle2: function() { 168 //下面两句话等效，表示给info对象增加一个属性sex，值为‘女’ 169 // Vue.set(vm.info, 'sex', '女'); 170 vm.$set(vm.info, 'sex', '女'); 171 } 172 }, 173 computed: { 174 //这里使用计算属性，也可以达到下面监听器的效果 175 // fullName:function(){ 176 // return this.firstName+' '+this.lastName; 177 // } 178 }, 179 //监听器 180 watch: { 181 //val代表该值 182 firstName: function(val) { 183 this.fullName = val + ' ' + this.lastName; 184 }, 185 lastName: function(val) { 186 this.fullName = this.firstName + ' ' + val; 187 }, 188 userName:function(val){ 189 this.tip='正在校验中...'; 190 this.checkUserName(val); 191 } 192 }, 193 filters: { 194 //大写过滤器 195 higher: function(val) { 196 return val.toUpperCase(); 197 } 198 } 199 200 201 202 }); 203 </script> 204 </body> 205 </html>