Vue 2.0內部指令

這次帶給大家Vue 2.0內部指令，使用Vue 2.0內部指令的注意事項有哪些，以下就是實戰案例，一起來看一下。

1.Vue.js介紹

#         目前前端三大主流框架：Angular、React、Vue。 React前段時間由於許可證風波，使得Vue的熱度蹭蹭地上升。另外，Vue友善的API文件更是一大特色。 Vue.js是一個非常輕量級的工具，與其說是一個MVVM框架，不如說是一個js函式庫。 Vue.js具有響應式程式設計和元件化的特點。響應式編程，即保持狀態和視圖的同步，狀態也可以說是數據吧；而其組件化的理念與React則一樣，即“一切都是組件，組件化思想方便於模組化的開發，是前端領域的一大趨勢。

2.內部指令# 2-1.v-if v-else v-show：前兩者一般搭配使用，v-show的效果類似v-if。

實例如下：

  <p>
    </p><p>if</p>
    <p>else</p>
    <p>show</p>
  

<script>
  var vm= new Vue({
    el:"#app",
    data:{
      flag:true
    }
  });
</script>

DOM結構中，三個p標籤中的內容是否顯示在頁面中取決於flag的布林值屬性。當flag為true時，if和show都會顯示，else也不會存在於DOM結構中。 v-if和v-show的不同體現在：v-if是根據條件的值判斷是否加載，可以減輕伺服器的壓力，但是缺點是當改變條件的值，頁面又要加載一次；v-show則無論條件的值是否為true，都會載入（若條件為true，則

display

屬性設為其預設屬性，反之，設為none）

2-2.v-for 迴圈指令

實例如下：

  <p>
   </p><ol>
     <li>{{b}}</li>
   </ol>
  

<script>
  var vm= new Vue({
    el:"#app",
    data:{
     b:[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,1,2]
    }
  });
</script>

頁面會顯示5個li，插值的效果是li會顯示與

陣列

b一 一對應的元素，v-for有點類似for in迴圈

2-3  v-text v-html 文字（html

字串）指令

  <p>
   </p><p></p>
   <p></p>
  

<script> var vm= new Vue({ el:"#app", data:{ msgText:"China", msgHtml:"<span>中国" } }); </script> 可以聯想到jquery的text()、html()。到現在，你會發現前面都是利用插值操作，也就是{{}}，這種做法會在某種程度上影響效能。

2-4 v-on 綁定事件監聽器

# 實例如下：

  <p>
   <button>Button</button>
  </p>

<script>
  var vm= new Vue({
    el:"#app",
    methods:{
      Hi:function(){
        alert("Hello World!")
      }
    }
  });
</script>

同理，類比jquery的on()方法，綁定事件用的，實例中v-on:click可以簡寫為@click。 click可以替換成滑鼠的其他操作，如mouseout、mouseover等等。

2-5 v-bind指令

實例如下：

  <p>
    <a>{{message}}</a>
  </p>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

效果為a標籤顯示紅色，且其src屬性為vm.message。 v-bind指令主要用於設定

html標籤

的屬性，其簡寫形式為 v-bind：——>：#

2-6 v-model 資料雙向綁定指令

實例如下：

  <p>
    </p><p>{{message}}</p>
    <input>
  

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

當input輸入的值發生變化時，p標籤所包含的內容也會隨之變化，且與前者保持一致。

2-7 v-pre 指令 實例如下：

  <p>
    </p><p>{{message}}</p>
    <p>{{message}}</p>
  

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

第一個p標籤輸出“前端工程師”，而第二個p標籤則會跳過vue編譯，輸出原始值，即{{message}}。

2-8 v-cloak指令

     v-cloak指令的功能是當DOM樹建構好完成頁面的渲染後才執行，且其須要與css一起使用

2-9 v-once指令

    v-once指令的作用是只有當DOM樹第一次渲染時才起作用。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

#

以上是Vue 2.0內部指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！