watch与computed、filter：
watch: monitor existing properties, and automatically call the corresponding method once the property changes
computed: monitor existing properties, and automatically call the corresponding method once the dependency of the property changes
filter: A method provided to us in js to help us filter data
The difference between watch and computed:
1.watch monitors the existing attributes, and computed calculates a new attribute through the existing attributes
2. watch does not cache data, it will be reloaded every time the page is opened,
but if computed has been calculated before, it will cache the result of the calculation, and if it is requested again, it will
get the data from the cache (so the performance of computed is better than watch Some)
1. A small example of watch monitoring use
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 View({
21 el: "#app",
22 data: {
23 firstname:"",
24 lastname:"",
25 fullname:""
26 },
27 // Monitor firstname, lastname in real time, once the quality changes, you need to reset the value of fullname
28 // You can use watch to achieve this function
29 watch:{
30 // In the future, as long as the firstname changes, it will trigger this latter method
31 "firstname":function(){
32 //As long as the firstname changes, the fullname should be changed accordingly
33 this.fullname = this.firstname+this.lastname;
34 },
35 "lastname":function(){
36 //As long as lastname changes, fullname should be changed accordingly
37 this.fullname = this.firstname+this.lastname;
38 }
39 }
40 });
41
42 </script>
43
44 </html>
2. Use computed to monitor
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 View({
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>
3. Use the filter method to filter elements
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: role: filter elements
16 Operation: It will traverse the data set to match all the data, and return all the successfully matched data as a new array
17 var newList = list.filter(function(item){
18 return matching condition;
19 If the item inside meets the matching condition, it will return true, then this filter method will also set the corresponding item value.
20 returns to a new array
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 // Find all data whose name contains c in newArr, and then return
33 return item.name.indexOf(str) != -1;
34 });
35 console.log(newArr);
36 </script>
37 </html>
4. An example of a search function using the filter method to complete brand management
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>Number</th>
52 <th>Brand Name</th>
53 <th>Founded</th>
54 <th>Operation</th>
55 </tr>
56 <tr v-if="list.length <= 0">
57 <td colspan="4">No brand data</td>
58 </tr>
59 <!-- When adding: key="index", all parameters must be written completely -->
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 <!-- When using vue to register events, we can't see it in the dom element -->
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 // Use global filter (public filter)
77 Vue.filter("dateFrm", function (time,spliceStr) {
78 // return "2017-11-16";
79 var date = new Date(time);
80 // get year
81 var year = date.getFullYear();
82 // get month
83 var month = date.getMonth() + 1;
84 // get day
85 var day = date.getDate();
86 return year + spliceStr + month + spliceStr + day;
87 });
88
89
90 // First define the custom instruction
91 // directive has two parameters
92 //Parameter 1: Custom instruction v-focus
93 //Parameter two: object, many methods can be added to the object
94 // Add an inserted method: and this method has two parameters:
95 //Parameter 1: el The object currently using the custom command
96 //Parameter two: obj refers to the expression set after it (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 //Change the point of 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 //Push id and name to the list array
141 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
142 },
143 del: function (id) {
144
145 // Get the subscript according to the id
146 // By default, traverse the list collection and pass each element in the collection into the function's item,
147 var index = this.list.findIndex(function (item) {
148 //According to the id attribute in the item to determine whether the item is in the above id
149 //Corresponding data, if it returns a true, otherwise returns false, continue to traverse the following data, and so on
150 return item.id == id; //If it returns true, the findIndex method will return the id corresponding to this item to the outside for acceptance
151 });
152 // Delete the corresponding data in the list set according to the subscript
153 // splice (start to delete subscript, delete length)
154 this.list.splice(index, 1);
155 }
156
157 }
158 });
159
160 </script>