Vue入门提要

小提示

• 文档三遍及以上阅读
• 难以理解的概念需要借助案例
• 手动敲 Demo 必不可少

难点解惑

1. 概念解惑

• 语法糖: 简化复杂的使用方式，提取出来较为简单的使用方式。总之，提供一种使用的捷径。
• 特性attr和属性prop: 文档中，特性不仅指 HTML 元素上的特性，也兼指自定义组件上没有被props声明的。

  export default {
    props: ['id']
  }

2. 文档解惑

基础

• class和style使用方式灵活，并且组件上这两个特性会合并根元素的特性而不是替换
• v-for 优先级高于 v-if，不仅可以绑定数组，也可以绑定对象
• 数组或对象的改变
  • 改变数组，$set和“数组七子”
  • 改变对象，$set和Object.assign
• v-model与表单元素的使用

深入组件

• 组件名命分为局部注册和全局注册，属性名命，事件名命
  • 单文件组件名命建议和单文件组件使用建议
  • 属性名命建议
  • 事件名建议，不存在大小写自动转换，推荐使用 kebab-case 事件名
• $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实现