綁定語法

給HTML中添加變量，讓HTML中的內(nèi)容也可以隨程序中的變量改變而改變。

{{ ... }} 雙括號(hào)語法，也叫大胡子語法（Mustache）

官方名字：Interpolation（補(bǔ)缺、插值的意思）。

{{ }}雙括號(hào)中可以放變量、js表達(dá)式、函數(shù)調(diào)用、創(chuàng)建對(duì)象、訪問數(shù)組元素、三目等，不能放程序結(jié)構(gòu)（分支和循環(huán)），沒有返回值的函數(shù)調(diào)用。

注：只能綁定元素的內(nèi)容，無法綁定元素的屬性值。

示例：

指令

Vue.js提供的，專門增強(qiáng)HTML功能的特殊的HTML屬性。

1.元素的屬性值可能發(fā)生變化：v-bind

用法：<any? v-bind:屬性名="數(shù)據(jù)變量/js表達(dá)式">......</any>

簡(jiǎn)寫：v-bind可省略，<any? :屬性名="數(shù)據(jù)變量/js表達(dá)式">......</any>

2.根據(jù)程序中的變量值控制一個(gè)元素的顯示與隱藏：v-show

用法：<any? v-show="js條件">......</any>

原理：new Vue() 掃描到 v-show 時(shí)，自動(dòng)執(zhí)行js條件，如果條件為true，則該元素原樣顯示；否則如果js條件執(zhí)行結(jié)果為false，則 new Vue() 自動(dòng)為當(dāng)前元素添加display:none,隱藏該元素。?

3.根據(jù)程序中的變量值控制一個(gè)元素的顯示與隱藏：v-if

用法：<any? v-show="js條件">......</any>

原理：new Vue() 掃描到 v-if 時(shí)，自動(dòng)執(zhí)行js條件，如果條件為true，則保留該元素，否則如果js條件執(zhí)行結(jié)果為false，則刪除該元素！

v-show? vs? v-if

v-show 采用display:none方式隱藏元素，不改變Dom樹，效率高！

v-if 采用添加刪除元素方式控制元素顯示或隱藏，可能頻繁改變Dom樹，效率低！

4.根據(jù)變量控制兩個(gè)元素二選一顯示或隱藏：v-if? ?v-else

用法：<元素1? v-if="條件">

? ? ? ? ? ?<元素2? v-else>

原理：每次掃描時(shí)判斷條件的值，如果條件為true，就顯示元素1，刪除元素2；如果條件為false，就顯示元素2，刪除元素1

注：（1）兩個(gè)元素之間不能插入其他元素，必須緊挨著寫；

? ? ? ?（2）和 js 程序一樣，v-else后不需要寫任何條件

? ? ? ?（3）不是用display:none隱藏，而是徹底刪除不顯示的元素

5.根據(jù)變量控制多個(gè)元素多選一顯示：v-else-if

用法：<元素1? v-if="條件1">

? ? ? ? ? <元素2? v-else-if="條件2">

? ? ? ? ? ......

? ? ? ? ? ?<元素n? v-else>

原理：每次掃描時(shí)判斷條件的值，哪個(gè)元素條件為true，就顯示哪個(gè)元素，并刪除其他元素；如果之前所有條件都不滿足，就顯示最后一個(gè)元素，刪除之前所有元素。

注：（1）v-if 和 v-else-if 和 v-else 之間不能插入其他元素，必須緊挨著寫；

? ? ? ?（2）和 js 程序一樣，v-else后不需要寫任何條件

? ? ? ?（3）不是用display:none隱藏，而是徹底刪除不顯示的元素

6.反復(fù)生成多個(gè)相同結(jié)構(gòu)的HTML元素：v-for

用法：（1）<要反復(fù)生成的元素? v-for="(value,i) of 數(shù)組/字符串"? :key="i">

? ? ? ? ? ?（2）<要反復(fù)生成的元素? v-for="(value,key) of 對(duì)象"? :key="key">

? ? ? ? ? ?（3）<要反復(fù)生成的元素? v-for="i of 整數(shù)">

原理：new Vue() 會(huì)自動(dòng)遍歷of后的數(shù)組中的每個(gè)元素；每遍歷一個(gè)元素，就創(chuàng)建一個(gè)當(dāng)前HTML元素的副本；of前的兩個(gè)變量：value會(huì)自動(dòng)獲得當(dāng)前正在遍歷的數(shù)組元素值，i會(huì)自動(dòng)獲得當(dāng)前正在遍歷的下標(biāo)位置；如果當(dāng)前元素或子元素中，需要正在遍歷的元素或下標(biāo)，可用綁定語法來綁定value和i的值。value和i的使用范圍僅限于當(dāng)前元素及其子元素范圍內(nèi)，不能再當(dāng)前元素外使用。

