vue2知识点
2022-10-05 16:37:45 38 举报AI智能生成
vue2基础知识点总结
作者其他创作
大纲/内容
第十部分：组件的生命周期
生命周期 & 生命周期函数是什么
组件生命周期函数的分类
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>此时我们通过作用域插槽很容易拿到当前表格行的索引和内容，这样就可以很方便地进行编辑展示、删除的操作。
第十五部分：自定义指令
什么是自定义指令
自定义指令的分类
私有自定义指令
全局自定义指令
使用自定义指令
为自定义指令动态绑定参数值
update 函数
bind和update函数的简写
第十六部分：前端路由
前端路由的概念与原理
什么是路由
SPA 与前端路由
什么是前端路由
前端路由的工作方式
vue-router 的基本用法
什么是 vue-router
vue-router 安装和配置的步骤
在项目中安装 vue-router
创建路由模块（步骤一）
在入口文件中导入并挂载路由模块（步骤二）
声明路由链接和占位符（自定义也可行）（步骤三）
声明路由的匹配规则（步骤四）
声明路由链接（官方建议）（步骤五）
vue-router 的常见用法
路由重定向
嵌套路由
声明子路由链接和子路由占位符
通过 children 属性声明子路由规则
添加默认子路由
动态路由匹配
声明式导航 & 编程式导航
导航守卫
第十九部分：Vuex学习
Vuex概述
Vuex是什么
Vuex的基本使用
Vuex的核心概念
State
State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。
Mutation
Mutation用于变更Store中的数据。只能通过mutation更Store数据，不可以直接操作Store中的数据。<br>
Action
处理异步任务。如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。<br>
Getter
Getter用于对Store中的数据进行加工处理形成新的数据。它不会修改store中的原数，只会将数据进行包装
第一部分：vue简介<br>
什么是 vue
vue 的特性
MVVM
vue 的基本使用
第二部分：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的SPA项目
第七部分：vue-cli的基本使用<br>
什么是 vue-cli
安装和使用
vue项目中的层级结构
vue 项目的运行流程
第八部分：vite 的基本使用
vite是什么
创建 vite 的项目
vite项目的基本结构
vite 项目的运行流程
第九部分：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
0 条评论
下一页
