感覺寫博客好麻煩的.... 有的很小的知識點，我看的時候是記在筆記本上的，但是現在要再用博客寫一遍，就會整理很久，就想着干脆簡單一點寫一點籠統的。以及一些需要時間思考的代碼，寫出邏輯
監聽屬性
用$watch響應數據變化 學vue最大的感覺就是感覺很多指令啊屬性啊跟監聽是一樣的意思，都能實時的感受到數據，交互性能真的很好，但是久了會有點難區分區別, 先看下面這個例子，是菜鳥給的第一個最簡單的例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id = "app"> 10 <p style = "font-size:25px;">計數器: {{ counter }}</p> 11 <button @click = "counter++" style = "font-size:25px;">點我</button> 12 </div> 13 <script type = "text/javascript"> 14 var vm = new Vue({ 15 el: '#app', 16 data: { 17 counter: 1 18 } 19 }); 20 vm.$watch('counter', function(nval, oval) { 21 alert('計數器值的變化 :' + oval + ' 變為 ' + nval + '!'); 22 }); 23 </script> 24 </body> 25 </html>
在button按鈕給了一個click事件綁的counter++ ，即直接點擊就counter++，這個時候 counter的監聽 那些指令就做不到了，因為它不是在js邏輯里加一，而是在button直接++了，所以可以用watch來響應數據變化前與變化后。（這里的代碼形式是 vm.$watch(){} ）
因為對這種監聽還不是很能理解，看到菜鳥的一個demo是這樣的：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id = "computed_props"> 10 千米 : <input type = "text" v-model = "kilometers"> 11 米 : <input type = "text" v-model = "meters"> 12 </div> 13 <p id="info"></p> 14 <script type = "text/javascript"> 15 var vm = new Vue({ 16 el: '#computed_props', 17 data: { 18 kilometers : 0, 19 meters:0 20 }, 21 methods: { 22 }, 23 computed :{ 24 }, 25 watch : { 26 kilometers:function(val) { 27 this.kilometers = val; 28 this.meters = val * 1000; 29 }, 30 meters : function (val) { 31 this.kilometers = val/ 1000; 32 this.meters = val; 33 } 34 } 35 }); 36 // $watch 是一個實例方法 37 vm.$watch('kilometers', function (newValue, oldValue) { 38 // 這個回調將在 vm.kilometers 改變后調用 39 document.getElementById ("info").innerHTML = "修改前值為: " + oldValue + "，修改后值為: " + newValue; 40 }) 41 </script> 42 </body> 43 </html>
然后我想了一下，我覺得v-model也可以做到，就自己寫了一個一樣功能的demo：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id = "computed_props"> 10 千米 : <input type = "text" v-model = "kilometers" v-on:input="ki"> 11 米 : <input type = "text" v-model = "meters" v-on:input="me"> 12 </div> 13 14 <script type="text/javascript"> 15 var vm = new Vue({ 16 el:'#computed_props', 17 data:{ 18 kilometers:0, 19 meters:0 20 }, 21 methods:{ 22 ki: function(){ 23 this.meters = this.kilometers*1000 24 }, 25 me: function(){ 26 this.kilometers = this.meters/1000 27 } 28 } 29 }) 30 </script> 31 </body> 32 </html>
首先 v-on 一開始感覺只見到了跟click搭配，但是我這里是想當我在input框里輸值的時候觸發事件，所以查了一下，可以v-on:input ， 如果我是在千米那里觸發事件，那我就處理meter的值，對米的觸發同理
watch監聽的區別就是，我監聽它，並且保持了他們之間的數量關系，就不需要我觸發事件這種事情，它會時刻監聽，不需要特別的去處理數據，且watch是有兩個參數的，就可以得到之前的值和后來改變之后的值。所以如果這種情況要用v-model的話，應該處理的就很復雜，因為改變之前還需要存起來..之類的。
ps: 非vue的時候，有一個是oninput 跟click一個意思，就是輸入的時候觸發事件，但是在vue里這樣寫是沒有作用的，且@oninput v-on:oninput 都是不可以的
看了一下別人的博客，講一下自己對於watch method co的區別的理解和別人的博客理解（捂臉...又照搬，看着口語化的部分就是我寫的可能）
- computed：計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。
- methods：methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。
- watch：是一種更通用的方式來觀察和響應 Vue 實例上的數據變動。一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。
computed 計算屬性，是頁面加載之后就可以執行的，賦值什么的（給我一種onload函數的感覺，我也不是很清楚）
methods 是要觸發才執行的一些函數 如上述代碼里的
watch就是響應數據變化，對應一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。
所以他們的執行順序為：默認加載的時候先computed再watch，不執行methods；等觸發某一事件后，則是：先methods再watch。（因為這個時候早就加載完了）
最相似的就是watch和computed，他們兩個對數據都挺敏感，當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的“相關”數據“自動”發生變化，也就是自動調用相關的函數去實現數據的變動。
computed 計算屬性只有在相關的數據發生變化時才會改變要計算的屬性，當相關數據沒有變化是，它會讀取緩存。而不必想 motheds方法 和 watch 方法是的每次都去執行函數。 所以有一些數據響應還是用computed會更好（人家博客的例子）
樣式綁定
class屬性綁定：（其實在上一篇里提到了一個demo v-bind的那個）
v-bind:class 設置對象，可以動態的切換class true就綁定這個選擇器，用這種樣式
也可以在對象中傳入更多屬性用來動態切換多個 class 。跟綁定一個有一點點區別，貼上代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 7 <style> 8 .active { 9 width: 100px; 10 height: 100px; 11 background: green; 12 } 13 .text-danger { 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="app"> 20 <div class="static" v-bind:class="{ 'active': isActive,'text-danger': hasError }"> 21 </div> 23 </div> 24 25 <script> 26 new Vue({ 27 el: '#app', 28 data: { 29 isActive: true, 30 hasError: true 31 } 32 }) 33 </script> 34 </body> 35 </html>
第20行是想對兩個選擇器都切換，如果都是true就相當於
1 <div class="static active text-danger"></div
的意思，但是active可以加引號，也可以不加，經過實踐，后面的那個選擇器必須得加引號。
也可以直接綁定數據里的一個對象：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 7 <style> 8 .active { 9 width: 100px; 10 height: 100px; 11 background: green; 12 } 13 .text-danger { 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="app"> 20 <div v-bind:class="classObject"></div> 21 </div> 22 23 <script> 24 new Vue({ 25 el: '#app', 26 data: { 27 classObject: { 28 active: true, 29 'text-danger': true 30 } 31 } 32 }) 33 </script> 34 </body> 35 </html>
我乍一看的時候，突然有點看不太懂。現在這個意思就是我直接綁了個classObject（說到了這個，之前看書的時候想起來有個地方駝峰寫法會自動轉化為），然后把之前那兩個選擇器放在data下面classObject里
也可以在這里綁定返回對象的計算屬性，進階版demo：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 7 <style> 8 .active { 9 width: 100px; 10 height: 100px; 11 background: green; 12 } 13 .text-danger { 14 background: red; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="app"> 20 <div v-bind:class="classObject"></div> 21 </div> 22 23 <script> 24 new Vue({ 25 el: '#app', 26 data: { 27 isActive: true, 28 error: null 29 }, 30 computed: { 31 classObject: function () { 32 return { 33 active: this.isActive && !this.error, 34 'text-danger': this.error && this.error.type === 'fatal', 35 } 36 } 37 } 38 }) 39 </script> 40 </body> 41 </html>
==用於一般比較，===用於嚴格比較，==在比較的時候可以轉換數據類型，===嚴格比較，只要類型不匹配就返回flase。
可以看到這里，data里沒有我所要的選擇器，只有一些判斷用的值（我不知道怎么描述）然后我通過return的時候計算屬性，（即 this.誰誰巴拉巴拉） 然后給選擇器真或假，至於綁定還是用的classObject 返回對象的計算屬性。 （說它是常用且強大的計算模式，我暫時想不到它可以干嘛用，還沒想到他有啥很好的地方）
可以把一個數組傳給 v-bind:class 這個很容易理解，activeClass, errorClass所對應的類名在data里會賦值的，就不涉及true false 直接類
1 <div v-bind:class="[activeClass, errorClass]"></div>
三元來做這個切換也可以
1 <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>//errorClass 是始終存在的，isActive 為 true 時添加 activeClass 類
可以在 v-bind:style 直接設置樣式（內聯）
1 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div>
也可以直接綁定到一個樣式對象，v-bind:style 也可以使用數組將多個樣式對象應用到一個元素上
注意：當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測並添加相應的前綴。