Vue--使用watch、computed、filter方法来监控
watch与computed、filter：
watch:监控已有属性，一旦属性发生了改变就去自动调用对应的方法
computed:监控已有的属性,一旦属性的依赖发生了改变，就去自动调用对应的方法
filter:js中为我们提供的一个方法，用来帮助我们对数据进行筛选
watch与computed的区别:
1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性
2.watch不会缓存数据，每次打开页面都会重新加载一次，
但是computed如果之前进行过计算他会将计算的结果缓存，如果再次请求会从缓存中
得到数据（所以computed的性能比watch更好一些）
一.watch监控使用小例子
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="vue2.4.4.js"></script>
10 </head>
11
12 <body>
13 <div id="app">
14 <input type="text" v-model="firstname">
15 <input type="text" v-model="lastname">
16 <span v-html="fullname"></span>
17 </div>
18 </body>
19 <script>
20 new Vue({
21 el: "#app",
22 data: {
23 firstname:"",
24 lastname:"",
25 fullname:""
26 },
27 // 实时监控firstname,lastname,一旦其中优质发生了改变就需要重新设置fullname的值
28 // 可以使用watch来实现这个功能
29 watch:{
30 // 将来只要firstname发生了改变它就会触发后面的这个方法
31 "firstname":function(){
32 //只要firstname改变就应该相应的改变fullname
33 this.fullname = this.firstname+this.lastname;
34 },
35 "lastname":function(){
36 //只要lastname改变就应该相应的改变fullname
37 this.fullname = this.firstname+this.lastname;
38 }
39 }
40 });
41
42 </script>
43
44 </html>
二.使用computed来监控
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="vue2.4.4.js"></script>
10 </head>
11
12 <body>
13 <div id="app">
14 <input type="text" v-model="firstname">
15 <input type="text" v-model="lastname">
16 {{fullName}}
17 </div>
18 </body>
19 <script>
20 new Vue({
21 el: "#app",
22 data: {
23 firstname:"小",
24 lastname:"追命",
25 },
26 computed:{
27 fullName:function() {
28 return this.firstname+this.lastname ;
29 }
30 }
31 });
32 </script>
33 </html>
三.使用filter方法来筛选元素
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="vue2.4.4.js"></script>
9 </head>
10 <body>
11
12 </body>
13 <script>
14 /**
15 filter:作用：过滤元素
16 操作:会遍历数据集合，去匹配所有的数据，将所有匹配成功的数据返回为一个新的数组
17 var newList = list.filter(function(item){
18 return 匹配的条件;
19 如果里面的item满足匹配条件就会返回true，那么这个filter方法也会将对应的item值
20 返回给新的数组
21 });
22
23 */
24 var arr = [
25 {name:"abc",age:18},
26 {name:"hc",age:18},
27 {name:"dbc",age:16},
28 {name:"ayy",age:14},
29 ];
30 var str = "c";
31 var newArr = arr.filter(function(item){
32 // 查找newArr中所有name包含c的数据，然后返回
33 return item.name.indexOf(str) != -1;
34 });
35 console.log(newArr);
36 </script>
37 </html>
四.使用filter方法完成品牌管理的搜索功能例子
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <script src="vue2.4.4.js"></script>
9 <title>Document</title>
10 <style>
11 #app {
12 width: 600px;
13 margin: 10px auto;
14 }
15
16 .tb {
17 border-collapse: collapse;
18 width: 100%;
19 }
20
21 .tb th {
22 background-color: #0094ff;
23 color: white;
24 }
25
26 .tb td,
27 .tb th {
28 padding: 5px;
29 border: 1px solid black;
30 text-align: center;
31 }
32
33 .add {
34 padding: 5px;
35 border: 1px solid black;
36 margin-bottom: 10px;
37 }
38 </style>
39 </head>
40
41 <body>
42 <div id="app">
43 <div class="add">
44 编号: <input id="id" v-color="color" v-focus type="text" v-model="id">品牌名称: <input v-model="name" type="text">
45 <button @click="add">添加</button>
46 </div>
47 <div class="add">品牌名称：<input v-model="searchValue" type="text"></div>
48 <div>
49 <table class="tb">
50 <tr>
51 <th>编号</th>
52 <th>品牌名称</th>
53 <th>创立时间</th>
54 <th>操作</th>
55 </tr>
56 <tr v-if="list.length <= 0">
57 <td colspan="4">没有品牌数据</td>
58 </tr>
59 <!--加入: key="index" 时候必须把所有参数写完整 -->
60 <tr v-for="(item,key,index) in newList" :key="index">
61 <td>{{item.id}}</td>
62 <td>{{item.name}}</td>
63 <td>{{item.ctime | dateFrm("/")}}</td>
64 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
65 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
66 </tr>
67 </table>
68 </div>
69
70 </div>
71 </body>
72
73 </html>
74
75 <script>
76 // 使用全局过滤器（公有过滤器）
77 Vue.filter("dateFrm", function (time,spliceStr) {
78 // return "2017-11-16";
79 var date = new Date(time);
80 //得到年
81 var year = date.getFullYear();
82 // 得到月
83 var month = date.getMonth() + 1;
84 // 得到日
85 var day = date.getDate();
86 return year + spliceStr + month + spliceStr + day;
87 });
88
89
90 // 先将自定义指令定义好
91 // directive有两个参数
92 //参数一： 自定义指令 v-focus
93 //参数二： 对象，对象中可以添加很多方法
94 // 添加一个inserted方法:而这个方法中又有两个参数：
95 //参数一:el 当前使用自定义指令的对象
96 //参数二：obj 是指它(v-color="color" )后面设置的表达式
97 //{expression:"color",value:"red",}
98 Vue.directive("focus", {
99 inserted: function (el, obj) {
100 // console.log(el);
101 el.focus();
102 }
103 });
104 Vue.directive("color", {
105 inserted: function (el, obj) {
106 el.style.color = obj.value;
107 console.log(obj.value);
108 }
109 });
110
111 var vm = new Vue({
112 el: "#app",
113 data: {
114 searchValue:"",
115 color: "green",
116 id: 0,
117 name: '',
118 list: [
119 { "id": 1, "name": "it", "ctime": Date() },
120 { "id": 2, "name": "白狼", "ctime": Date() }
121 ]
122 },
123 // mounted(){
124 // this.getFocus()
125 // },
126 computed:{
127 newList:function(){
128 if(this.searchValue =="") {
129 return this.list;
130 }
131 //改变this的指向
132 _this = this;
133 return this.list.filter(function(item){
134 return item.name.indexOf(_this.searchValue)!=-1;
135 });
136 }
137 },
138 methods: {
139 add: function () {
140 //将id和namepush到list数组中
141 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
142 },
143 del: function (id) {
144
145 // 根据id得到下标
146 // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
147 var index = this.list.findIndex(function (item) {
148 //根据item中的id属性来判断这个item是否是上面id中
149 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
150 return item.id == id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
151 });
152 // 根据下标在list集合中将对应的数据删除
153 // splice(开始删除的下标，删除的长度)
154 this.list.splice(index, 1);
155 }
156
157 }
158 });
159
160 </script>
