vue聲明式渲染

Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

     已經生成了第一個 Vue 應用！看起來這跟單單渲染一個字符串模板非常類似，但是 Vue.js 在背后做了大量工作。現在數據和 DOM 已經被綁定在一起，所有的元素都是響應式的。我們如何知道？打開你的瀏覽器的控制台，並修改 app.message，你將看到上例相應地更新。

    除了綁定插入的文本內容，我們還可以采用這樣的方式綁定 DOM 元素屬性：

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date()
  }
})

     你看到的 v-bind 屬性被稱為指令。指令帶有前綴 v-，以表示它們是 Vue.js 提供的特殊屬性。可能你已經猜到了，它們會在渲染過的 DOM 上應用特殊的響應式行為。這個指令的簡單含義是說：將這個元素節點的 title 屬性和 Vue 實例的 message 屬性綁定到一起。

    你再次打開瀏覽器的控制台輸入 app2.message = 'some new message'，你就會再一次看到這個綁定了title屬性的HTML已經進行了更新。