前端君 翻身的碼農
上一節我們學了5個重要的指令： v-text 、 v-html 、 v-show 、 v-if 、 v-else
傳送門:《 實戰前必須掌握的10個指令(上) 》
這一節，我們繼續學習剩下的5個指令。話不多說，撸起來！
有時候，我們的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清單，簡直就是友善得不要不要的。
提醒：v-for指令除了可以疊代數組，還可以疊代對象和整數。
在第六節我們也提過 v-bind 指令的作用和用法，它用于動态綁定dom元素的屬性，比較常見的比如：<a>标簽的href屬性，<img/>标簽的src屬性。
用 v-bind 指令來修飾href屬性，表明它的值是一個動态的值，對應的則是data中的link的值：http://hello.com.
來吧，看看渲染效果：
<a>标簽的href的值成功地解析渲染成:http://hello.com。
第六節也說過， v-bind 指令可以簡寫成一個冒号“：”，也就是以下兩種寫法是等價的。
它們的解析渲染效果是一樣一樣的。
v-on 指令相當于綁定事件的監聽器，綁定的事件觸發了，可以指定事件的處理函數，記性好的同學應該記得我們在第四節介紹methods選項的時候，有用到 v-on 指令。（估計你也不記得了）,這裡我們還是配合methods來示範：
methods選項的用法不再展開講解，還不了解的同學可以翻看第四節《定義一個vue執行個體常用的4個選項》
回到這個例子，我們通過 v-on 指令修飾click點選事件，指定事件響應後的處理函數為methods中的say( )方法，我們渲染看看效果：
(gif圖，加載需要點時間)
點選按鈕，可以成功觸發click事件，并且調用say( )，一切都在我們的預期之中。
此外，如果你想給處理程式say( )傳參數，也是可以的，用法跟普通的方法一緻。
我們再上一個案例的基礎上稍微修改代碼，say(name)接受一個參數name，并把name列印出來，在調用的時候傳如實參“tom”。再看看效果，是不是在我們的預期之内：
“hello，tom”被列印出來了，一切盡在掌握之中，感覺真好。
這是一個最重要最常用的指令，一般用在表單輸入，它幫助我們輕易地實作表單控件和資料的雙向綁定，相對以前的手動更新dom，簡直就是開發者的福音，迫不及待地來看看它的用法：
隻要給input控件添加 v-model 指令，并指定關聯的資料msg，我們就可以輕松把把使用者輸入的内容綁定在msg上。我們把msg的内容顯示出來，看是不是跟使用者輸入的内容是同步更新的：
是不是比你手動更新dom爽多了，是不是感受到了vue的mvvm帶來的快感？
最後，我們再來講解一下v-once指令，它的特點是隻渲染一次，後面元素中的資料再更新變化，都不會重新渲染。
我們再上面的案例代碼中稍做修改，仔細看改了哪裡：
修改1:<p>标簽增加了 v-once 指令；
修改2：msg的初始值不再是空字元串。我們來看看效果：
由于msg有了初始值，第一次渲染的時候，input控件和<p>标簽都有了内容，由于<p>标簽我們添加了 v-once 指令，是以，後期我們更新msg的值的時候，<p>标簽的内容不會發生改變，也是符合我們的預期。
學完本節，你應該掌握了 v-for 、 v-bind 、 v-on 、 v-model 、 v-once 這5個指令的用法，加上第七節的5個指令，可以滿足你在開發中的需求了。