第八節：實戰前必須掌握的10個指令(下)

第八節：實戰前必須掌握的10個指令(下)

前端君 翻身的碼農
上一節咱們學了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個指令，能夠知足你在開發中的需求了。