【Vue】Vue2官方文档学习指南--20230223

Vue2官方文档学习指南https://v2.cn.vuejs.org/v2/guide/：1代表只读，2代表了解，3代表熟悉。

基础

安装（1）（3）

Vue Devtools（3）
直接用 < script > 引入（3）
NPM（3）
命令行工具（3）
对不同构建版本的解释（1）
开发版本（1）
Bower（1）
AMD 模块加载器（1）

介绍（3）

Vue.js 是什么（3）
起步（3）
声明式渲染（3）
条件与循环（3）
处理用户输入（3）
组件化应用构建（3）

Vue 实例（3）

创建一个 Vue 实例（3）
数据与方法（3）
实例生命周期钩子（3）
生命周期图示（3）

模板语法（3）

插值（3）

• 文本
• 原始 HTML
• Attribute
• 使用 JavaScript 表达式

指令（3）

• 参数
• 动态参数
• 修饰符

缩写（3）

• v-bind 缩写
• v-on 缩写

计算属性和侦听器（3）

计算属性（3）

• 基础例子
• 计算属性缓存 vs 方法
• 计算属性 vs 侦听属性
• 计算属性的 setter

侦听器（3）

Class 与 Style 绑定（2）

绑定 HTML Class（2）

• 对象语法
• 数组语法
• 用在组件上

绑定内联样式（2）

• 对象语法
• 数组语法
• 自动添加前缀
• 多重值

条件渲染（3）

v-if（3）

• 在 < template > 元素上使用 v-if 条件渲染分组
• v-else
• v-else-if
• 用 key 管理可复用的元素

v-show（3）
v-if vs v-show
v-if 与 v-for 一起使用

列表渲染（3）

用 v-for 把一个数组对应为一组元素（3）
在 v-for 里使用对象（3）
维护状态（3）
数组更新检测（3）

• 变更方法
• 替换数组
• 注意事项

显示过滤/排序后的结果（3）
在 v-for 里使用范围值（3）
在 < template > 上使用 v-for（3）
v-for 与 v-if 一同使用（3）
在组件上使用 v-for（3）

事件处理（2）（3）

监听事件（3）
事件处理方法（3）
内联处理器中的方法（3）
事件修饰符（3）
按键修饰符（3）

• 按键码

系统修饰键（2）

• .exact 修饰符
• 鼠标按钮修饰符

为什么在 HTML 中监听事件？（2）

表单输入绑定（3）

基础用法（3）

• 文本
• 多行文本
• 复选框
• 单选按钮
• 选择框

值绑定（3）

• 复选框
• 单选按钮
• 选择框的选项

修饰符（3）

• .lazy
• .number
• .trim

在组件上使用 v-model（3）

组件基础（1）（2）（3）

基本示例（3）
组件的复用（3）

• data 必须是一个函数

组件的组织（3）
通过 Prop 向子组件传递数据（3）
单个根元素（3）
监听子组件事件（2）

• 使用事件抛出一个值
• 在组件上使用 v-model

通过插槽分发内容（3）
动态组件（3）
解析 DOM 模板时的注意事项（1）

深入了解组件

组件注册（1）（3）

组件名（3）

• 组件名大小写

全局注册（3）
局部注册（3）
模块系统

• 在模块系统中局部注册（3）
• 基础组件的自动化全局注册（1）

Prop（2）（3）

Prop 的大小写（2）
Prop 类型（3）
传递静态或动态 Prop（3）

• 传入一个数字
• 传入一个布尔值
• 传入一个数组
• 传入一个对象
• 传入一个对象的所有 property

单向数据流（2）
Prop 验证（2）

• 类型检查

非 Prop 的 Attribute（2）

• 替换/合并已有的 Attribute
• 禁用 Attribute 继承

自定义事件（2）

事件名（2）
自定义组件的 v-model（2）
将原生事件绑定到组件（2）
.sync 修饰符（2）

插槽（1）（2）（3）

插槽内容（3）
编译作用域（2）
后备内容（3）
具名插槽（3）
作用域插槽（2）

