Vue.js sh使用基本的HTML模板語法。

差值

文字

“Mustache”

“Mustache”（{{}}）語法的文字差值是最常見的資料繫結形式。
例如：<span>Message: {{ msg }}</span>
“Mustache”標籤將會被替代為對應的資料物件上的msg屬性的值，只要所繫結的資料物件msg發生變化，所對應的標籤的內容也會隨之發生變化。``

v—once指令

通過使用v-once指令，可以只執行一次性改變的實現，當資料繫結的物件發生改變的時候，插值處的內容不會發生改變，注：但會影響到該節點其他資料的繫結：

<span v-once>這個將不會改變: {{ msg }}</span>
 

原始HTML

{{}} 雙大括號解釋為普通文字，而並不是HTML原始碼，假如要繫結的物件的屬性的內容是HTML標籤，則需要v—html指令

<div id="app">
     <p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
    </div>
        <script>
          var obj = {
      rawHtml: '<span style="color: red;">hello word！</span>'
    }
    new Vue({
      el: '#app',
      data: obj
    })
        </script>
    </body>
 

瀏覽器顯示

特性

Mustache不能作用在標籤的屬性上，應該使用v-bind指令：

<div v-bind:class="dynamicId"></div>

在屬性的值是布林型別的時候，並且他們的值是true，v-bind工作起來有所不同
例如：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果isButtonDisabled的值是null 、undefined、false，則disable特性甚至不會被包含在渲染出來的元素中。

使用JavaScript表示式

對於資料繫結，Vue.js提供了完全的JavaScript的表示式支援
例如：變數的加減乘除、三目運算、字串拆分、字串的拼接
`{{ number + 1 }}

{{ ok ? ‘YES’ : ‘NO’ }}

{{ message.split(’’).reverse().join(’’) }}

<div v-bind:id="'list-' + id"></div>

這些表示式會在所屬 Vue 例項的資料作用域下作為 JavaScript 被解析。有個限制就是，每個繫結都只能包含單個表示式，所以下面的例子都不會生效。

<!-- 這是語句，不是表示式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表示式 -->
{{ if (ok) { return message } }}

指令

指令（Directives）是帶有v-字首的特殊特性，

<div id="app">
     <p>Using mustaches: {{ seen }}</p>
<p v-if="seen">現在你看到我了</p>
    </div>
        <script>
          var obj = {
    seen:'true'
    }
    new Vue({
      el: '#app',
      data: obj
    })
        </script>

這裡，v-if 指令將根據表示式 seen 的值的真假來插入/移除

元素。

引數

一些指令能夠接受一個引數，在指令名稱之後以冒號表示，例如v-bind指令可以用響應式的更新HTML特性

<a v-bind:href="url">...</a>

在這裡href是v-bind的引數，也是a標籤的特性。將該元素的href特性與url的值進行繫結

縮寫

v-bind 縮寫

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

v-on 縮寫

<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對於特性名來說都是合法字元，在所有支援 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。縮寫語法是完全可選的，但隨著你更深入地瞭解它們的作用，你會慶幸擁有它們。