Vue 2.0內部指令

php中世界最好的语言原創: 2018-04-17 14:39:561456瀏覽

這次帶給大家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。

實例如下：

<body>
  <p id="app">
    <p v-if="flag">if</p>
    <p v-else>else</p>
    <p v-show="flag">show</p>
  </p>
</body>
<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 迴圈指令

實例如下：

<body>
  <p id="app">
   <ol>
     <li v-for="b in b">{{b}}</li>
   </ol>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     b:['a','b','c',1,2]
    }
  });
</script>

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

陣列

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

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

字串）指令

<body>
  <p id="app">
   <p v-text="msgText"></p>
   <p v-html="msgHtml"></p>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     msgText:"China",
     msgHtml:"<span>中国</span>"
    }
  });
</script>

可以聯想到jquery的text()、html()。到現在，你會發現前面都是利用插值操作，也就是{{}}，這種做法會在某種程度上影響效能。

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

# 實例如下：

<body>
  <p id="app">
   <button v-on:click="Hi()">Button</button>
  </p>
</body>
<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指令

實例如下：

<body>
  <p id="app">
    <a v-bind:style="{color:&#39;red&#39;}" :src="message">{{message}}</a>
  </p>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

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

html標籤

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

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

實例如下：

<body>
  <p id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message">
  </p>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

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

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

<body>
  <p id="app">
    <p>{{message}}</p>
    <p v-pre>{{message}}</p>
  </p>
</body>
<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中文網其它相關文章！