02-模板、组件与交互

章节目标：围绕“02-模板、组件与交互”建立知识主干，能说清关键机制，并能用最小代码或真实案例验证结论。

学习要求

• 阅读时把“概念、适用场景、常见错误、验证方法”分别记下来。
• 带代码的内容至少运行一次，再主动修改一个条件观察结果。
• 学完后选择三个主题，不看原文向别人讲清楚。

完整目录（116 篇）

• Class和style属性
• class与style使用对象的区别
• vue中style的scope属性
• 对象语法
• 数组语法
• 用在自定义组件上
• 绑定内联样式
• Data
• Vue Computed 和 Watch 的区别及运用场景
• Vue 实例
• Vue 生命周期方法详解
• Vue 的父组件和子组件生命周期钩子函数执行顺序？
• 各配置项的执行顺序
• 异步的created
• 父子生命周期
• 组件 v-if 和 v-show 切换时生命周期钩子的执行
• Vue.js中，filter（过滤器）
• Vue中自定义组件的v-model总结
• keep-alive 的使用场景和原理
• nextTick 的作用和实现原理
• await nextTick()
• toRefs 的作用
• v-cloak 的作用和用法
• watchEffect
• 与自定义元素的关系
• passive的作用和原理
• exact 修饰符
• 为什么在 HTML 中监听事件？
• 事件修饰符
• 事件处理
• 按键修饰符
• 按键码
• 系统修饰键
• 鼠标按钮修饰符
• vm.$watch( expOrFn, callback, options )
• vue2中watch如何在页面渲染完成后执行
• 侦听器
• 侦听属性
• 列表渲染
• 在 v-for 里使用对象
• 同时使用 v-if 和 v-for
• 声明式渲染
• 指令
• v-if 与 v-for 一起使用
• v-if-else if-esle
• v-show
• 条件渲染
• 用 key 管理可复用的元素
• 用 () = ({ ...props })
• 组件化
• v-model双向绑定的原理
• 与自定义元素的关系
• 使用组件
• 自定义指令
• 表单双向绑定
• 表单输入绑定
• 使用方式
• 计算属性 1
• 计算属性
• 返回函数计算属性原理
• 需要返回函数的计算属性
• 模板语法
• 选项对象属性
• 配置
• ，unref
• 自动解包
• 将scss样式抽离成单独文件
• 处理边界情况
• 如何展示换行数据
• 自定义介绍
• 作用域插槽
• 作用域插槽的应用
• 组件标签使用v-slotdefault指定插槽属性
• 解构插槽 Prop
• 具名插槽
• 具名插槽的缩写
• 动态插槽名
• 废弃了的语法
• 插槽
• 插槽内容
• 插槽默认值
• 编译作用域
• v-deep
• 有作用域的css
• 理解Vue中的v-cloak
• Prop 命名方式 (camelCase vs kebab-case)
• Prop 验证
• 传入组件未定义在props中的 Attribute
• 单向数据流
• 声明组件可接受的属性
• 替换-合并已有的 Attribute
• 禁用 Attribute 继承
• 给组件传递属性的方式
• generic泛型组件
• vue2的配置项 functional
• component
• keep-alive
• 动态组件 & 异步组件
• 命名
• 对props的双向绑定
• 异步组件
• 注册
• 动态组件
• 组件基础
• $listener
• Vue 3 子父组件事件命名最佳实践表
• Vue3 事件名匹配流程图
• Vue3 事件命名团队规范模板
• focus 和 blur的透明化处理
• sync 修饰符
• 将原生事件绑定到组件
• 深入理解v-model之自定义组件用法（vue3和vue2对比分析）
• 自定义事件
• 自定义指令传参
• transition-group
• transition