一：双向数据绑定简介
Vue最核心的功能时双向数据绑定和组件模块化。
双向绑定：
- 当视图(View)的值发生改变时会自动更新model的值；
- 当model的值发生改变时会自动更新视图(View);
这里的视图View是指html中的标签元素，也就是DOM元素；这里的model就是指JavaScript中的对象，也就是用object{foo: bar}。
二：双向数据绑定JS实现
下面示例写了一个基本双向数据绑定的实现，打开控制台Console我们可以看到，当在input中输入值时也就是input的值发生改变时，input中的value值会自动赋值给user对象的username属性；当对象user的username属性的值发生改变时也会改变input标签的value值，即View也会跟着改变。
<html>
<head>
<title>双向数据绑定</title>
<script type="text/javascript">
// model
var user = {username: ''};
// 当view(DOM元素)发生了改变也会更改model的值
function viewChangeModel() {
// 更改model的值
var newValue = document.getElementById("view").value;
user.username = newValue;
console.log(newValue);
}
// 改变model的值会被监听监听到，然后更改view(DOM元素)
function modelChangeView() {
user.username = 'mengday';
}
// 监听器：监听属性的改变
// 当model发生改变时也会更新view
Object.defineProperty(user, 'username', {
set:function(value){
//此处拦截了设置请求
console.log('newValue=' + value);
document.getElementById("view").value = value;
}
});
</script>
</head>
<body>
Username <input id="view" type="text" name="username" oninput="viewChangeModel()"><br/>
<button onclick="modelChangeView()">user.username='mengday'</button>
</body>
</html>
三：双向数据绑定Vue实现
上面示例实现双向数据绑定需要额外写代码来实现，但是在Vue中这些功能就能轻易实现。Vue实现双向数据绑定是通过以下两个功能来实现的：
Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。
- DOM Listeners(DOM 监听器)：监听DOM元素(也就是html标签)的改变，当DOM发生改变时会自动更新model的值；
- Data Bindings(数据绑定)：当model的值发生改变时会自动更新DOM元素的展示；
Vue.js是一款轻量级的以数据驱动的前端JS框架，通过数据的改变来实现页面的更新与展示。与jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来。相比而言改变数据操作更加简单。
使用Vue演示双向数据绑定
关于使用Vue-cli来搭建项目请看Vue.js + element-ui 扫盲
HelloWorld.vue
<template>
<div>
Usernanme <input v-model="username"/> {{username}} <br/>
<button @click="changeModel">this.username='mengday'</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
username: ''
}
},
methods: {
changeModel() {
this.username = 'mengday'
}
}
}
</script>
在input中每输入一个字符username的值都会发生改变，通过点击按钮来触发username改变，可以看到input中展示也会跟着同步改变。
注意：示例代码中的template标签、@click、v-model、以及export default要导出的对象都是Vue中的内容。后面会介绍。
文本插值表达式 {{ key }}
上面示例中使用{{ key }}这种语法称之为文本插值表达式，key为data函数返回的对象属性名，文本插值表达式的作用是获取该属性对应的值作为普通文本。就是一种快捷获取data函数返回的对象的属性的值。
插值表达式内也可以做一些简单的计算，如 {{ count + 1}}、{{str.split(" ")}} 等等。