一.插值語法

功能：用於解析標籤體內容。 寫法：{{xxx}}，xxx是js表示式，且可以直接讀取到data中的所有屬性。一旦data中的資料發生改變，那麼頁面中用到該資料的地方也會自動更新；

注意區分：js表示式 和 js程式碼(語句) 　　1.表示式：一個表示式會產生一個值，可以放在任何一個需要值的地方： 　　　　a  ,  　　　　a+b  ,   　　　　x === y ? 'a' : 'b' 　　2.js程式碼(語句) :  　　　　if(){}　 　　　　for(){}

二.指令語法

功能：用於解析標籤 備註：Vue中有很多的指令，且形式都是：v-????  

1.v-bind

含義 : 單向繫結 , 資料只能從data流向頁面

簡寫 : [ :value=' ' ]

 

2.v-model

含義 : 雙向繫結 , 資料不僅能從data流向頁面，還可以從頁面流向data

 

備註： 　　1.雙向繫結一般都應用在表單類元素上（如：input、select等） 　　2.v-model:value 可以簡寫為 v-model，因為v-model預設收集的就是value值。

 

v-bind 和 v-mode 的例子 : 

<!-- 普通寫法 -->
單向資料繫結：<input type="text" v-bind:value="name"><
 
br/>
雙向資料繫結：<input type="text" v-model:value="name"><br/>

<!-- 簡寫 -->
單向資料繫結：<input type="text" :value="name"><br/>
雙向資料繫結：<input type="text" v-model="name"><br/>

如下程式碼是錯誤的，因為v-model只能應用在表單類元素（輸入類元素）上 
<h2 v-model:x="name">你好啊</h2>

 

3.v-on:xxx

含義 : 事件繫結 , xxx是事件名

簡寫 : [ @:xxx=' ' ]

注意 :  　　1.事件的回撥需要配置在methods物件中，最終會在vm上； 　　2.methods中配置的函式，不要用箭頭函式！否則this就不是vm了； 　　3.methods中配置的函式，都是被Vue所管理的函式，this的指向是vm 或 元件例項物件vc； 　　4.@click="demo" 和 @click="demo($event)" 效果一致，但後者可以傳參； 例子:

<button @click="showInfo1">點我提示資訊1（不傳參）</button>
<button @click="showInfo2($event,66)">點我提示資訊2（傳參,$event固定值,別的沒用）</button>


// 函式的第一個引數,預設是event的
showInfo1(event){
    console.log(event)
    // console.log(this) //此處的this是vm
    alert('同學你好！')
},


//可以傳遞引數,那麼第一個就要用$event替代[$event固定值]
showInfo2(event,number){
    console.log(event,number)
    // console.log(event.target.innerText)
    // console.log(this) //此處的this是vm
    alert('同學你好！！')
}

事件修飾符 : 

　　1.prevent：阻止預設事件（常用）； 　　2.stop：阻止事件冒泡（常用）； 　　3.once：事件只觸發一次（常用）； 　　4.capture：使用事件的捕獲模式； 　　5.self：只有event.target是當前操作的元素時才觸發事件； 　　6.passive：事件的預設行為立即執行，無需等待事件回撥執行完畢； 　　例子 : 

<!-- 阻止預設事件（常用）只會彈出資訊,不會跳轉到新地址 -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">點我提示資訊</a>

<!-- 阻止事件冒泡（常用）只彈出一次,不會在demo1彈出 -->
<div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">點我提示資訊</button>
    <!-- 修飾符可以連續寫 只彈出一次,並且不會跳轉新地址 -->
    <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">點我提示資訊</a>
</div>

<!-- 事件只觸發一次（常用） -->
<button @click.once="showInfo">點我提示資訊</button>

<!-- 使用事件的捕獲模式 在div2的從外到內,先彈1,再彈2 在div1的,只彈1-->
<div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">
        div2
    </div>
</div>

<!-- 只有event.target是當前操作的元素時才觸發事件； -->
<div class="demo1" @click.self="showInfo">
    <button @click="showInfo">點我提示資訊</button>
</div>

<!-- 事件的預設行為立即執行，無需等待事件回撥執行完畢； -->
<ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

鍵盤修飾符 : 

