

首页  思维导图  详情



vue学习路线整理

2022-12-23 11:16:50   33  举报





AI智能生成

主要记录学习Vue的学习路径

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事件对象作为参数传入到方法

方法定义时,我们需要event对象,同时又需要其他参数

修饰符

stop

阻止冒泡

prevent

阻止默认事件

keyCode|keyAlias

监听键盘事件

once

只会执行一次

监听事件

@click/@keyup

v-model

修饰符

number

可以将输入转换成Number类型.否则不管是否输入数字，其实都是String。

lazy

使用修饰符.lazy会转变为在change事件中同步.就是在失去焦点或者按回车才更新

trim

自动过滤输入的首位空格

双向数据绑定

自定义指令

directives

指令与元素成功绑定时调用；

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

 Collect

Get Started

多Agent联合学习与经验积累-技术挑战路线图

 Collect

Get Started

Vue框架学习

 Collect

Get Started

AI学习路线（大连赵哥）

 Collect

Get Started

数据整理





0 条评论

下一页