#一、介绍
##1.1、vue.js是什么
一套构建用户界面的 渐进式框架、Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层。非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
响应的数据绑定和组合的视图组件。
##1.2、起步
##1.3、声明式渲染
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。源码查看示例1-3.html。
这样数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。打开你的浏览器的控制台，并修改 app.message，你将看到上例相应地更新。
除了绑定插入的文本内容，我们还可以采用这样的方式绑定 DOM 元素属性：源码查看示例1-3(2).html。
##1.4、条件与循环
控制切换一个元素的显示也相当简单：示例查看1-4(1).html
这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据。
Vue强大的过度效果
v-for 指令可以绑定数据到数组来渲染一个列表：示例1-4(2).html
在控制台里，输入 app.messages.push({text:'ember.js'})。你会发现列表中多了一栏新内容。
##1.5、处理用户输入
为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法。示例1-5.html
在这个过程中我们只需要关注基本逻辑，而不用进行一些DOM操作。
Vue 也提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。示例1-5(1).html。
##1.6、用组件构建（应用）
它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。
#二、Vue实例
##2.1、构造器
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的。
在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。
##2.2、属性与方法
每个 Vue 实例都会代理其 data 对象里所有的属性。实例2-2.html
##2.3、实例生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用。实例2-3.html
也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。
#三、模板语法
##3.1、插值
###3.1.1、文本
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。实例1.3.html。
###3.1.2、纯HTML
与上节的区别就是：这个可以输入正在的HTML。实例3.1.2.html
注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
###3.1.3、属性
Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令。实例3.1.3.html
###3.1.4、使用JavaScript表达式
在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。实例3.1.4.html。
##3.2、指令
指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
###3.2.1、参数
一些指令能接受一个“参数”，在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性。实例3.1.4.html
另一个例子是 v-on 指令，它用于监听 DOM 事件，对应的参数是是监听的事件名。实例3.1.3.html。
###3.2.2、修饰符
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
##3.3、Filters
###3.3.1、过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：实例3.3.1.html.
##3.4、缩写
###3.4.1、v-bind缩写
用冒号“:”表示
###3.4.2、v-on缩写
用“@”表示
#四、计算属性
##4.1、计算属性
前面我们也有讲过，在模板中可以绑定表达式。虽然这样是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。而且当我们需要不断用这种逻辑的时候就会不断使用同样的代码，不能达到重用的效果。
可以看到实例3.1.4.html，这样看起来模板就不是很清晰了。
这就是为什么任何复杂逻辑，你都应当使用计算属性。
###4.1.1、基础例子
实例4.1.1.html
可以对比3.1.4.html
###4.1.2、计算缓存 vs Methods
你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果。实例4.1.2.html
不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比而言，每当重新渲染的时候，method 调用总会执行函数。
我们为什么需要缓存？假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。
###4.1.3、计算属性 vs Watched Property
实例4.1.3.html与实例4.1.3(1).html
但是跟计算属性对比，就显得命令式和重复了。
###4.1.4、计算setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。实例4.1.4.html
###4.2、观察watchers
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
示例4.2.html
#五、Class 与 Style 绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
##5.1、绑定 HTML Class
###5.1.1、对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class 。
实例5-1-1.html
###5.1.2、数组语法
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表。
###5.1.3、用在组件上
当你在一个定制的组件上用到 class 属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。
##5.2、绑定内联样式
###5.2.1、对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）。
###5.2.2、数组语法
v-bind:style 的数组语法可以将多个样式对象应用到一个元素上
###5.2.3、自动添加前缀
当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
示例5-2.html
#六、条件渲染
##6.1、v-if
示例1-4(1).html
###6.1.1、 中 v-if 条件组
因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。
###6.1.2、v-else
v-else 元素必须紧跟在 v-if 元素或者 v-else-if的后面——否则它不能被识别。
示例6-1-2.html
###6.1.3、v-else-if
示例6-1-2.html
###6.1.4、使用 key 控制元素的可重用
Vue 尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 更快之外还可以得到一些好处。如下例，当允许用户在不同的登录方式之间切换
详情
##6.2、v-show
与v-if用法一样。不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。
注意 v-show 不支持 语法。
##6.3、v-if vs v-show
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
#七、列表渲染
##7.1、v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
###7.1.1、基本用法
示例1-4(2).html
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。
示例7-1-1.html
你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法。
###7.1.2、Template v-for
如同 v-if 模板，你也可以用带有 v-for 的 标签来渲染多个元素块。
###7.1.3、对象迭代 v-for
也可以用 v-for 通过一个对象的属性来迭代。
示例7-1-3.html
注意：在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
###7.1.4、整数迭代 v-for
v-for 也可以取整数。在这种情况下，它将重复多次模板。
示例7-1-4.html
###7.1.5、组件 和 v-for
在自定义组件里，你可以像任何普通元素一样用 v-for 。
一个简单的 todo list 完整的例子：示例7-1-5.html。
##7.2、key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值.
##7.3、数组更新检测
###7.3.1、变异方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push({ message: 'Baz' }) 。
###7.3.2、重塑数组
变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。
###7.3.3、注意事项
##7.4、显示过滤/排序结果
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。示例7-4(1).html
或者，你也可以在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 使用 method 方法。示例7-4(2).html
#八、事件处理器
##8.1、监听事件
可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。示例8-1.html
##8.2、方法事件处理器
许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。示例8-2.html
##8.3、内联处理器方法
除了直接绑定到一个方法，也可以用内联 JavaScript 语句。示例8-3.html
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法。示例8-1(1).html
##8.4、事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop .prevent .capture .self .once
##8.5、按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
##8.6、新增的修饰符
可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。
##8.7、为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离（separation of concern）传统理念。不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
1、扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2、因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3、当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
#九、表单控件绑定
##9.1、基础用法
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。
###9.1.1、文本
示例9-1-1.html
###9.1.2、多行文本
示例9-1-2.html
###9.1.3、复选框
示例9-1-3.html
示例9-1-3(1).html
###9.1.4、单选按钮
示例9-1-4.html
###9.1.5、选择列表
单选列表：示例9-1-5.html
多选列表（绑定到一个数组）：示例9-1-5(1).html
动态选项，用 v-for 渲染：示例9-1-5(2).html
##9.2、绑定value
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）
##9.3、修饰符
###9.3.1、.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
###9.3.2、.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
###9.3.3、.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
##9.4、v-model 与组件
HTML 内建的 input 类型有时不能满足你的需求。还好，Vue 的组件系统允许你创建一个具有自定义行为可复用的 input 类型，这些 input 类型甚至可以和 v-model 一起使用！