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>
