Vue指令（Directives）是帶有 v- 字首的特殊屬性。指令屬性的值預期是單個 JavaScript 表示式。指令的職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。

1. v-text 指令

v-text 指令用於更新標籤包含的文字，它的作用跟雙大括號 {{ }} 的效果一樣。我們看看它的用法：

 <div id="app">
    <p v-text="msg"></p>
 </div>

 <script>
    let app = new Vue({
       el:"#app"
 
,
       data:{
         msg:'hello,vue'
       }
    });
 </script>

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

它的作用跟{{ msg }}效果是一樣的：

 <p v-text="msg"></p>
 <!--效果相同-->
 <p>{{ msg }}</p>

2. v-html 指令

v-html 幫助我們繫結一些包含html程式碼的資料在檢視上，比如：“<b>hello,vue</b>

 <div id="app">
    <p v-html="msg"></p>
 </div>

 <script>
   let app = new Vue({
      el:"#app",
      data:{
        msg:'<b>hello,vue</b>'
      }
   });
 </script>

渲染效果：

就這樣，<b>

3. v-show 指令

v-show 指令，跟元素的顯示/隱藏 相關，它是來控制元素的display css屬性的。

<div id="app">
    <p v-show="show1">我是true</p>
    <p v-show="show2">我是false</p>
</div>

<script>
   let app = new Vue({
      el:"#app",
      data:{
        show1:true,
        show2:false
      }
   });
</script>

我們用了兩個<p>標籤，都加上了 v-show 指令，取值分別為true和fasle。

渲染效果：

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

  <p style="display: none">我是false</p>

4. v-if 指令

v-if 指令的取值也是為true或false，它控制元素是否需要被渲染出來。

 <div id="app">
    <p v-if="if_1">我是true</p>
    <p v-if="if_2">我是true</p>
 </div>

 <script>
   let app = new Vue({
     el:"#app",
     data:{
        if_1:true,
        if_2:false
     }
   });
 </script>

渲染效果：

設定為true的 p 標籤，成功渲染出來，而設定為false的 p 標籤，直接被一行註釋代替了，並沒有被解析渲染出來。

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

記住一點：如果需要頻繁切換顯示/隱藏的，就用 v-show ；如果執行後不太可能切換顯示/隱藏的，就用 v-if 。

5. v-else 指令

if和else在程式語言一般都是結對出現的，在vue裡面也不例外。它沒有對應的值，但是要求前一個兄弟節點必須要使用 v-if 指令。

 <div id="app">
    <p v-if="if_1">我是if</p>
    <p v-else>我是else</p>
 </div>

 <script>
   let app = new Vue({
      el:"#app",
      data:{
        if_1:false
      }
   });
</script>

我們使用兩個 p 標籤，第一個使用 v-if 指令，並取值為false，第二個使用 v-esle 指令：

只有第二個 p 標籤被渲染出來，第一個 p 標籤由於 v-if 指令的值為false，直接被忽視了，不渲染。

同理，一旦第一個標籤的 v-if 指令的值為true，被忽視的就是第二個 p 標籤了。 v-if 和 v-else 只有一個會被渲染出來。

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，其中包含的值分別是陣列中的元素，表示我們解析渲染成功。

我們還可以拿到每個元素的索引：

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

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

效果圖：

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

v-bind 指令可以簡寫成一個冒號“：”

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

8. v-on 指令

v-on 指令相當於繫結事件的監聽器，繫結的事件觸發了，可以指定事件的處理函式.

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

我們通過 v-on 指令修飾click點選事件，指定事件響應後的處理函式為methods中的say( )方法。

點選按鈕，可以成功觸發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>

9. v-model 指令

這是一個最重要最常用的指令，一般用在表單輸入，它幫助我們輕易地實現表單控制元件和資料的雙向繫結。

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

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>