vue 写bean_简明 Vue.js 教程（2）

上一章我们已经使用 Vue.js 实现了简单的功能。现在再回过头来看看我们所写的代码究竟代表了什么。让我们回到第一个例子：

Brief Vue.js

{ { message }}

Vue.config.debug = true;

new Vue({

el: 'body',

data: {

message: 'Hello, world!'

}

});

前面已经提到，使用 jQuery 手工操作 DOM 时，我们需要告诉页面，应该如何组织各个组件，这样的代码是命令式的，通常会有很大的重复。Vue.js 的核心则是一个数据绑定系统，允许数据与 DOM 保持同步。Vue.js 使用数据驱动视图的概念。类似于 Flex，可以让我们在普通的 HTML 模板中使用特殊的语法，将 DOM “绑定”到底层数据。这就是 MVVM 模型：一旦创建了绑定，DOM 将与数据保持同步；每当修改了数据，DOM 会自动更新。如此一来，应用中的逻辑几乎都是针对底层数据进行操作，不必关心 DOM 如何更新。

每个Vue对象都会代理其data属性。其含义是，我们可以直接通过Vue对象存取原本定义在data中的数据。考虑下面的代码：

var vm = new Vue({

data: {

message: 'Hello, world!'

}

});

我们既可以使用data.message访问