小提示
- 文档三遍及以上阅读
- 难以理解的概念需要借助案例
- 手动敲 Demo 必不可少
难点解惑
- 概念解惑
-
语法糖: 简化复杂的使用方式，提取出来较为简单的使用方式。总之，提供一种使用的捷径。 -
特性attr和属性prop: 文档中，特性不仅指 HTML 元素上的特性，也兼指自定义组件上没有被props声明的。
<!-- todo 没有被声明为属性，视为特性，在 this.$attrs 中 -->
<my-comp :id="id" todo="hi"></my-comp>
export default {
props: ['id']
}
- 文档解惑
基础
-
class和style使用方式灵活，并且组件上这两个特性会合并根元素的特性而不是替换 -
v-for优先级高于v-if，不仅可以绑定数组，也可以绑定对象 - 数组或对象的改变
- 改变数组，
$set和“数组七子” - 改变对象，
$set和Object.assign
- 改变数组，
-
v-model与表单元素的使用
深入组件
- 组件名命分为局部注册和全局注册，属性名命，事件名命
-
$event在原生事件中和自定义事件中- 原生事件中，
@click=handler，该形式默认传参event。@click=handler('hi', $event)有附加参数，需要显示传递事件对象 - 自定义事件中
$event是第一个参数
- 原生事件中，
- 异步组件，动态组件
- 异步组件指，异步加载组件
- 动态组件指，使用
component内置组件和is特性切换展示组件
- 插槽，slot元素，slot特性，slot作用域和
slot-scope="slotProps" - 访问根实例
this.$root，访问父级组件实例this.$parent，访问子组件实例或子元素this.$refs
过渡和动画
- 动画出现的地方
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
- 状态过渡 --- 数字，颜色，元素大小等其它属性
可复用性和组合
-
extend和mixin的异同- 同: 参数均是一个包含组件选项的对象，使用相同的合并策略
- 异: 前者为扩展，产生新的组件类型；后者为混入，将某些选项注入到组件中
- 选项合并策略 --- 数据
data, directive, components, filters都以组件本身选项为重，但是生命周期混入选项在前，组件本身选项在后 -
template在内部解析，并调用render方法使用解析结果。因此，可以直接用render方法替代template选项。- 子vnode唯一性
- 没有便捷的指令和按键修饰符等，都需要用
js实现
