Vue實戰前必須掌握的10個指令

1. v-text 指令

---

v-text 指令用於更新標籤包含的文本。咱們看看它的用法：

咱們給<p></p>標籤加上了指令 v-text ，它的值就是咱們data數據中的msg，就這麼簡單，最後咱們來看看渲染結果：

它的做用跟{{ msg }}效果是同樣的：

2. v-html 指令

---

v-html 這個指令它幫助咱們綁定一些包含html代碼的數據在視圖上，好比：「<b>hello,vue</b>」，這個字符串包含了<b>標籤，
要想<b>不被看成普通的字符串渲染出來，就得用 v-html 指令。

仍是上面的代碼，咱們把 v-text 指令換成 v-html 指令，msg的值變成了含有html代碼的：「<b>hello vue</b>」，咱們看看渲染效果：

就這樣，<b>標籤被成功解析並渲染出來，視圖上的文本也有了加粗的效果，這就是v-html發揮了做用，bingo！

3. v-show 指令

---

v-show 聽這名字就能夠猜想它跟元素的顯示/隱藏 相關，沒錯，它就是用來控制元素的display css屬性的。
v-show 指令的取值爲true/false，分別對應着顯示/隱藏。有比較才能看到效果，咱們拿兩個標籤分別設置不一樣的值，看看解析渲染效果。

咱們用了兩個<p>標籤，都加上了 v-show 指令，取值分別爲true和fasle，直接看效果吧！

第一個p標籤的v-show設置爲true，元素正常顯示；第二個p標籤的v-show設置爲false，元素解析成：

因此它不會顯示在視圖上。這就是 v-show 指令的用法，簡單明瞭。

4. v-if 指令 指令

---

v-if 指令的取值也是爲true或false，它控制元素是否須要被渲染出來，聽起來有點抽象，不怕，一樣，咱們拿兩個元素設置不用的值，
對比一下看效果就知道了。

咱們把 v-show 指令換成了 v-if ，一樣是兩個<p>標籤，一樣是不一樣的取值：true和false。咱們看效果：

看到了吧，設置爲true的<p>標籤，成功渲染出來，而設置爲false的<p>標籤，直接被一行註釋代替了，並無被解析渲染出來。

也許你會問了， v-show 和 v-if 都能控制元素顯示或者隱藏，這兩個怎麼區別使用呢？

5. v-else 指令

---

if和else在編程語言通常都是結對出現的，在vue裏面也不例外。它沒有對應的值，可是要求前一個兄弟節點必需要使用 v-if 指令，
也對，沒有if，哪來的else。

咱們使用兩個<p>標籤，第一個使用 v-if 指令，並取值爲false，第二個使用 v-esle 指令，啥也不說了，看效果最直觀：

只有第二個<p>標籤被渲染出來，第一個<p>標籤因爲 v-if 指令的值爲false，直接被忽視了，不渲染。
同理，一旦第一個標籤的 v-if 指令的值爲true，被忽視的就是第二個<p>標籤了。 v-if 和 v-else 只有一個會被渲染出來。
有興趣的同窗，能夠繼續去了解一下 v-else-if 指令，一樣很簡單。

6. v-for 指令

---

有時候，咱們的data中的存放的數據不是個簡單的數字或者字符串，而是數組Array類型，這個時候，
咱們要把數組的元素展現在視圖上，就須要用到vue提供的 v-for 指令，來實現列表的渲染。

咱們看看它的用法：

首先，咱們的data中包含數組list，數組包含三個元素：「Tom」，「John」，「Lisa」，咱們經過 v-for 指令把它渲染出來，
其中item表示數組中的每一個元素。咱們看看渲染結果：

咱們看到，咱們解析渲染出三個div，其中包含的值分別是數組中的元素，表示咱們解析渲染成功。
什麼，怎麼拿到索引？拿到每一個元素的索引也很簡單，咱們稍微改動一下代碼，把html部分的代碼修改成：

在循環解析的過程當中，咱們不但要拿到list數組的每一個元素item，咱們還獲取每一個元素的索引，寫法如上，循環的時候加上(index,item)。

咱們來看效果圖：

咱們看到，索引分別是0,1,2都被成功地渲染出來了。這就是用 v-for 指令來渲染列表的用法。
比起之前手動更新dom列表，簡直就是方便得不要不要的。

7. v-bind 指令

---

在第六節咱們也提過 v-bind 指令的做用和用法，它用於動態綁定DOM元素的屬性，比較常見的好比：<a>標籤的href屬性，<img/>標籤的src屬性。

用 v-bind 指令來修飾href屬性，代表它的值是一個動態的值，對應的則是data中的link的值：http://hello.com.

來吧，看看渲染效果：

<a>標籤的href的值成功地解析渲染成:http://hello.com。

第六節也說過， v-bind 指令能夠簡寫成一個冒號「：」，也就是如下兩種寫法是等價的。

它們的解析渲染效果是同樣同樣的。

8. v-on 指令

---

v-on 指令至關於綁定事件的監聽器，綁定的事件觸發了，能夠指定事件的處理函數。
這裏咱們仍是配合methods來演示：

咱們經過 v-on 指令修飾click點擊事件，指定事件響應後的處理函數爲methods中的say( )方法，
咱們渲染看看效果：

點擊按鈕，能夠成功觸發click事件，而且調用say( )，一切都在咱們的預期之中。

此外，若是你想給處理程序say( )傳參數，也是能夠的，用法跟普通的方法一致。

咱們再上一個案例的基礎上稍微修改代碼，say(name)接受一個參數name，並把name打印出來，在調用的時候傳如實參「Tom」。
再看看效果，是否是在咱們的預期以內：

9. v-model 指令

---

這是一個最重要最經常使用的指令，通常用在表單輸入，它幫助咱們輕易地實現表單控件和數據的雙向綁定，相對之前的手動更新DOM，
簡直就是開發者的福音，火燒眉毛地來看看它的用法：

只要給input控件添加 v-model 指令，並指定關聯的數據msg，咱們就能夠輕鬆把把用戶輸入的內容綁定在msg上。
咱們把msg的內容顯示出來，看是否是跟用戶輸入的內容是同步更新的：

是否是比你手動更新DOM爽多了，是否是感覺到了vue的MVVM帶來的快感？

10. v-once 指令

---

最後，咱們再來說解一下v-once指令，它的特色是隻渲染一次，後面元素中的數據再更新變化，都不會從新渲染。

咱們再上面的案例代碼中稍作修改，仔細看改了哪裏：

修改1:<p>標籤增長了 v-once 指令；
修改2：msg的初始值再也不是空字符串。咱們來看看效果：

因爲msg有了初始值，第一次渲染的時候，input控件和<p>標籤都有了內容，因爲<p>標籤咱們添加了 v-once 指令，
因此，後期咱們更新msg的值的時候，<p>標籤的內容不會發生改變，也是符合咱們的預期。

總結：
本文共學習了Vue的10個指令，v-text 、 v-html 、 v-show 、 v-if 、 v-else 、v-for 、 v-bind 、 v-on 、
v-model 、 v-once ，並區別使用 v-if 和 v-show 這2個指令。

掌握好這10個指令能夠知足開發中的需求了。