Vue.js使用了基于HTML的模板語法，允許開發者聲明式的將DOM綁定至底層Vue實例的數據。

插值

1. 文本：{{ }}
   數據綁定最常見的形式就是使用Mustache語法（雙大括號）的文本插值，解釋為普通文本：

<span>Message:{{ msg }}</span>

Mustache標簽將會被替代為msg屬性的值，無論何時，綁定的數據對象msg屬性發生了變化，插值處的內容都會更新（使用v-once指令，可以執行一次性的插值，當msg的內容發生改變時插值處的內容不會發生改變，如下：）。

//這個在msg的值發生變化時將不會改變
<span v-once>Message:{{ msg }}</span>

2. 原始HTML：v-html
   雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出 HTML，需要使用v-html指令：

<div v-html="rawHtml"></div>

這個 div 的內容將會被替換成為屬性值 rawHtml，直接作為 HTML——會忽略解析屬性值中的數據綁定。

3. 特性：v-bind
   Mustache 語法不能作用在HTML特性（即屬性）上，應該使用v-bind指令：

<div v-bind:id="dynamicId"></div>
<a v-bind:href="url"></a>
![](imageSrc)

new Vue({
  el:'.box',
  data:{
    url:'http:...'
  }
})

4. 使用javaScript表達式
   Vue.js不僅可以綁定簡單的屬性鍵值，而且對于所有的數據綁定，都提供了完全的javaScript表達式支持，如下：

{{ number+1 }}
{{ ok ? 'Yes' : 'No' }}
{{ message.split('')reverse().join('') }}
<div v-bind:id=" 'list-'+id "></div>

但每個綁定都只能包含單個表達式，下面的不會生效：

{{ var a=1 }}  //這是語句，不是表達式
//控制流也不會生效，可使用三元表達式
{{ if(ok) {return message }  }}