Vue.js官网教程梳理

Vue.js的官网教程很详细，这里做一个关键点梳理，方便查阅。

基础：

Vue实例：

1. 创建一个Vue实例
2. 只有当实例被创建时 data 中存在的属性才是响应式的
3. Vue实例自带有$开头的实例属性和方法
4. Vue还有生命周期钩子函数，就是生命周期各个阶段会执行的函数

模板语法：

1. Vue.js模板都是合法的html
2. 插值(把Vue实例中的值插入的html中) 这个值可以是文本 原始HTML 属性 JS表达式(不能是语句 不能是流程控制语句)
3. 指令(v-前缀的特殊属性) 参数(:号表示) 修饰符(.号表示)
4. 缩写 v-bind缩写: v-on缩写@ 因为这个符号也是合法的html属性名开头 所以可以

计算属性和侦听器：

1. 当一个值需要根据另一个值计算时，使用计算属性选项computed
2. 对比计算属性和方法：计算属性有缓存而方法没有
3. 对比计算属性和侦听属性选项watch，大多是情况下选用computed 如果要执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态则选watch
4. computed选项的方法默认是该属性的get方法 可以添加set方法

class属性和style属性绑定：

1. class属性可以有多个值 可以绑定到一个变量 然后拼接字符串，但是麻烦，因此针对:class绑定语法进行了强化
2. style属性也是一样的道理，可以绑定对象，数组，computed选项
3. v-bind:class和class不会起冲突，在组件上也可以正常使用
4. v-bind:style有针对不同浏览器添加相应样式前缀的功能

条件渲染：

1. 使用v-if v-else-if v-else 指令进行条件渲染
2. 条件渲染是指令 写在标签的属性位置 作用于标签的内容上。为了作用到标签上 可以在外层写一个template标签
3. v-if指令默认是会复用DOM元素的，使用key属性来取消复用
4. v-if和v-show的区别，各自的应用场景
5. v-if为什么不能和v-for一起使用(v-for优先级高，所以会把v-for的所有内容重新渲染一遍再v-if)

列表渲染：

1. v-for指令 把数组渲染成对应的一组元素 v-for="(item, index) in/of items"
2. 数组也可以改成对象，渲染的是对象的属性，v-for="(val, key, index) in obj"
3. 同样的v-for默认是就地复用的，为了不让它就地复用 使用v-bind:key绑定属性提供一个key值来取消
4. 由于JS的限制，数组更新和对象更新检测都有一定的限制，需要使用set,splice方法来修改才能响应式更新视图
5. v-for可以遍历整数，可以作用在temelate标签
6. 如果数据不想改动，而只改动视图，那么v-for的数据根据原始数据计算即可
7. v-for和组件配合使用 一定要使用v-bind:key属性，并且要为组件用v-bind绑定数据，才能在组件内使用遍历的值

事件处理：

1. v-on:click监听点击事件, v-on:click=" " 字符串里可以是表达式，方法名， 方法调用
2. 方法调用时，可以通过$event把事件传递到方法内部
3. 修饰符, 分为事件修饰符，按键修饰符，系统修饰键修饰符，鼠标按钮修饰符
4. 事件修饰符：.stop .prevent .capture .self .once .passive可串联，顺序重要
5. 按键修饰符：.KeyboardEvent.key暴露的任意有效键名转换成驼峰式
6. 系统修饰键修饰符：.ctrl .alt .shift .meta 只有当按下状态时才算激活 .exact精确匹配
7. 鼠标按钮修饰符：.left .right .middle

表单输入绑定：

1. v-model不仅仅可以双向绑定 input 还可以绑定 textarea, 单选框， 复选框， selected。
2. 对于选择框value绑定的都是静态字符串，可以使用v-bind:value 来把值和Vue实例的动态属性绑定到一起。
3. 修饰符，.lazy（分清楚input和change事件的区别）.number .trim
4. v-model可以和组件一起使用

组件基础：

