vuejs總結：

vm指new Vue獲取的例項

①當dom標籤裡的值和data裡的值繫結後，更改data對應的值可以實時更新標籤裡的值；

但後續新增的值是無效的（繫結失敗）。

②將可以將物件直接作為data的一個屬性，是有效的（因為物件按值傳遞）；

所以該屬性和該物件是全等的；

③vm的介面有：

vm.$data是vm的data屬性；

vm.$el是el屬性指向的dom結點；

vm.$watch是監視屬性變化（比如data裡的值）（參照（九））

④vue例項的宣告週期，有幾個關鍵函式：

created：事件繫結結束後，函式直接在宣告vue例項的時候，作為vue例項中的一個屬性，下同。

vm.$mount：掛載dom結點；

beforeCompile：載入模板之前；

compiled：載入模板之後；

ready：完成之後（我猜的）；

beforeDestroy：摧毀之前；

destroyed：摧毀之後；

⑤vm.$mount(掛載的id或者類名)

在new Vue例項的時候，不加el，則表示不掛載只生成，生成之後，可以通過該方法來手動掛載到某個地方，如果符合條件的有多個，則掛載到第一個地方；

⑥v-for遍歷陣列、物件，可以建立多個標籤；比如用於建立表格；

⑦轉義：{{}} 兩個大括號，不會轉義值的html標籤；

{{{}}}  三個大括號，會將值的html標籤轉義，即變為html文字；

不能在值內再放入繫結資料（除非使用partials

⑧在插值的大括號內，可以放入表示式（不能放函式）；

⑨在插值的大括號內，加入管道符|，可以使用過濾器；

       capitalize就是將首字母大寫的過濾器；

       過濾器只能放在表示式最後，不能成為表示式的一部分；

       過濾器可以加引數；

       過濾器可以自定義（但目前還不知道自定義的方法）；

⑩指令：

v-if=”變數名”           當某個值為true時存在；

       v-bind:屬性名=”變數名”             將等號後的變數名（指向vm的data屬性裡的同名屬性），和該標籤的html屬性繫結在一起。

       v-on:事件型別

       v-on的縮寫是@；v-bind的縮寫是:（冒號）；

⑪計算屬性computed

       這裡的屬性，可以當做data屬性裡的使用；優點是data裡的數值變更時，這裡會跟著一起改變；

       可以使用更復雜的表示式（插值裡只能使用簡單的表示式）；

⑫計算屬性的setter和getter

預設是getter（物件的get屬性），即當某個值改變時，觸發回撥函式（或get方法）；

當計算屬性改變時，需要改變某些值（比如改變10個值，在其他地方寫監聽這個值就不好），那麼則需要設定setter（物件的set屬性），即當計算屬性改變時，觸發set方法；

⑬監視屬性vm.$watch(被監視的屬性, 回撥函式)

       監視的是data屬性；

回撥函式的第一個引數是改變後的值，第二個引數是改變前的值；

       屬性的值改變時觸發；

⑭class繫結：

       用v-bind:class

       class使用物件形式，key為class類名，值表示是否顯示這個class類；

       可以直接將一個object物件放置在v-bind:class的值中，並將這個物件放置在data屬性中，這樣設定這個object物件的屬性即可；

       class的陣列寫法：數組裡的成員為變數名，如果該變數不是object物件，則變數的值為類名；如果是物件時，物件的key是類名，值表示是否顯示；

⑮style繫結：

       用v-bind:style

       形式是一個物件，物件的key是樣式名（如fontSize，注意樣式名需要採用駝峰式而不是css式），值是樣式的值；

       可以直接將物件名放在v-bind:style的等式右邊；

       物件的值改變，將實時影響內聯樣式；

       對於某些樣式，可以針對瀏覽器加字首（但某些不能對所有瀏覽器相容）；

（十七）計算屬性

①簡單來說，假如data裡面有屬性a=1，然後你需要一個變數跟著a變化，例如b=a+1，那麼就需要用到計算屬性，Vue例項的computed屬性中，設定b為其屬性，其表現為一個函式，返回值是b的值。

具體見程式碼：

