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

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

這一節(jié)，我們繼續(xù)學(xué)習(xí)剩下的5個指令。話不多說，擼起來！

6. v-for 指令

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

我們看看它的用法：

<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中包含數(shù)組list，數(shù)組包含三個元素：“Tom”，“John”，“Lisa”，我們通過?v-for?指令把它渲染出來，其中item表示數(shù)組中的每個元素。我們看看渲染結(jié)果：

(效果圖)

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

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

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

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

我們來看效果圖：

（效果圖）

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

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

7. v-bind?指令

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

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

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

來吧，看看渲染效果：

（效果圖）

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

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

<a v-bind:href="link">hello官網(wǎng)</a>
<!--等價于-->
<a :href="link">hello官網(wǎng)</a>

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

8. v-on?指令

?v-on?指令相當(dāng)于綁定事件的監(jiān)聽器，綁定的事件觸發(fā)了，可以指定事件的處理函數(shù)，記性好的同學(xué)應(yīng)該記得我們在第四節(jié)介紹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選項的用法不再展開講解，還不理解的同學(xué)可以翻看第四節(jié)《定義一個vue實例常用的4個選項》

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

?

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

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

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

<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>

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

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

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

9. v-model?指令

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

<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?指令，并指定關(guān)聯(lián)的數(shù)據(jù)msg，我們就可以輕松把把用戶輸入的內(nèi)容綁定在msg上。我們把msg的內(nèi)容顯示出來，看是不是跟用戶輸入的內(nèi)容是同步更新的：

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

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

10. v-once?指令

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

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

<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,公眾號的同學(xué)們'
??? }
});
</script>

修改1:<p>標(biāo)簽增加了?v-once?指令；

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

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

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

?

本節(jié)小結(jié)

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

?

擴(kuò)展閱讀

?1.《ECMAScript 6 系列》原創(chuàng)教程

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。