第十部分:组件的生命周期
生命周期 & 生命周期函数是什么
组件生命周期函数的分类
created 生命周期函数
mounted生命周期函数
updated生命周期函数
第十一部分:组件之间的数据共享
组件之间的关系
父子组件之间的数据共享
子组件向父组件共享数据
使用自定义事件
在vue3中的子传父数据共享,必须事先在子组件emits节点中声明自定义事件名称,而vue2中不需要声明
兄弟组件之间的数据共享
兄弟组件之间数据共享的方案是 EventBus
第十二部分:ref引用
什么是 ref 引用
使用 ref 引用 DOM 元素
使用 ref 引用组件实例
控制文本框和按钮的按需切换
让文本框自动获得焦点
this.$nextTick(cb) 方法
第十三部分:动态组件
什么是动态组件
如何实现动态组件渲染
使用 keep-alive 保持状态
keep-alive 对应的生命周期函数
keep-alive 的 include 属性
第十四部分:插槽
什么是插槽
默认插槽
①在封装子组件期间,如果封装的子组件中有一部分`对应的标签或内容暂时不确定`,就可以在`子组件相对应的内容节点中,声明—个<slot> </slot>插槽占 位符<br>②用户在`父组件上使用封装完成的子组件期间`,就可以在子组件的内容节点中`,来指定想要添加的`便签或内容,它们就会被渲染到插槽所在的位置<br>
没有预留插槽的内容会被丢弃
后备内容
作用域插槽
作用域插槽
在使用elementUI组件库的表格组件时,表格的编辑和删除操作要用到作用域插槽。因为一个表格组件,就是当前组件的子组件。<br><br>此时我们通过作用域插槽很容易拿到当前表格行的索引和内容,这样就可以很方便地进行编辑展示、删除的操作。
第十六部分:前端路由
前端路由的概念与原理
什么是路由
SPA 与前端路由
什么是前端路由
前端路由的工作方式
vue-router 的基本用法
什么是 vue-router
vue-router 安装和配置的步骤
在项目中安装 vue-router
创建路由模块(步骤一)
在入口文件中导入并挂载路由模块(步骤二)
声明路由链接和占位符(自定义也可行)(步骤三)
声明路由的匹配规则(步骤四)
声明路由链接(官方建议)(步骤五)
vue-router 的常见用法
路由重定向
嵌套路由
声明子路由链接和子路由占位符
通过 children 属性声明子路由规则
添加默认子路由
动态路由匹配
声明式导航 & 编程式导航
导航守卫
第二部分:vue 的指令
内容渲染指令
①v-text ② {{ }} ③ v-html
属性绑定指令
v-bind属性绑定指令
属性绑定指令的简写形式
事件绑定指令
v-on 事件绑定指令
事件绑定的简写形式
事件参数对象
绑定事件并传参
$event
事件修饰符
按键修饰符
双向绑定指令
v-model双向数据绑定指令
v-model 指令的修饰符
条件渲染指令
① v-if ②v-else-if ③v-else<br>
v-show
v-if 和 v-show 的区别
列表渲染指令
v-for 列表渲染指令
v-for 中的索引
使用 key 维护列表的状态
第四部分:监听器
什么是 watch 侦听器
使用 watch 检测用户名是否可用
immediate 选项
deep 选项
监听对象单个属性的变化
第九部分:vue 组件
什么是组件化开发
vue 中的组件化开发
vue 组件的组成部分
template
script
style
项目运行与打包
组件之间的父子关系
父子组件<br>
兄弟组件<br>
私有组件与全局组件<br>
私有组件使用方法<br>
全局组件使用方法<br>
组件的 props
什么是组件的 props
props的作用
props的好处
props使用案例
props的基本使用步骤
无法使用未声明的 props
props的命名(了解)
props 是只读的
动态绑定 props 的值
props 的 default 默认值
props的type值类型
props 的 required 必填项
自定义验证函数
组件之间的样式冲突问题
概述
如何解决组件样式冲突的问题
style 节点的 scoped 属性
/deep/ 样式穿透
Class 与 Style 绑定
动态绑定 HTML 的 class
可以通过三元表达式,动态的为元素绑定 class 的类名。
以数组语法绑定 HTML 的 class
以对象语法绑定 HTML 的 class
以对象语法绑定内联的 style