Vue.js学习笔记（参考官网）
起步：
兼容性：
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
双向绑定：
渲染列表：
概述
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
ue.js 自身不是一个全能框架——它只聚焦于视图层。在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
响应的数据绑定
Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。Vue.js 拥抱数据驱动的视图概 念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。
Vue实例
构造器：一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名。
在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。
可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器：
所有的 Vue.js 组件其实都是被扩展的 Vue 实例。
属性与方法：
实例生命周期：
Vue 实例在创建时有一系列初始化步骤——例如，它需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。例如 created 钩子在实例创建后调用：
生命周期图示:
数据绑定语法：
Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。
绑定表达式：过滤器：
指令:
指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。
参数：v-bind 指令用于响应地更新 HTML 特性：
这里 href 是参数，它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
缩写：
v-bind:
v-on缩写：
计算属性：
在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。如果需要多于一个表达式的逻辑，应当使用计算属性。
计算属性 vs $watch（貌似差不多）
计算setter：
Class与style绑定
绑定html Class:
对象语法：
我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：
数组语法：
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
绑定内联样式：
对象语法/数组语法
条件渲染：
v-if：如果条件为true元素显示
v-show：
和v-if相似，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display。
v-if VS v-show
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
列表渲染：
v-for：可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名：
在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引。
数组变动检测：
变异方法：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组：
filter()
concat()
slice()
对象v-for：
也可以使用 v-for 遍历对象。除了 $index 之外，作用域内还可以访问另外一个特殊变量 $key。
方法与事件处理器:
方法处理器：跳过。。
内联语句处理器：
事件修饰符：
键盘事件：。。。
表单控件绑定
基本用法：
可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。
Text。。。
Mutiline text。。。。
Checkbox。。。
Radio。。。
Select。。。
过渡：
。。。。。。
组件：
注册：
之前说过，我们可以用 Vue.extend() 创建一个组件构造器：
要把这个构造器用作组件，需要用 Vue.component(tag, constructor) 注册 ：
注册语法糖：
为了让事件更简单，可以直接传入选项对象而不是构造器给 Vue.component() 和 component 选项。Vue.js 在背后自动调用 Vue.extend()：
组件选项问题：
Props：
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。
动态Props：
父子组件通信：
子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children，包含它所有的子元素。
尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：
-
这让父组件与子组件紧密地耦合；
-
只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。
自定义事件：
Vue 实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生 DOM 事件，用法也不同。
每个 Vue 实例都是一个事件触发器：
-
使用
$on()监听事件； -
使用
$emit()在它上面触发事件； -
使用
$dispatch()派发事件，事件沿着父链冒泡； -
使用
$broadcast()广播事件，事件向下传导给所有的后代。
不同于 DOM 事件，Vue 事件在冒泡过程中第一次触发回调之后自动停止冒泡，除非回调明确返回 true。
子组建索引：
尽管有 props 和 events，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 v-ref 为子组件指定一个索引 ID。例如：
v-ref 和 v-for 一起用时，ref 是一个数组或对象，包含相应的子组件。
使用Slot分发内容：
。。。
