Vue入門教程 第二篇 （數據綁定與響應式）

數據綁定

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>

執行結果（輸入框值改變時右側內容同步改變）：