Vue3学习笔记整理
2022-12-23 15:03:25 35 举报AI智能生成
登录查看完整内容
Vue3学习笔记整理包括了Vue3的基础知识、核心概念、组件化开发、响应式原理等方面的内容。在学习过程中，我们通过阅读官方文档、观看视频教程和实践项目等方式来掌握Vue3的各种特性和用法。此外，我们还对Vue3与Vue2的区别进行了详细的对比分析，以便更好地理解新版本的优势和改进之处。总之，这份学习笔记为我们提供了一份系统且全面的Vue3学习指南，帮助我们快速上手并熟练运用这一流行的前端框架。
作者其他创作
大纲/内容
VM：就是View-Model，数据双向绑定
Model：取数据的地方
View：展示数据的地方
MVVM
moustache插值语法
data
methods
选项式
setup语法糖
ref
reactive一般用来定义引用数据类型
reactive、toRef、toRefs
setup
组合式
选项式&组合式
Vue基础语法
是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新
computed
watch监听ref定义的变量
immediate
watch立即监听
watch
创建、引入、（注册）/使用、
组件基本使用
全局：AppNew.component(\"组件名\
全局组件与局部组件
type
required
default
props/defineProps
父传子
$emit/defineEmits
defineExpose
子传父
defineExpose/ref属性
provide/inject
祖传孙
pinia
兄弟组件
组件间通信
动态组件<component is=\"\"></component>
keep-alive
component
隐藏双括号，有值再显示
v-cloak
可以将string的html解析出来并且进行渲染
v-html
v-text
v-show
v-if
配合v-if
v-else
配合v-else
v-else-if
插槽
v-slot
用于显示原本的Mustache语法
v-pre
v-once
遍历数组/对象
key的作用
v-for
动态class对象：<div :class=\
动态class数组：<div :class=\
动态style对象：<div :style=\
v-bind/语法糖:
事件调用的方法没有参数
参数
阻止冒泡
.stop
阻止默认事件
.prevent
监听键盘事件
.keyCode|keyAlias
只会执行一次
.once
点击事件绑定本身才触发
.self
修饰符
@click/@keyup
监听事件
v-on/语法糖@
可以将输入转换成Number类型.否则不管是否输入数字，其实都是String。
number
使用修饰符.lazy会转变为在change事件中同步.就是在失去焦点或者按回车才更新
lazy
自动过滤输入的首位空格
trim
双向数据绑定
v-model
指令与元素成功绑定时调用；只调用一次
bind
指令所在元素被插入页面时调用；
inserted
指令所在模板结构被重新解析时调用。
update
directives
全局指令
局部指令
自定义指令
指令
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmount
deactivated
activated
keepAlive
生命周期钩子函数
slot
普通插槽
具名插槽
域名插槽
插槽slot
proxy.globalProperties.$xxx=xxx
全局属性
Vue.js
path
name
import Xxx from \"@/xxx/xxx.vue\";component:Xxx
预加载
component:() => import(\"@/xxx/xxx.vue\")
懒加载
路由配置
有#号
hash
无#号
history
abstract：适用于Node
路由模式
redirect
重定向
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-link to=\"{path:\"xxx\
query
params
query和params
$router和$route的区别
addRoute
添加
removeRoute
删除
动态路由
全局路由守卫
to即将要进入的目标
from当前导航正要离开的路由
前置路由守卫
后置路由守卫
独享路由守卫
组件路由守卫
路由导航守卫
router
$patch函数的形式修改状态数据
$patch对象的形式修改状态数据
$patch
定义公共变量
state
相当于component
getters
相当于methods
actions
pending进行中
then
resolve
fulfilled成功
catch
reject
rejected失败
状态
Promise
get
post
put/patch
delete
请求方式
传参
基本使用
二次封装
xxx.interceptors.request.use((config)=>{font color=\"#444444\
xxx.interceptors.response.use()
请求拦截、响应拦截
跨域:跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的，是浏览器对JS实施的安全限制。
什么是跨域
JSONP
CORS
代理请求
如何解决跨域
font color=\"#0d0b22\
同源策略
跨域
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
防抖
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
节流
防抖与节流
axios
Element-plus
Vue3
收藏
收藏
职业：暂无
0 条评论
回复 删除
下一页
