Vue.js是一个构建数据驱动的 web 界面的库，主要特点是响应的数据绑定和组合的视图组件，只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

Vue.png

双向绑定

我们通过很简单的JS对象绑定到Dom元素上，同时输入文本框的内容变化时候段落的内容也会发生变化:

<!-- 绑定内容 -->
<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的指令系统来实现数组的绑定:

<!-- 绑定列表 -->
<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' }
     ]
   }
 })

事件响应

页面中经常会响应用户的各种点击事件，下面可以通过Vue来实现一个简单的按钮点击事件：

<!-- 绑定输入 -->
<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>