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 传递数据。另外，在子组件中修改父组件的状态是很是糟糕的作法，由于：

1. 这让父组件与子组件紧密地耦合；

2. 只看父组件，很难理解父组件的状态。由于它可能被任意子组件修改！理想状况下，只有组件本身能修改它的状态。

自定义事件：

Vue 实例实现了一个自定义事件接口，用于在组件树中通讯。这个事件系统独立于原生 DOM 事件，用法也不一样。

每一个 Vue 实例都是一个事件触发器：

• 使用 $on() 监听事件；

• 使用 $emit() 在它上面触发事件；

• 使用 $dispatch() 派发事件，事件沿着父链冒泡；

• 使用 $broadcast() 广播事件，事件向下传导给全部的后代。

不一样于 DOM 事件，Vue 事件在冒泡过程当中第一次触发回调以后自动中止冒泡，除非回调明确返回 true。

 

 子组建索引：

 尽管有 props 和 events，可是有时仍然须要在 JavaScript 中直接访问子组件。为此可使用 v-ref 为子组件指定一个索引 ID。例如：

v-ref 和 v-for 一块儿用时，ref 是一个数组或对象，包含相应的子组件。

 

使用Slot分发内容：

。。。