1.数据绑定与响应式更新
Hello Vue
我们从一个基本的输入框开始：
<input type="text" id="input">如果用 JavaScript 让输入框显示 你好，Vue 呢？实现如下：
<script>
var data = {
message: "你好，Vue"
};
document.querySelector('#input').value = data.message;
</script>代码说明：
定义一个
data对象；使用 js 提供的
querySelector方法，来选择id为input的元素，并对input元素的value进行赋值。
那么，这个例子用 Vue 来实现是怎样的呢？
// html
<input type="text" id="input" v-model="message">
// js
var data = {
message: "你好，Vue"
};
var vm = new Vue({
el: '#input',
data:data
})我们来详细说明下。
var vm = new Vue();首先，调用构造函数 Vue 创建一个新的 Vue 实例，命名为 vm；
el: '#input',Vue 的实例必须挂载到某个元素上，可以通过 el 属性来设置。在本例中，实例被挂在到了 input 元素上。
var data = {
message: "你好，Vue"
};
data:data我们定义另一个 data 对象，然后将其传给了 Vue 实例的 data 属性，该属性专门负责管理数据。这样，Vue 会全权代理 data 对象。比如，通过 vm.message 就可以访问 data 对象的 message 属性了。
<input type="text" id="input" v-model="message">最后，我们使用 Vue 提供的指令 v-model，该指令通常用于对表单控件的双向绑定。什么是双向绑定？接下来会介绍。
安装调试工具
在进一步学习 Vue 之前，首先来安装相应的调试工具：官方地址。
安装之后，要允许其访问文件网址：
这里与 Google Chrome 为例，安装好之后，右上角就会多出一个 Vue 的标记。如果你打开的是一个 Vue 页面，那么该图标就会点亮。
感受响应式更新
先来看看第一节例子，只做了稍微改动:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" id="input" v-model="message">
<p>{{ message }}</p>
</div>
<script>
let data = {
message: "你好，Vue"
};
var vm = new Vue({
el: '#root', // 绑定 id 为 root 的元素
data:data
})
</script>
</body>
</html>使用插值符号 {{ }} 为元素赋值，在这里，也可以使用 v-text 指定元素的 contentText:
<p v-text="message"></p>在浏览器中打开该例，打开 Chrome 的控制台，进行如下操作：点击 Root 元素，令其与 $vm0 绑定。点哪个节点，那个节点就会绑定 $vm0。
现在，我们可以使用 $vm0 在控制台中访问实例，我们马上来直观感受下什么是响应式更新：
可以看出：
输入框的值改变后，控制台中访问
message发现跟着变化；控制台中操作
message的值，输入框也实时跟着变化；
这就是响应式更新啦。需要注意的是 v-model 只能用于表单控件，不能用于 div、p 等其他元素。
附录：