1. <divid="app">
2.     <table>
3.         <tr>
4.             <td>a</td>
5.             <td>b=a+1</td>
6.         </tr>
7.         <tr>
8.             <td>{{a}}</td>
9.             <td>{{b}}</td>
10.         </tr>
11.     </table>
12.     <button @click="add">a = a + 1</button>
13. </div>
14. <script>
15.     var vm = new Vue({  
16.         el: "#app",  
17.         data: {  
18.             a: 1  
19.         },  
20.         methods: {  
21.             add: function () {  
22.                 this.a++;  
23.             }  
24.         },  
25.         computed: {  
26.             b: function () {  
27.                 return this.a + 1;  
28.             }  
29.         }  
30.     })  
31. </script>

效果：

初始a的值為1，b的值為2。

點選按鈕，會讓a的值增加1（注意，沒有動b的值）。

但由於b和a是相關的（這裡的this.a指的是a），因此，在a的值改變後，b的值也會跟著改變。

之所以這麼做，回想一下，Vuejs禁止在變數繫結時輸入一個函式，因此如果表示式比較複雜，那麼就必須這麼做，好處是可以防止模板太重（放很大的表示式在模板中）。

②vm.$watch(“屬性”, function(newVal, oldVal){

//回撥函式的具體內容

})

用於觀察Vue例項上的資料變動；

【1】可以監視data屬性中的某個屬性（比如上面的a）；

【2】可以監視computed屬性中，某個屬性的值，例如上面的b；支援字串的變化，如程式碼：

1. var vm = new Vue({  
2.     el: "#app",  
3.     data: {  
4.         a: 1  
5.     },  
6.     methods: {  
7.         add: function () {  
8.             this.a++;  
9.         }  
10.     },  
11.     computed: {  
12.         b: function () {  
13.             var str = "";  
14.             for (var i = 0; i < this.a; i++) {  
15.                 str += String(i);  
16.             }  
17.             return str;  
18.         }  
19.     }  
20. })  
21. vm.$watch("b", function (val) {  
22.     alert(val);  
23. })  

這裡的監視b是有效的。

但假如b返回的是一個固定的字串，或者值，那麼則不會觸發（因為值沒有改變）

【3】另外，在$watch的回撥函式中，第一個引數val的值是新值（即變動後的值），他也可以有第二個引數，而第二個引數的值是舊值（即變動前的值）。

【4】watch的回撥函式裡，this指向的是vm這個物件；

③setter

計算屬性預設是getter（寫作get），可以這麼理解，他監視某個值，那個值變化時會觸發這個回撥函式；

但也可以設定為setter（寫作set），setter和getter的區別在於，setter是當computed這個屬性的值變化時所觸發的。例如：

1. <div id="app">  
2.     <input v-model="firstName"/>  
3.     <input v-model="lastName"/>  
4.     <input v-model="fullName"/>  
5. </div>  
6. <script>  
7.     var vm = new Vue({  
8.         el: '#app',  
9.         data: {  
10.             firstName: 'Foo',  
11.             lastName: 'Bar'
12.         },  
13.         computed: {  
14.             fullName: {  
15.                 // getter
16.                 get: function () {  
17.                     returnthis.firstName + ' ' + this.lastName  
18.                 },  
19.                 // setter
20.                 set: function (newValue) {  
21.                     var names = newValue.split(' ')  
22.                     this.firstName = names[0]  
23.                     this.lastName = names[names.length - 1]  
24.                 }  
25.             }  
26.         }  
27.     })  
28. </script>  

我們修改前兩個輸入框的值，將影響第三個輸入框的值；

我們也可以修改第三個輸入框的值，來影響前兩個輸入框的值。

另外，由於這種繫結形式，我們將無法讓fullName的名字是三個單詞，原因在於，set觸發了lastName的改變（獲取最後一個單詞），而lastName的改變又會觸發getter（將firstName和lastName拼接起來），因此只會保留第一個單詞和最後一個單詞。

（十八）Class和Style繫結

①簡單來說，就是用一個變數來控制某個class是否存在與dom之中，這樣不需要直接操縱dom的class屬性。

如果不想要他影響某個屬性，那麼就將他放在class裡面，而不是繫結的class裡面。

具體方法如下，將以下內容放到html標籤裡：

1. v-bind:class="{'green':a,'red':b}"

效果是，假如變數a的值是true（或者可以被隱式轉換為true），那麼class屬性裡則新增green，如果b為true，那麼red也會被新增。注意，這二者不是互斥的。

如程式碼：