第三节：Vuejs常用特性2和图书案例

一. 常用特性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>

View Code

运行结果：

二. 图书案例

1. 需求

　　实现图书系统的显示，删除、修改、增加。

2. 用到的几个数组的技术点：

　　(1). filter: 根据条件过滤返回一个新数组，function(item){}; item为遍历数组中的元素

　　(2). some: 用于遍历数组 (item)=>{}, return true; 则结束遍历

　　(3). findIndex: 查找索引，function(item){}; item为遍历数组中的元素

最终运行效果：

代码分享：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>图书系统</title>
  6         <style type="text/css">
  7             .grid {
  8                 margin: auto;
  9                 width: 530px;
 10                 text-align: center;
 11             }
 12 
 13             .grid table {
 14                 border-top: 1px solid #C2D89A;
 15                 width: 100%;
 16                 border-collapse: collapse;
 17             }
 18 
 19             .grid th,
 20             td {
 21                 padding: 10;
 22                 border: 1px dashed #F3DCAB;
 23                 height: 35px;
 24                 line-height: 35px;
 25             }
 26 
 27             .grid th {
 28                 background-color: #F3DCAB;
 29             }
 30 
 31             .grid .book {
 32                 padding-bottom: 10px;
 33                 padding-top: 5px;
 34                 background-color: #F3DCAB;
 35             }
 36         </style>
 37     </head>
 38     <body>
 39         <div id="myApp">
 40             <div class="grid">
 41                 <div>
 42                     <h1>图书管理</h1>
 43                     <div class="book">
 44                         <div>
 45                             <label for="id">
 46                                 编号：
 47                             </label>
 48                             <input type="text" id="id" v-model='id' :disabled="isEdit">
 49                             <label for="name">
 50                                 名称：
 51                             </label>
 52                             <input type="text" id="name" v-model='name' @keyup.enter="handle">
 53                             <button @click='handle'>提交</button>
 54                         </div>
 55                     </div>
 56                 </div>
 57                 <table>
 58                     <thead>
 59                         <tr>
 60                             <th>编号</th>
 61                             <th>名称</th>
 62                             <th>时间</th>
 63                             <th>操作</th>
 64                         </tr>
 65                     </thead>
 66                     <tbody>
 67                         <tr :key='item.id' v-for='item in books'>
 68                             <td>{{item.id}}</td>
 69                             <td>{{item.name}}</td>
 70                             <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
 71                             <td>
 72                                 <a href="" @click.prevent="editShow(item.id)">修改</a>
 73                                 <span>|</span>
 74                                 <a href="" @click.prevent="delBook(item.id)">删除</a>
 75                             </td>
 76                         </tr>
 77                     </tbody>
 78                 </table>
 79             </div>
 80         </div>
 81 
 82         <script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
 83         <script type="text/javascript">
 84             //日期格式化过滤器
 85             Vue.filter('format', function(value, arg) {
 86                 function dateFormat(date, format) {
 87                     if (typeof date === "string") {
 88                         var mts = date.match(/(/Date((d+))/)/);
 89                         if (mts && mts.length >= 3) {
 90                             date = parseInt(mts[2]);
 91                         }
 92                     }
 93                     date = new Date(date);
 94                     if (!date || date.toUTCString() == "Invalid Date") {
 95                         return "";
 96                     }
 97                     var map = {
 98                         "M": date.getMonth() + 1, //月份 
 99                         "d": date.getDate(), //日 
100                         "h": date.getHours(), //小时 
101                         "m": date.getMinutes(), //分 
102                         "s": date.getSeconds(), //秒 
103                         "q": Math.floor((date.getMonth() + 3) / 3), //季度 
104                         "S": date.getMilliseconds() //毫秒 
105                     };
106                     format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
107                         var v = map[t];
108                         if (v !== undefined) {
109                             if (all.length > 1) {
110                                 v = '0' + v;
111                                 v = v.substr(v.length - 2);
112                             }
113                             return v;
114                         } else if (t === 'y') {
115                             return (date.getFullYear() + '').substr(4 - all.length);
116                         }
117                         return all;
118                     });
119                     return format;
120                 }
121                 return dateFormat(value, arg);
122             })
123 
124             var vm = new Vue({
125                 el: '#myApp',
126                 data: {
127                     books: [{
128                         id: 1,
129                         name: '三国演义',
130                         date: 2525609975000
131                     }, {
132                         id: 2,
133                         name: '水浒传',
134                         date: 2525609975000
135                     }, {
136                         id: 3,
137                         name: '红楼梦',
138                         date: 2525609975000
139                     }, {
140                         id: 4,
141                         name: '西游记',
142                         date: 2525609975000
143                     }],
144                     id: '',
145                     name: '',
146                     isEdit: false,
147                 },
148                 methods: {
149                     //增加 或 修改
150                     handle: function() {
151                         if (this.isEdit == false) {
152                             //表示增加
153                             var obj = {};
154                             obj.id = this.id;
155                             obj.name = this.name;
156                             obj.date = 2525609975000;
157                             this.books.push(obj);
158                             // 清空表单
159                             this.id = '';
160                             this.name = '';
161                         } else {
162                             //表示修改
163                             //根据id查找出来book，然后进行修改，可以用filter，这里用另外一种方式 Some，查找出来的同时直接修改
164                             this.books.some((item) => {
165                                 if (item.id == this.id) {
166                                     item.name = this.name;
167                                     //返回true，表示终止循环
168                                     return true;
169                                 }
170                             });
171                             //清空表单，并恢复可编辑状态
172                             this.id = '';
173                             this.name = '';
174                             this.isEdit = false;
175                         }
176                     },
177                     //把要修改的内容显示在标签内
178                     editShow: function(id) {
179                         //根据id查找符合条件的book信息
180                         var theEditBook = this.books.filter(function(item) {
181                             return item.id == id;
182                         });
183                         //给标签赋值
184                         this.id = theEditBook[0].id;
185                         this.name = theEditBook[0].name;
186                         //id标签位置不可改
187                         this.isEdit = true;
188                     },
189                     //删除图书
190                     delBook: function(id) {
191                         //方案一
192                         // //查找索引
193                         // var index=this.books.findIndex(function(item){
194                         //     return item.id==id;
195                         // });
196                         // //第一个参数表示索引，第二个参数表示删除的个数
197                         // this.books.splice(index,1); 
198                         // 方案二 利用filter
199                         this.books = this.books.filter(function(item) {
200                             return item.id != id;
201                         });
202                     }
203                 }
204             });
205         </script>
206     </body>
207 </html>

View Code

作者 : Yaopengfei(姚鹏飞)
博客地址 : http://www.cnblogs.com/yaopengfei/
声明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
声明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。