一、什麼是指令？

在 vue 中，指令以 v- 開頭，是一種特殊的自定義行間屬性。指令屬性的預期值是一個表示式，指令的職責就是：表示式的值改變時，相應地將某些行為應用到DOM上。只有v-for是一個類外，後邊跟的不是表示式。

一個指令能夠接收一個引數，在指令名稱之後以冒號表示。例如：

  1. <a v-bind:href="url">vue官網</a>

新增指令後，url 會被當作變數來解析。

二、常用指令

2.1、v-model 雙向繫結資料

v-model 指令可以用在 input、textarea、select元素上建立雙向資料繫結。他會根據控制元件型別自動選取正確的方法來更新元素。

使用語法：<input type="text" v-model="msg"/>

  1. <!-- 修改input中的值，標籤p元素內容隨之改變 -->
  2. <input v-model="content"/><p>{{ content }}</p>
  3.  
  4. data () {
  5.  return {
  6.   content: '我是雙向資料繫結，可以有預設值',
  7.  }
  8. }

2.2、v-for 列表渲染

作用：藉助 v-for 把一個數據渲染成一個列表。

使用語法：<li v-for="item in list"></li>

其中 list 是源資料陣列，item是被迭代的陣列元素的別名。

  1. <!-- 使用例項 -->
  2. <ul>
  3.  <li v-for="item in list" :key="item.id">{{item.girl}}</li>
  4. </ul>
  5.  
  6. data(){
  7.  return{
  8.   list:[
  9.    { id:'1' , girl:'花花'},
  10.    { id:'2' , girl:'草草'}
  11.   ]
  12.  }
  13. })

2.3、v-bind 動態繫結屬性

作用：用來動態繫結屬性，屬性值有變動的時候及時對頁面資料或樣式等保持最新狀態。

使用語法：

  1. <div v-bind:attribute = " 變數 "></div>

    <!-- 更改 url 圖片地址，網頁內圖片也會實時更新 -->
  2. <img v-bind:src="url" alt="">
  3.  
  4. data () {
  5.  return {
  6.   url:'http://picture.ik123.com/uploads/allimg/161223/4-161223163338.jpg'
  7.  }
  8. }

2.4、v-on 繫結事件

作用：給元素繫結事件監聽，觸發事件後，執行 methods 裡面對應函式。可以縮寫為@。

使用語法：

  1. <div v-on:click="fun"></div> 
    //或 
    <div @click="fun"></div>
  2.  
  3. <!-- 點選按鈕，偵錯程式會打印出vue -->
  4. <button @click="print">點選,列印vue</button>
  5.  
  6. methods:{
  7.  print(){
  8.   console.log('vue')
  9.  }
  10. }

注意：上述 v-on 使用的時候沒有傳參，所以方法後的小括號可以省略。

v-on 傳參時，必須新增括號，使用如下。

  1. <!-- 點選按鈕，偵錯程式會打印出vue -->
  2. <button v-for="item in list" @click="print(item)">點選{{item}}</button>
  3.  
  4. data () {
  5.  return {
  6.   list:[ 'one', 'two', 'three' ]
  7.  }
  8. },
  9. methods:{
  10.  print(item){
  11.   console.log('點選',item)
  12.  }
  13. }

這是一個遍歷的按鈕組，點選的時候，列印當前元素內容。

2.5、v-if / v-else-if / v-else

作用：根據邏輯判斷，控制元素的顯示和隱藏。

使用語法：<div v-if=" boolean|表示式 " ></div>

注意：v-if / v-else-if / v-else 使用語法都是相同的，但是v-else-if 和 v-else 必須與v-if連用，不能單獨使用。

  1. <!-- 修改show的值，元素內容也會改變 -->
  2. <div >
  3.  <span v-if="show">真</span>
  4.  <span v-else>假</span>
  5. </div>
  6.  
  7. data () {
  8.  return {
  9.   show:true,
  10.  }
  11. }

2.6、v-show / v-hide

作用：控制元素的顯示和隱藏。

使用語法：

  1. <div v-show=" boolean|表示式 " ></div> //表示式為真的時候顯示
  2. <div v-hide=" boolean|表示式 " ></div> //表示式為真的時候隱藏
  3. <div >
  4.  <span v-show="show">真</span>
  5.  <span v-hide="show">假</span>
  6. </div>
  7.  
  8. data () {
  9.  return {
  10.   show:true,
  11.  }
  12. }

2.7、v-html 解析html標籤

2.8、v-once 進入頁面時 只渲染一次 不再進行渲染

2.9、v-cloak 防止閃爍

2.10、v-pre 把標籤內部的元素原位輸出

2.11、v-text 解析文字

三、v-if 與 v-show 的區別

相同點：都是控制元素的隱藏顯示的。

區別：

  • v-if 是條件渲染，滿足條件時，節點元素都會被渲染出來，包括事件繫結等，如果不滿足條件，節點就不會被渲染出來，包括事件等。但 v-show 是藉助 display:none 隱藏節點的顯示，它的內容還有事件等始終都存在。
  • v-if 來回切換時，瀏覽器需要不停地渲染，損耗效能，所以成本很高。但是 v-show 只是隱藏顯示，所以成本較低。
  • v-show 在頁面初始化的時候，需要全部渲染，相對 v-if 成本要高。
  • 根據 v-if 的特性，適合用於加快初始化的渲染速度。而 v-show 適合用於頻繁切換的場景。