1. 组件是可复用的 Vue 实例，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。学会怎么创建和使用组件。
2. 为什么组件的data必须是函数return 而不是直接写对象？
3. 组件的两种注册(创建)方式，全局注册，局部注册 详见后文
4. 使用组件时，需要给组件传递传递数据，通过props属性 详见后文
5. 子组件和父组件之间的交互怎么做？ 父组件可以监听子组件事件，子组件通过使用事件$event抛出值给父组件
6. v-model和自定义组件 详见后文
7. 5中讲了子组件给父组件传值 这里讲父组件给子组件传值 通过slot插槽 详见后文
8. 动态组件：不同组件之间的动态切换，可以通过绑定一个特殊的is属性 详见后文
9. 有些html标签有严格的嵌套关系，这是自定义组件的需要用特殊的is属性来解决这个问题

深入了解组件：

组件注册：

1. 组件名的命名规范，烤肉串命名法(短横线连接)，帕斯卡命名法(首字符全大写)
2. 全局注册和局部注册怎么写？全局注册的使用范围？局部注册的组件可以在哪里使用？
3. 局部注册的组件想要在其他子组件中使用，需要用到模块系统，具体怎么加载？
4. 基础组件在很多Vue根实例中都需要注册，使用局部注册就会很麻烦，如何自动化全局注册基础组件？

Prop：

1. 属性名的问题，驼峰命名法的props属性名，在html不能使用，要转换成烤肉串命名
2. props选项在指定属性的时候，可以指定属性名和类型，:连接 类型在后面 像sql的写法
3. 使用组件的时候，静态传值可以，动态传值加载v-bind:前缀即可，可以传数字，布尔值，数组，对象(传对象的简单写法)
4. 单向数据流，所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。如果子组件需要修改父级prop该怎么办？ 给出了两种做法
5. prop的验证，props选项在定义时，可以一同定义验证规则：类型，是否必须，默认值等，不符合控制太弹出信息。要清楚prop验证时间是在vue实例创建之前。
6. 在html中使用组件的时候，如果传递了非prop的属性(props选项中没有定义的属性)，那么这个属性会自动添加到组件的根元素上，这里要搞清楚什么是组件的根元素(template: 选项定义的模板最外层的标签)
7. 想要取消6中的根元素继承非属性，在组件中添加inheritAttrs: false取消继承，然后配合Vue实例的$attrs属性决定用户添加的属性分配到哪里

自定义事件：

1. v-model是语法糖 默认是v-bind:value="val" 和v-on:input="val=$event.target.value"。在对组件使用的使用呢 v-on:input="val = $event"。所以，需要知道如何获取组件templates模板传来的数据(使用$emit的第二个参数)
2. v-model 想要改变默认的绑定和事件 需要用到model选项，比如说如何让v-model在单选，复选中生效，绑定到checked和出发change事件
3. 自定义基础组件如果想要继承所有原生事件，该如何做？使用v-on=$listener 这里$listener是对象，这个写法是简写
4. 由于props的单向下行绑定，如果想要在父子组件中进行双向绑定，该怎么办？子组件使用$emit通知父组件要修改的意图，由父组件去修改即可。这里提供了语法糖.sync同步修饰符

插槽：

1. 插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的
2. 插槽的内容可以是 文字 html 和组件
3. 编译作用域，组件标签的属性值 在组件标签的内容中是不能用的
4. 默认内容就写在slot标签的内容部分 当组件标签没有提供内容的时候 默认内容就显示了
5. 具名插槽(具有名字的插槽)  记住写法 模板里给slot添加name属性(默认default) 然后在组件标签中 用template标签的v-slot属性+:参数对应内容
6. 作用域插槽 提供给组件的内容实在父级渲染的，所以模板里的slot标签是无法获取这些内容的。因此slot标签添加v-bind:绑定插槽属性，在组件标签中给具名插槽提供一个包含所有插槽属性的名字。
7. 动态插槽名[] 具名插槽的缩写=> "#插槽名"(为什么一定要具名呢？因为只有有参数的才能缩写和 v-bind， v-on一个道理)

动态组件和异步组件：

1. 动态组件 绑定is属性即可 这里主要介绍使用keep-alive标签复用组件完成缓存 保留组件状态
2. 异步组件就是讲通过一个工厂函数 异步加载组件，可以理解为按需加载

处理边界情况：

这里记录的都是和处理边界情况有关的功能，即一些需要对 Vue 的规则做一些小调整的特殊情况。不过注意这些功能都是有劣势或危险的场景的。我们会在每个案例中注明，所以当你使用每个功能的时候请稍加留意。

 

过渡和动画：

进入离开和列表过渡：

