绑定数据
一个 Vue 的实例对应一个 element，数据通绑定的方式，在 element 中通过 {{变量名}} 获取数据，在 Vue 实例的 data 属性定义数据。
<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: { message: 'Hello Vue.js!' }
})
操作数据
在 element 的 input 标签绑定数据，即可将变动传递给 Vue 实例。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: { message: 'Hello Vue.js!' }
})
通过指定 input 标签的 v-model 属性，input 标签值发生变化会立即响应到 Vue 实例的 data 属性的对应数据，Vue 有许多预定义属性如 v-for、v-on:click 等，各实现不同的功能。
Vue 实例里的 data 是绑定数据的属性，还有其他的属性如 methods，对应 button 标签的 v-on:click 属性，在 method 属性的方法中，可以用 this 访问或操作 data 属性的数据。
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: '#app',
data: { message: 'Hello Vue.js!' },
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
总结
对于 html 标签，即 View 层，需要由 Vue 预定义的属性来绑定数据、回调方法，使用 {{}} 获取数据。
上面定义的 html 操作要生效，需要创建一个 Vue 实例，并通过 el 属性绑定，否则那段 html 代码......就是普通的 html 代码。
对比 React 有些复杂，许多新的概念需要学习，但学起来还是挺简单的。
