vue3基本使用,讲究的就是一个字-细,思维被点亮,眼界被开拓,心灵被触动。

65 阅读2分钟

vue3基本使用

1.使用vite(类似webpack得web构建工具)

vite是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。 使用 npm 前提需要安装 。

①.npm init vite-app 项目名

②.cd 项目名 (安装需要切换到项目目录下)

③.npm install (vite构建完需要手动安全一下依赖)

④.npm run dev (即可运行项目)

2.组合式API

一、在setup中使用 ref、reactive、toRefs

image.png

image.png

补充:

使用 ref 操作子组件

image.png

使用 ref 操作 dom 元素

image.png

注意:

①.从生命周期的角度来看,是再beforCreate 之前执行因此在这里是不能使用this的,this指向为undefined

②.在 template 模板中需要使用setup定义的数据和方法时,需要 retrun 出去

③.ref 即支持简单数据类型,也支持复杂数据类型

④.reactive 只能定义复杂数据类型的响应式数据,不能定义简单数据类型的数据

⑤.具体使用ref 或者 reactive 个人感觉喜欢哪个就哪个符合定义规则就行(上面③、④规则)

二、在setup中使用 watch、watchEffect

image.png

补充:

image.png

三、在setup中使用 computed

image.png

补充:

image.png

四、在setup中使用生命周期

image.png

补充:

image .png

image.png

五、setup 的两个参数: props、context

①.props image.png

image.png

补充

组合式api语法糖 父传子

image.png

组合式api语法糖 子传父

image.png

②.context image.png

六、setup中使用 provide、inject(即依赖注入)

image.png

补充: setup 语法糖使用依赖注入

image.png

3.组合式 API 语法糖

image.png

4.路由

一、基本使用

①.npm i vue-router 装包

②.在src目录下创建views文件夹用来存放我们的页面组件——在该文件夹创建Home组件、About组件 image.png

③.在src目录下创建router文件夹存放我们的路由信息并在main.js引入 image.png

④.在App.vue中写入我们的路由基本跳转

image.png

二、动态路由传参

image.png

三、路由匹配404

image.png

四、路由正则与重复参数(感觉了解即可)

image.png

五、嵌套路由

image.png

六、通过 js 跳转页面

image.png

补充:

image.png

七、命名路由和命名视图

命名路由:

image.png image.png

命名视图

image.png

八、重定向和别名

image.png

九、将props传递给路由组件(通过props接受路由参数)

image.png

十、路由守卫

image.png

十一、路由懒加载

image.png

5.使用 provide、inject(跨级通信)进行状态管理(当不使用vuex的时候可以考虑考虑用这个)

image.png

6.解决跨域问题

一、vite

image.png

二、vue-cli

image.png

7.vuex

一、基本使用-state

image.png

二、基本使用-mutations(处理同步函数)

image.png

三、基本使用-getters

image.png

六、基本使用-actions

image.png

七、基本使用-modules

image.png

八、基本使用-辅助函数

image.png

九、基本使用-命名空间(namespaced: true)

image.png

8.pinia 状态管理工具

一、pinia安装及定义option(对象) store

安装:yarn add pinia 或者 npm install pinia

使用:

image.png

二、pinia 定义 setup store 及 option store 和 setup store 的使用

image.png

三、pinia 中的 state 的基本使用

image.png

四、pinia 中的 getters 的基本使用

image.png

五、pinia 中的 actions 的基本使用

image.png