1. 使用transition给元素和组件添加进入，离开过渡的用法和条件。给出了过渡的执行原理。
2. 过渡可以用css过渡，css动画直接写css。还可以用第三方提供的css动画库，然后直接在transition上写class属性。还可以使用JS钩子(JS直接操作DOM的方式),这种方式也有第三方的动画库。
3. 同时使用过渡和动画怎么办？(type) 如何指定动画的持续事件(:duration)
4. 同样的做法可以添加初始渲染过渡，appear
5. 多个元素过渡，可以理解成元素间切换的过渡，默认同时进行，可以通过mode属性out-in/in-out指定顺序
6. 多个组件过渡，使用动态组件也就是is属性
7. 列表过渡，就是一组元素改变了，如何过渡。<transition-group> tag指定该标签编译成html的标签默认为span。
8. v-move可以使用SLIP简单那动画队列 实现平滑过渡(列表重拍后，其他元素不是瞬间移动到新位置)
9. 8中的方法是同时进行动画，想要按顺序交错进行动画，可以用JS执行动画，然后根据列表项的Index去延时执行
10. 怎么声明一个可复用的过渡？组件里用<transition>即可
11. 动态过渡(就是可以动态调整过渡动画的过渡)，用transition标签的name绑定动态值，那么name值变了，过渡动画就会改变。或者用JS去获取内容，根据该内容去动态的执行过渡

状态过渡：

1. 状态(指元素的自身的属性)，甚至数字，颜色，SVG的状态都可以用有过渡动画，需要借助tween.js库来完成状态的变化
2. 上述库可以对数据进行过渡，我们在加上对数据的监听，就可以把这个过渡显示出来
3. 状态的过渡，也可以是动态的，比如SVG的状态可以动态的去改变，再加上过渡动画，实现动态状态过渡
4. 为了完成过渡，可能会让Vue根实例看起来逻辑复杂，所以应该把状态过渡封装成组件，对Vue根实例隐藏复杂度。
5. 因为 SVG 的本质是数据，我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画，来制作你的欢迎页面、加载指示、以及更加带有情感的提示

 

可复用性和组合：

混入：

1. mixins选项，是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。感觉就像继承一样，new Vue+mixins选项 或者 Vue.extend()+minxins选项
2. 选项合并，对数据来说，组件覆盖混入对象的同名选项，对钩子函数来说，同名也不覆盖，混入对象先执行，组件后执行。
3. 混入对象可以进行全局混入，不过要慎用Vue.mixin
4. 以上的选项合并策略是默认的，可以自定义选项合并的策略

自定义指令:

1. 自定义指令也分为全局注册和局部注册 使用directive
2. 自定义指令绑定至元素到从元素解绑 这个过程是它的生命周期 有一系列钩子函数 bind->insertd->update->componentUpdate->unbind
3. 这些钩子函数的参数有el, binding, vnode, oldVnode。其中binding对象包含了指令的name, value等所有信息
4. 指令绑定多个值的时候，传入一个对象字面量

渲染函数和JSX:

1. 绝大多数情况下，template就够了，如果不够用，那么可以选择render渲染函数(更加底层，实际上模板会被编译成render来创建模板。
2. createElement创建虚拟节点，第一个参数是标签名字，第二个参数是标签的属性，内容，内容可以是其他虚拟节点。为什么叫虚拟节点呢？因为并不是实际创建了节点，而是描述了页面需要创建什么样的节点。
3. 如何给虚拟节点绑定属性？因为比template接近底层，所以很多在template中写个字符串解决的，这里不行，得写代码。
4. 如3所说，这些功能需要使用JS完成，比如说v-if/v-for命令,v-model命令等 事件和按键(提供了对应的按键修饰符) 插槽怎么实现？
5. 由于写render比较麻烦，所以支持了JSX语法 通过一个Babel插件映射为render
6. 函数式组件，标记组件为 functional，这意味它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)

插件：

1. 插件的使用，怎么引用插件
2. 插件的开发，开发插件的基本框架

过滤器：

1. 过滤器可以全局注册Vue.filter，也可以局部注册filter选项
2. 在{{ }} 胡子表达式和v-bind表达式中，使用过滤器是在表达式最后通过 管道 | 连接过滤器函数。表达式第一个值作为函数的第一个参数