上一節我們學了5個重要的指令：?v-text?、?v-html?、?v-show?、?v-if?、?v-else??

傳送門:《 實戰前必須掌握的10個指令(上) 》

這一節，我們繼續學習剩下的5個指令。話不多說，擼起來！

6. v-for 指令

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

我們看看它的用法：

<div id="app">
?? <div v-for="item in list">{{item}}</div>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? list:['Tom','John','Lisa']
??? }
});
</script>

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

(效果圖)

我們看到，我們解析渲染出三個div，其中包含的值分別是數組中的元素，表示我們解析渲染成功。

什么，怎么拿到索引？拿到每個元素的索引也很簡單，我們稍微改動一下代碼，把html部分的代碼修改為：

<div id="app">
?? <div v-for="(item,index) in list">
?????? {{index}}.{{item}}
?? </div>
</div>

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

我們來看效果圖：

（效果圖）

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

提醒：v-for指令除了可以迭代數組，還可以迭代對象和整數。?

7. v-bind?指令

在第六節我們也提過?v-bind?指令的作用和用法，它用于動態綁定DOM元素的屬性，比較常見的比如：<a>標簽的href屬性，<img/>標簽的src屬性。

<div id="app">
??? <a v-bind:href="link">hello官網</a>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? link:"http://hello.com"
??? }
});
</script>

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

來吧，看看渲染效果：

（效果圖）

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

第六節也說過，?v-bind?指令可以簡寫成一個冒號“：”，也就是以下兩種寫法是等價的。

<a v-bind:href="link">hello官網</a>
<!--等價于-->
<a :href="link">hello官網</a>

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

8. v-on?指令

?v-on?指令相當于綁定事件的監聽器，綁定的事件觸發了，可以指定事件的處理函數，記性好的同學應該記得我們在第四節介紹methods選項的時候，有用到?v-on??指令。（估計你也不記得了）,這里我們還是配合methods來演示：

<div id="app">
??? <button v-on:click="say">點擊</button>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? methods:{
??????? say(){
??????????? console.log('hello');
??????? }
??? }
});
</script>

methods選項的用法不再展開講解，還不理解的同學可以翻看第四節《定義一個vue實例常用的4個選項》

回到這個例子，我們通過?v-on?指令修飾click點擊事件，指定事件響應后的處理函數為methods中的say( )方法，我們渲染看看效果：

?

(gif圖，加載需要點時間)

點擊按鈕，可以成功觸發click事件，并且調用say( )，一切都在我們的預期之中。?

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

<div id="app">
???<button v-on:click="say('Tom')">
??????? 點擊
? </button>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? methods:{
??????say(name){
????????console.log('hello,'+name);
??????}
??? }
});
</script>

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

(gif圖，加載需要點時間)

“hello，Tom”被打印出來了，一切盡在掌握之中，感覺真好。

9. v-model?指令

這是一個最重要最常用的指令，一般用在表單輸入，它幫助我們輕易地實現表單控件和數據的雙向綁定，相對以前的手動更新DOM，簡直就是開發者的福音，迫不及待地來看看它的用法：

<div id="app">
??? <input v-model="msg" type="text">
??? <p>你輸入：{{ msg }}</p>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? msg:''
??? }
});
</script>

只要給input控件添加?v-model?指令，并指定關聯的數據msg，我們就可以輕松把把用戶輸入的內容綁定在msg上。我們把msg的內容顯示出來，看是不是跟用戶輸入的內容是同步更新的：

(gif圖，加載需要點時間)

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

10. v-once?指令

最后，我們再來講解一下v-once指令，它的特點是只渲染一次，后面元素中的數據再更新變化，都不會重新渲染。?

我們再上面的案例代碼中稍做修改，仔細看改了哪里：

<div id="app">
?? <input v-model="msg"? type="text">
?? <p v-once>你輸入：{{ msg }}</p>
</div>
<script>
let app = new Vue({
??? el:"#app",
??? data:{
??????? msg:'hello,公眾號的同學們'
??? }
});
</script>

修改1:<p>標簽增加了?v-once?指令；

修改2：msg的初始值不再是空字符串。我們來看看效果：

(gif圖，加載需要點時間)

由于msg有了初始值，第一次渲染的時候，input控件和<p>標簽都有了內容，由于<p>標簽我們添加了?v-once?指令，所以，后期我們更新msg的值的時候，<p>標簽的內容不會發生改變，也是符合我們的預期。

?

本節小結

學完本節，你應該掌握了?v-for?、?v-bind?、?v-on?、?v-model?、?v-once?這5個指令的用法，加上第七節的5個指令，可以滿足你在開發中的需求了。

?

擴展閱讀

?1.《ECMAScript 6 系列》原創教程

?2.《實戰前必須掌握的10個指令(上)》

總結

以上是生活随笔為你收集整理的第八节：实战前必须掌握的10个指令(下)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。