1.Vue中常用的按鍵別名： 　　回車 => enter 　　刪除 => delete (捕獲“刪除”和“退格”鍵) 　　退出 => esc 　　空格 => space 　　換行 => tab (特殊，必須配合keydown去使用) 　　上 => up 　　下 => down 　　左 => left 　　右 => right
2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去繫結，但注意要轉為kebab-case（短橫線命名）
3.系統修飾鍵（用法特殊）：ctrl、alt、shift、meta 　　(1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。 　　(2).配合keydown使用：正常觸發事件。
4.也可以使用keyCode去指定具體的按鍵（不推薦）
5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定製按鍵別名    

4.v-if , v-show

• v-if　　　

　　寫法： 　　　　(1).v-if="表示式" 　　　　(2).v-else-if="表示式" 　　　　(3).v-else="表示式"　　 　　特點：不展示的DOM元素直接被移除。 　　注意：v-if可以和:v-else-if、v-else一起使用，但要求結構不能被“打斷”。v-if與template的配合使用

• v-show　

　　寫法：v-show="表示式" 　　適用於：切換頻率較高的場景。 　　特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉  　  注意 : 使用v-if的時，元素可能無法獲取到，而使用v-show一定可以獲取到。  

5.v-for

1.用於展示列表資料 2.語法：v-for="(item, index) in xxx" :key="yyy" 3.可遍歷：陣列、物件、字串（用的很少）、指定次數（用的很少）  

key的原理

1. 虛擬DOM中key的作用： 　　key是虛擬DOM物件的標識，當資料發生變化時，Vue會根據【新資料】生成【新的虛擬DOM】, 　　隨後Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規則如下： 　　　　(1).舊虛擬DOM中找到了與新虛擬DOM相同的key： 　　　　　　①.若虛擬DOM中內容沒變, 直接使用之前的真實DOM！ 　　　　　　②.若虛擬DOM中內容變了, 則生成新的真實DOM，隨後替換掉頁面中之前的真實DOM。
　　　　(2).舊虛擬DOM中未找到與新虛擬DOM相同的key,建立新的真實DOM，隨後渲染到到頁面。   2. 用index作為key可能會引發的問題： 　　(1). 若對資料進行：逆序新增、逆序刪除等破壞順序操作:會產生沒有必要的真實DOM更新 ==> 介面效果沒問題, 但效率低。
　　(2). 如果結構中還包含輸入類的DOM：會產生錯誤DOM更新 ==> 介面有問題。
3. 開發中如何選擇key?: 　　(1).最好使用每條資料的唯一標識作為key, 比如id、手機號、身份證號、學號等唯一值。 　　(2).如果不存在對資料的逆序新增、逆序刪除等破壞順序操作，僅用於渲染列表用於展示，使用index作為key是沒有問題的。  

6.一些少用的指令

• v-text指令：

　　　　1.作用：向其所在的節點中渲染文字內容。　　　

　　　　2.與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。

• v-html指令：

　　　　1.作用：向指定節點中渲染包含html結構的內容。 　　　　2.與插值語法的區別： 　　　　　　(1).v-html會替換掉節點中所有的內容，{{xx}}則不會。 　　　　　　(2).v-html可以識別html結構。 　　　　3.嚴重注意：v-html有安全性問題！！！！ 　　　　　　(1).在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊。 　　　　　　(2).一定要在可信的內容上使用v-html，永不要用在使用者提交的內容上！

• v-cloak指令（沒有值）：

　　　　1.本質是一個特殊屬性，Vue例項建立完畢並接管容器後，會刪掉v-cloak屬性。 　　　　2.使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題。

• v-once指令：

　　　　1.v-once所在節點在初次動態渲染後，就視為靜態內容了。 　　　　2.以後資料的改變不會引起v-once所在結構的更新，可以用於優化效能。

• v-pre指令：

　　　　1.跳過其所在節點的編譯過程。 　　　　2.可利用它跳過：沒有使用指令語法、沒有使用插值語法的節點，會加快編譯。  

7.自定義指令

1、定義語法： (1).區域性指令： 　　new Vue({ 　　　　　　　　　　　　　　　　new Vue({ 　　　　directives:{指令名:配置物件} 　　或 　　　　　directives{指令名:回撥函式} 　　}) 　　　　　　　　　　　　　　　　　　　　}) (2).全域性指令： 　　Vue.directive(指令名,配置物件) 或 Vue.directive(指令名,回撥函式)
2、配置物件中常用的3個回撥： 　　(1).bind：指令與元素成功繫結時呼叫。 　　(2).inserted：指令所在元素被插入頁面時呼叫。 　　(3).update：指令所在模板結構被重新解析時呼叫。
3、備註： 　　(1).指令定義時不加v-，但使用時要加v-； 　　(2).指令名如果是多個單詞，要使用kebab-case命名方式，不要用camelCase命名。