Vue.js 是一个基于 MVVM 模型的 web 库。通过双向数据绑定连接 View 和 Model 层。实际的 DOM 操作被封装成 Directives 和 Filters。

基本定义

每个 Vue 对象的实例是一个 ViewModel。创建方式：

其中 vue.$el 用于管理 View 层上的 DOM 。而 vue.$data 用于管理 Model 层的数据，可以通过 vue.$data.property 访问 Model 层数据，也可以直接 vue.property 访问。

Hello World 入门

从上面的例子可以看出：

• 模版替换使用的是 {{ variable }}
• Directives 格式是 v-xxx ，如上 v-repeat 。
• Filtrs 格式是 {{ variable | filter }} ，如上 uppercase

事件

在 DOM 节点上通过 v-on 绑定处理函数（可以是表达式）。函数的第一个参数是 DOM Event 对象，该对象附带 targetVM 指向 DOM 对应的 ViewModel。

自定义指令

内置的指令不够用怎么办？想自定义数据变化对 DOM 的影响怎么破？
Vue.js 允许自定义全局指令，格式：

同时，在指令函数中，提供了一些 this 上下文的公开属性（这里列举了几个常用的）：

• el : 访问绑定的 DOM 元素，提供 View 层访问。
• vm : 访问指令对应的上下文，ViewModel 对象，this.vm.$el = this.el
• expression : 指令绑定的表达式，不包括参数和 filter
• args : 参数

举个栗子。

自定义过滤器

Vue.js 允许使用全局函数 Vue.filter() 定义过滤器，将 Model 数据输出到 View 层之前进行数据转化。

双向过滤器允许 View 层数据（input 元素）变回写到 Model 层之前，进行转化，定义方式如下：

举个栗子：

总结

Vue.js 提供的核心是 MVVM 中的 VM，确保视图和数据的一致性。同时，借鉴了 Angular 中的 Directive 和 Filter 的概念，但是却简化了 API。