數據綁定
Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
執行結果：Hello Vue!
除了上面的綁定方式，還有另外一種：
<div id="app">
<span v-bind:title="message">
</span>
</div>
v-bind 特性被稱爲指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。
以上代碼也可以簡寫爲：
<div id="app">
<span :title="message">
</span>
</div>
對於html的綁定，還可以用到v-html：
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>test</h1>'
}
})
</script>
響應式
當你把一個普通的 JavaScript 對象傳入 Vue 實例作爲 data 選項，Vue 將遍歷此對象所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉爲 getter/setter。
這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 能夠追蹤依賴，在屬性被訪問和修改時通知變更。
每個組件實例都對應一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數據屬性記錄爲依賴。之後當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的組件重新渲染。
此外，我們也可以自定義watcher針對某一個data進行監控，當值改變時進行一些邏輯操作，後文我們會專門探討。
由於vue是響應式的，JavaScript中message值的變化會立即影響到UI中的內容。反過來，UI中message的變化也可以立即同步到JavaScript中的值，這就需要用到另一個綁定方式：v-model。
我們可以嘗試一個例子：
<div id="app">
<input type="input" v-model="message">
{{message}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'test'
}
})
</script>
執行結果（輸入框值改變時右側內容同步改變）：
