vue学习路线整理
2022-12-23 11:16:50 25 举报AI智能生成
主要记录学习Vue的学习路径
作者其他创作
大纲/内容
Vue.js
Vue基础语法
MVVM
moustache语法
选项式&组合式
选项式
data
methods
组合式
setup语法糖
setup
ref
ref一般用来定义基本类型数据,如果想要改变它的值,必须使用value
reactive、toRef、toRefs
reactive一般用来定义引用数据类型
computed
是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新
watch
watch监听ref定义的变量
watch默认浅层次监听,监听reactive定义的响应式数据的全部属性,强制开启深度监听(deep设置无效),并且无法获取正确的oldValue
watch立即监听
immediate
component
组件基本使用
创建、引入、（注册）/使用、
全局组件与局部组件
全局：AppNew.component("组件名","组件");
组件间通信
父传子
props/defineProps
type
required
default
子传父
$emit/defineEmits
defineExpose
祖传孙
defineExpose/ref属性
provide/inject
兄弟组件
pinia
动态组件<component is=""></component>
keep-alive
指令
v-cloak
v-html
可以将string的html解析出来并且进行渲染
v-text
都是用于将数据显示在界面中,它只接受一个string类型
v-show
v-show会给元素添加一个属性,display:none
v-if
当条件为false时,包含v-if指令的元素,不会出现在dom中
v-else
v-else-if
v-pre
用于显示原本的Mustache语法
v-once
该指令后面不需要跟任何表达式,该指令表示元素和组件只渲染一次,不会随数据改变而改变
v-for
遍历数组/对象
key的作用
v-bind/语法糖:
动态添加属性
v-on/语法糖@
参数
事件调用的方法没有参数
在事件定义时,写方法时省略了小括号,但方法本身需要一个参数,
这时vue会默认将浏览器生产的event事件对象作为参数传入到方法
这时vue会默认将浏览器生产的event事件对象作为参数传入到方法
方法定义时,我们需要event对象,同时又需要其他参数
修饰符
stop
阻止冒泡
prevent
阻止默认事件
keyCode|keyAlias
监听键盘事件
once
只会执行一次
监听事件
@click/@keyup
v-model
修饰符
number
可以将输入转换成Number类型.否则不管是否输入数字，其实都是String。
lazy
使用修饰符.lazy会转变为在change事件中同步.就是在失去焦点或者按回车才更新
trim
自动过滤输入的首位空格
双向数据绑定
自定义指令
directives
bind
指令与元素成功绑定时调用；
inserted
指令所在元素被插入页面时调用；
update
指令所在模板结构被重新解析时调用。
全局指令
局部指令
生命周期钩子函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmount
keepAlive
deactivated
activated
插槽slot
普通插槽
slot
具名插槽
域名插槽
全局属性
proxy.globalProperties.$xxx=xxx
router
路由基本使用
路由配置
path
name
component
懒加载
component:() => import("@/xxx/xxx.vue")
预加载
import Options from "@/xxx/xxx.vue";component:Options
路由模式
hash
有#号
history
无#号
重定向
children
路由元信息meta
meta
<router-link></router-link><router-view><router-view>
嵌套路由
children
声明式路由和编程式路由
声明式
<router-link to="{}"></router-link><router-view></router-view>
编程式
proxy.$router.push()
有历史记录
proxy.$router.replace()
无历史记录
proxy.$router.go()
前进后退,正数前进,负数后退
路由传参,$router发,$route收
声明式
<router-link to="{path:"xxx",query:{text:"xxx"}}"></router-link><router-view></router-view>
编程式
query和params
query
proxy.$router.push({path:xxx,query:{text:"路由传值"}})
params
只能配置name字段,proxy.$router.replace({name:xxx,params:{text:"路由传值"}});
$router和$route的区别
动态路由,addRoute/removeRoute
路由导航
全局路由守卫
router.beforeResolve
前置路由守卫
router.beforeEach(to, from, next)
to即将要进入的目标
from当前导航正要离开的路由
next,是否可以进入某个具体路由，或者是某个具体路由的路径
后置路由守卫
router.afterEach(to, from)
独享路由守卫
beforeEnter(to,from,next)
组件路由守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
pinia
state
定义公共变量
$patch
$patch函数的形式修改状态数据
$patch对象的形式修改状态数据
getters
相当于component
actions
相当于methods
axios
Promise
状态
pending进行中
fulfilled成功
resolve
then
rejected失败
reject
catch
基本使用
请求方式
get
post
put/patch
delete
传参
params
data
函数封装
请求拦截、响应拦截
xxx.interceptors.request.use()
xxx.interceptors.response.use()
跨域
防抖与节流
Element-plus
收藏
收藏
职业：暂无
0 条评论
下一页