• 独占默认插槽的缩写语法
• 解构插槽 Prop

动态插槽名（2）
具名插槽的缩写（2）
其它示例（1）
废弃了的语法（2）

• 带有 slot attribute 的具名插槽
• 带有 slot-scope attribute 的作用域插槽

动态组件 & 异步组件（1）（3）

在动态组件上使用 keep-alive（3）
异步组件（1）

• 处理加载状态

处理边界情况

访问元素 & 组件（3）

• 访问根实例
• 访问父级组件实例
• 访问子组件实例或子元素
• 依赖注入

程序化的事件侦听器（2）

循环引用（1）

• 递归组件
• 组件之间的循环引用

模板定义的替代品（1）

• 内联模板
• X-Template

控制更新（1）

• 强制更新
• 通过 v-once 创建低开销的静态组件

过渡 & 动画

进入/离开 & 列表过渡

单元素/组件的过渡

• 过渡的类名（2）
• CSS 过渡（2）
• CSS 动画（2）
• 自定义过渡的类名（1）
• 同时使用过渡和动画（1）
• 显性的过渡持续时间（1）
• JavaScript 钩子（1）

初始渲染的过渡（1）
多个元素的过渡（1）
多个组件的过渡（1）
列表过渡（1）
可复用的过渡（1）
动态过渡（1）

状态过渡（1）

状态动画与侦听器
动态状态过渡
把过渡放到组件里
赋予设计以生命

可复用性 & 组合

混入

基础（2）
选项合并（2）
全局混入（2）
自定义选项合并策略（1）

自定义指令

简介（2）
钩子函数（2）
钩子函数参数（2）

• 动态指令参数

函数简写（1）
对象字面量（1）

渲染函数 & JSX

基础
节点、树以及虚拟 DOM
createElement 参数
使用 JavaScript 代替模板功能
JSX
函数式组件
模板编译

插件

使用插件（3）
开发插件（2）

过滤器（3）

过滤器

工具

单文件组件（2）（3）

介绍（3）

• 怎么看待关注点分离？

起步（2）

• 例子沙箱
• 针对刚接触 JavaScript 模块开发系统的用户
• 针对高级用户

测试（1）

TypeScript 支持（1）

生产环境部署（1）

规模化

路由（2）

官方路由（2）
从零开始简单的路由（2）
整合第三方路由（2）

状态管理（3）

类 Flux 状态管理的官方实现（3）
简单状态管理起步使用（3）

服务端渲染（1）

安全（1）

内在

深入响应式原理（3）

如何追踪变化
检测变化的注意事项

• 对于对象
• 对于数组

声明响应式 property
异步更新队列

迁移

迁移至 Vue 2.7（2）

移植回来的特性

• 关于被导出的 API 的注意事项
• 与 Vue 3 的行为差异

升级指南

• Vue CLI / webpack
• Vite
• Volar 兼容性
• 开发者工具支持

2.7 发布的后续

风格指南BETA

规则归类

优先级 A：必要的
优先级 B：强烈推荐
优先级 C：推荐
优先级 D：谨慎使用

优先级 A 的规则：必要的

组件名为多个单词
组件数据
Prop 定义
为 v-for 设置键值
避免 v-if 和 v-for 用在一起
为组件样式设置作用域
私有 property 名

优先级 B 的规则：强烈推荐

组件文件
单文件组件文件名的大小写
基础组件名
单例组件名
紧密耦合的组件名
组件名中的单词顺序
自闭合组件
模板中的组件名大小写
JS/JSX 中的组件名大小写
完整单词的组件名
Prop 名大小写
多个 attribute 的元素
模板中简单的表达式
简单的计算属性
带引号的 attribute 值
指令缩写

优先级 C 的规则：推荐

组件/实例的选项的顺序
元素 attribute 的顺序
组件/实例选项中的空行
单文件组件的顶级元素的顺序

优先级 D 的规则：谨慎使用

没有在 v-if/v-else-if/v-else 中使用 key
scoped 中的元素选择器
隐性的父子组件通信
非 Flux 的全局状态管理