注：（1）v-for 可遍歷一切數(shù)字下標(biāo)的元素：數(shù)組/字符串/對(duì)象等；

? ? ? ?（2）<元素 v-for="i of 整數(shù)">可以重復(fù)生成從1開始到這個(gè)整數(shù)的次數(shù)的HTML元素，of前的i會(huì)依次獲得12345可用于綁定在元素的內(nèi)容中。eg：分頁按鈕。

? ? ? ?（3）a.不加:key="i"?反復(fù)生成的元素是無差別的，如果將來數(shù)組或?qū)ο笾械哪骋粋€(gè)成員值發(fā)生了改變，就無法精準(zhǔn)找到并區(qū)分要更改的是哪一個(gè)元素，只能將這組元素全部重新生成一遍——效率低！

? ? ? ? ? ? ? ? b.加上:key="i" ，等于對(duì)每個(gè)元素加上一個(gè)不重復(fù)的標(biāo)識(shí)i。如果將來數(shù)組或?qū)ο笾心骋粋€(gè)成員值發(fā)生了改變，即可根據(jù)key屬性的值精確找到要更改的一個(gè)HTML元素，只更改受影響的一個(gè)HTML元素即可，不用將這組HTML元素全部重新生成一遍——效率高！

? ? ? ?（4）當(dāng)數(shù)組中保存的是原始類型的值時(shí)，在程序中修改數(shù)組中某個(gè)元素值時(shí)，不能使用[下標(biāo)]方式訪問，因?yàn)榇藭r(shí)下標(biāo)方式是不受監(jiān)控的，即使修改成功，頁面也不會(huì)自動(dòng)更新。應(yīng)該用.splice(i,1,"新值")代替。但是如果數(shù)組中保存的是引用類型的對(duì)象，則可以用[下標(biāo)]修改。

7.綁定HTML片段內(nèi)容：v-html

用法：<元素? v-html="包含HTML內(nèi)容的變量或js表達(dá)式">

8.防止用戶短暫看到{{}}：v-cloak

因?yàn)関ue代碼是放在js文件中的，所以如果網(wǎng)速慢，vuediamante暫時(shí)沒有下載下來時(shí)，用戶很有可能短暫看到頁面上的綁定語法，用戶體驗(yàn)不好。

用法：（1）在包含綁定語法的元素上添加v-cloak屬性；

? ? ? ? ? ?（2）在css中手動(dòng)添加樣式：[v-cloak]{display:none}。

原理：（1）用屬性選擇器查找所有帶有v-cloak屬性的元素，暫時(shí)隱藏；

? ? ? ? ? ?（2）當(dāng)new Vue()渲染完成時(shí)，自動(dòng)找到所有v-cloak屬性，自動(dòng)移除。

9.防止用戶短暫看到{{}}：v-text

用法：<元素 v-text="變量或js表達(dá)式">......</元素>

原理：因?yàn)榻壎ㄕZ法寫在了元素的屬性里，所以，如果不是vue幫忙，用戶是無論如何看不到元素屬性中的內(nèi)容的。當(dāng) new Vue() 讀取到 v-text 的內(nèi)容時(shí)，會(huì)解析 v-text 的內(nèi)容，替換元素開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容。

10.事件綁定：v-on / 簡(jiǎn)寫@? 簡(jiǎn)寫

用法：（1）標(biāo)準(zhǔn)寫法：<元素? v-on:事件名="處理函數(shù)(實(shí)參值...)">

? ? ? ? ? ?（2）簡(jiǎn)寫：<元素? @事件名="處理函數(shù)(實(shí)參值...)">

? ? ? ? ? ?（3）函數(shù)不需要傳參時(shí)，()可省略。<元素? @事件名="處理函數(shù)">

11. v-once

僅在首次渲染頁面時(shí)綁定一次，即使之后模型變量再改變，也不會(huì)自動(dòng)更新頁面。

原理：只在首次加載時(shí)，一次性將模型數(shù)據(jù)顯示在當(dāng)前元素，不會(huì)將當(dāng)前元素加入到虛擬Dom樹中。

12. v-pre

保留當(dāng)前元素中的{{}}語法，不進(jìn)行綁定渲染。