技術標籤：vuevue

Vue基本指令

v-once

該指令表示元素和元件只渲染一次，當資料發生改變時，展示內容不會進行更新

<h1 v-once>{{message}}</h1>	

v-html

某些情況下，從伺服器請求到的資料本身就是一個HTML程式碼，可以使用該指令進行對程式碼的解析並渲染

<div id="app">
  <h1 v-html="url"></h1>
</div>

<script src="../js/vue.js"></
 
script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })

v-text

該指令和Mustache比較相似，用於將資料顯示在介面中

<h1 v-text="message"></h1>

v-pre

該指令將標籤內的內容不進行解析渲染，直接展示

<h1 v-pre>{{message}}</
 
h1>

v-cloak

當Vue例項初始化完成時，v-cloak屬性會自動從表標籤中刪除

<div id="app" v-cloak>{{message}}</div>

同時可設定一個style樣式，使其隱藏，這時如果js程式碼沒有執行完成時，頁面將不會顯示任何內容，可增強使用者體驗

<style>
  [v-cloak] {
      display: none;
  }
</style>

v-bind

該指令可以動態的繫結元素的一些屬性，其語法糖為：:

<a v-bind:href="url"
 
>百度一下</a>
<img v-bind:src="imageUrl" alt="圖片">
<!-- 語法糖 -->
<a :href="url">百度一下</a>
<img :src="imageUrl" alt="圖片">