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 的全局状态管理