Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue没有完全遵循MVVM格式，但Vue的设计无疑受到了它的启发。

Vue使数据和 DOM 被绑定在一起，所有的元素都是响应式的。当sage改变时，会引起DOM的重新渲染。

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

Vue实例，即vm会代理选项对象中data对象里的所有属性，已上面创建的实例为例：

在选项对象里，this表示构造器的实例，所以在methods对象中的方法也使用this.属性获取data里的属性：

此时data和userInfo是双向绑定的，二者有一方改变，对方都会改变。注意，userInfo一直存在在内存中。

就像你在写node程序时不能使用exports = function () {}导出模块一样，你不能像下面这样试图改变选项对象所绑定的data变量，因为这样完全破坏了data与vm的引用关系

既然vm.属性代理的是vm选项对象中的data对象中的属性，那么，我们想要访问诸如el，data等直接定义在选项对象里的属性怎么办呢？

Vue暴露了一些实例属性。如要访问诸如el，data这样的选项对象属性，则需在前面加上$，例如：

Vue还暴露了一些实例方法（不是methods里的方法），与实例属性相同，前面也加上$。比如监控元素改变的$watch方法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。

如果check的值是false，则disabled属性将不会被渲染。以v-开头的是Vue.js的指令，你马上就能看到如何使用它们。

可以在指令及{{}}中使用表达式，事实上，常量或变量的名称就是最简单的表达式。Vue可以通过是否带引号来判断一个表达式是一个变量还是一个常量字符串。所以在以后的内容里，指令及{{}}中的内容会被成为表达式。

上面的表达式都被支持。{{}}和指令中只支持一个表达式，不支持语句。如果想要使用语句，可以使用一会儿要讲到的过滤器以及计算属性。

注板表达式中试图访问用户定义的全局变量。意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图使用用户自定义的全局变量

Vue.js过滤器被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：

上面的例子使用了Vue.js内置的顾虑器，作用是使message的值首字母大写。Vue.js也允许你自定义过滤器：

过滤器可以串联，也可以接受参数。在接受参数时，第一个参数默认是前面返回的字符串，第二个参数开始是用户传递的参数，注意如果参数是字符串要加引号。

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。指令能够实现条件渲染，列表渲染，绑定属性等诸多功能。

v-on用于指定事件，而v-bind用于绑定属性，由于它们非常常见，所以Vue.js为它们提供看缩写的形式：

sayHello为事件触发的函数，函数写在选项对象的methods属性中。

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，置于指令参数的后面，=（如果存在）前面。用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用

计算属性在选项对象的computed对象中编写。该对象的属性名即为需要计算得到的属性名，值为一个匿名函数。但这并不意味着把这个匿名函数的值赋给该属性（上例中的reversedMessage），事实上，在渲染的时候，该匿名函数会被执行，然后将return的值赋给computed对象的属性。

你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果，与计算属性的区别在于计算属性是基于它的依赖缓存的。只有当其依赖的数据发生变化时才会重新计算取值。相比而言，每当重新渲染时，method调用总会执行函数。

Vue.js提供了$watch，当制定数据变化是其中的相关函数会被调用，也可以起到计算属性的效果。

二者区别在于计算属性将会在依赖的数据改变后立即发生变化，而watcher更适合处理异步的情况，直到我们得到最终结果时，才设置中间状态。

class和style都是属性，可以使用v-bind指令进行绑定，Vue.js加强了它们。表达式的结果除了可以是字符串外，还可以是数组或对象。

对象的属性是css属性名，值是表达式的返回值。当然推荐你把表达式对象抽离出来

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上，每个元素都是一个返回CSS对象的表达式。

vue.js把v-if指令的功能抽离出来，只用来判断DOM元素是否进行渲染。

可以使用v-else指令设置不满足条件的话将做什么，v-else必须紧跟v-if（或者后面提到的v-show），否则无法被识别。

子元素还好应付，如果有若干个同级元素需要根据条件进行判断是否渲染，则需要使用template

v-show是在会被渲染成DOM，若其后表达式的值为假，则会在渲染时加上style=display:none。由于其总是会被渲染，所以v-show可以被绑定到根结点上。同时,Vue.js规定v-show不能作用于template。显然，v-show更适合频繁切换的情况。

在 v-for 块中，我们拥有对父作用域及当前作用域属性的完全访问权限。

重新渲染一个单独的。