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