Vue.js是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的庫，主要特點是響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件，只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。在與相關(guān)工具和支持庫一起使用時，Vue.js 也能完美地驅(qū)動復(fù)雜的單頁應(yīng)用。

Vue.js 的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它讓數(shù)據(jù)與 DOM 保持同步非常簡單。在使用 jQuery 手工操作 DOM 時，我們的代碼常常是命令式的、重復(fù)的與易錯的。Vue.js 擁抱數(shù)據(jù)驅(qū)動的視圖概念。通俗地講，它意味著我們在普通 HTML 模板中使用特殊的語法將 DOM “綁定”到底層數(shù)據(jù)。一旦創(chuàng)建了綁定，DOM 將與數(shù)據(jù)保持同步。每當修改了數(shù)據(jù)，DOM 便相應(yīng)地更新。這樣我們應(yīng)用中的邏輯就幾乎都是直接修改數(shù)據(jù)了，不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護。

Vue.png

雙向綁定

我們通過很簡單的JS對象綁定到Dom元素上，同時輸入文本框的內(nèi)容變化時候段落的內(nèi)容也會發(fā)生變化:

<!-- 綁定內(nèi)容 -->
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
    <script type="text/javascript">
new Vue({
  el: '#app',
  data: {
    message: 'Hello FlyElephant'
  }
})
</script>

綁定列表

我們除了綁定一對一的元素之外還可以通過Vue.js的指令系統(tǒng)來實現(xiàn)數(shù)組的綁定:

<!-- 綁定列表 -->
<div id="applist">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
<script type="text/javascript">
  new Vue({
    el: '#applist',
    data: {
     todos: [
      { text: '簡書' },
      { text: 'FlyElephant },
      { text: 'keso' }
     ]
   }
 })

事件響應(yīng)

頁面中經(jīng)常會響應(yīng)用戶的各種點擊事件，下面可以通過Vue來實現(xiàn)一個簡單的按鈕點擊事件：

<!-- 綁定輸入 -->
<div id="appinput">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script type="text/javascript">
    new Vue({
  el: '#appinput',
  data: {
    message: 'Hello FlyElephant'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>