一、基本語法

1、mustache語法：

雙大括號，讓data屬性的值響應式的顯示在html檔案中；

也可以在雙大括號中寫一些簡單的表示式；

2、v-once語法

標籤只渲染一次，後期改變不進行渲染；

還有v-for和v-on語法和v-clok語法；

其中v-cloak斗篷語法，現在用的很少；

v-on的語法需要在vue物件定義methods屬性；

3、v-html和v-text語法

內容可以直接以html的形式或者text形式展示出來；

內容有html標籤就用v-html，如果只是純文字則用v-text；但是v-text會覆蓋div標籤裡的東西，不是很靈活，所以還是用mastance語法；

4、v-pre語法

5、v-bind語法

v-bind語法和mustache語法:

• 在標籤的內容中繫結vue變數使用mustance語法；
• 在標籤的屬性中繫結vue變數使用v-bind語法；

v-bind的幾種方式

• 為標籤的屬性繫結一個普通變數
• 為標籤的屬性繫結物件
• 為標籤的屬性繫結陣列

(1)v-bind動態繫結標籤的基本屬性比如src或href

使用方法：加了v-bind，vue看到後就會知道src屬性是一個動態變數，就會將imgURL動態繫結到src上；

（2）v-bind動態繫結標籤的class屬性

（3）v-bind動態繫結標籤的style屬性

使用物件的方式

使用陣列的方式

二、計算屬性

1、簡單介紹

即除了vue（{el、data、methods}）之外，再加一個computed計算屬性；這個屬性和methods類似，但是由於叫屬性所以就呼叫的時候不用加（）；

2、本質

它的本質或者說完整寫法是下圖紅圈的，它是由set和get方法組成的；

但由於set方法基本不用，get方法又進行了簡寫，所以可以寫成上面那種形式；

但是我們要知道，讀取計算屬性的時候，會用到get方法，修改計算屬性的值的時候，會用到set方法；

3、計算屬性computed和methods的對比

• computed有快取，多次使用時只會呼叫一次，會非常快；
• 而且既然叫計算屬性，那麼也是屬性，可以再標籤內容中使用mustanche語法，methods時不能使用mustanche語法的；
• 計算屬性既然為屬性，那麼是可以實時響應的，而方法只能靠事件觸發，在實時性上還是沒有計算屬性好；

補充知識點：let和const

以前只有var所以只有全域性作用域和區域性作用域，只能搞全域性變數(掛載在windows），和區域性變數（定義在函式內部的叫區域性變數）；

但是這var會嚴重影響if語句塊和for語句塊，因為在if、for語句塊定義的變數如果使用var會發現，在外部也可以使用，這肯定是不行的，所以es5的時候要用閉包的方式解決；

現在es6直接使用let解決，除了全域性作用域和區域性作用域還有塊級作用域；

常量的含義是指向的物件不能修改，但是可以改變物件內部的屬性；

即在棧中儲存的記憶體地址不可以改變，但是棧中記憶體地址所指向的物件的內部屬性是可以改變的；

補充知識點:字面量增強

等號＝左邊的是變數，右邊的就是字面量；

在本例中，即在物件中，屬性如果是外面已經定義過的變數，則可以直接定義；函式也可以簡寫；

let name = ‘xiaoming‘；
let age = 13；

const  obj = {
    name,
   age,
   run(){
    }  ,
    eat(){
    }
    
    
}

補充知識點：高階函式

filter（）方法: 過濾

傳一個引數，這個引數是回撥函式，然後每一次陣列的元素都放在回撥函式中；

arr.filter( function ( n ){
                  return n <100;
              }
);

map（）方法: 對映

傳一個引數，這個引數是回撥函式，然後每一次陣列的元素都放在回撥函式中；

arr.map( function ( n ){
                  return n * 100;
              }
);

reduce（）方法 彙總

傳兩個個引數，第一個引數是回撥函式(此回撥函式也有兩個引數第一個是previousValue第二個是陣列元素n)，然後每一次陣列的元素都放在回撥函式中；第二個引數是previousvalue的初始值本例中是0；
每一次遍歷陣列元素時，第一次的previousValue+n的值都會成為下一次的previousValue的值，由此可以實現加的運算；

arr.reduce( function (previousValue， n ){
                  return previousValue + n;
                 }，
                 0
);