結合響應系統，在應用狀態改變時， Vue 能夠智慧地計算出重新渲染元件的最小代價並應用到 DOM 操作上。

文字
資料繫結最常見的形式就是使用 {{...}}（雙大括號）的文字插值：
文字插值
<div id="app">
  <p>{{ message }}</p>
</div>

Html
使用 v-html 指令用於輸出 html 程式碼：
v-html 指令
<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鳥教程</h1>'
  }
})
</script>

屬性
HTML 屬性中的值應使用 v-bind 指令。
以下例項判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
v-bind 指令
<div id="app">
  <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    directiva v-bind:class
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      class1: false
  }
});
</script>

表示式
Vue.js 都提供了完全的 JavaScript 表示式支援。
JavaScript 表示式
<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鳥教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

指令
指令是帶有 v- 字首的特殊屬性。
指令用於在表示式的值改變時，將某些行為應用到 DOM 上。如下例子：
例項
<div id="app">
    <p v-if="seen">現在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

這裡， v-if 指令將根據表示式 seen 的值(true 或 false )來決定是否插入 p 元素。

引數
引數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：
例項
<div id="app">
    <pre><a v-bind:href="url">菜鳥教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

在這裡 href 是引數，告知 v-bind 指令將該元素的 href 屬性與表示式 url 的值繫結。
另一個例子是 v-on 指令，它用於監聽 DOM 事件：
<a v-on:click="doSomething">
在這裡引數是監聽的事件名。

使用者輸入
在 input 輸入框中我們可以使用 v-model 指令來實現雙向資料繫結：
字串反轉
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

按鈕的事件我們可以使用 v-on 監聽事件，並對使用者的輸入進行響應。
以下例項在使用者點選按鈕後對字串進行反轉操作：
字串反轉
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反轉字串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

縮寫
v-bind 縮寫
Vue.js 為兩個最為常用的指令提供了特別的縮寫：
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>