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>