Vue3

详细介绍了vue3的语法和常用扩展插件，方便学习和查询，干货满满，感兴趣的小伙伴可以参考使用！

Vue3

创建项目

vue create A

模板语法

文本

{{ msg }}

任意位置

相当于JS中的$A.text()

一般配合js中的data()设置数据

旧版

export default { name: '123', data(){ return{ msg: "消息提示" } } }

新版

ref定义变量，可以用.value属性重新赋值。 ref是reactive的再封装

reactive定义对象，不能定义基本数据类型，不可重新赋值

原始HTML

用变量动态表示HTML时，双大括号会将数据解释为普通文本，而不是HTML

v-html=""

相当于JS中的$A.html()

属性

用变量动态表示attr

v-bind:id=""

相当于JS中的$('div').attr('id', 'ID')

v-bind:id可以简写成:id

当我们希望A="B"的B是一个变量的时候，在A前面加:就可以了

在模板中可以支持简单的js表达式

可以

{{ number + 1 }}

{{ ok ? 'YES' : 'NO’}}

{{ message.split( ' ').reverse().join( ' ')}}

不行

{{ var a = 1 }}

这是语句，不是表达式

{{ if (ok) {return message} }}

流程控制也不会生效，请使用三元表达式

条件渲染

v-if

只有值为true才会渲染

v-else

v-show

会渲染，但不会显示

列表渲染

v-for

(x,index) in items

这个指令会循环len(items)次，每次里面的x以此取items里面的值

:key="item.id"

就地更新，提高效率

事件处理

添加事件

直接写

@click="counter += 1"

调用函数

@click="clickHandle(123)"

旧版

methods: { clickHandle(data){ console.log(data); } }

在methods中改变data的值，可以通过this.A来获取

新版

可以加一个参数event，是原生js的事件

注意

click可以对任何被点击的对象触发，比如<li>

双向绑定

v-model

可以对<input>、<textarea>、<select>双向绑定

改变data中的值可以改变<input>中的值， 改变<input>中的值也可以改变data中的值

把一个属性转化成model类型

v-model:current-page="nowpage"

v-model.lazy

在<input>失去聚焦的时候才会改变

v-model.trim

在获取的时候去掉前后空白符

组件

后缀

.vue

内容

template

script

export default对象的属性

name：组件的名称

data：传递数据

methods：写函数

components：存储<template>中用到的所有组件

props：存储父组件传递给子组件的数据

watch()：当某个数据发生变化时触发

computed：动态计算某个数据

setup(props, context)：初始化变量、函数

ref定义变量，可以用.value属性重新赋值

reactive定义对象，不可重新赋值

context.emit()：触发父组件绑定的函数

return 可以传递数据给子组件

style

scoped

如果有这个属性，那么这个样式只在当前组件中生效

加载

引入组件

import A from ./components/A.vue

挂在组件

components:{A}

显示组件

<A/>

组件交互

父组件传递到子组件

传递html

<el-main>列表</el-main>

传递变量

传递的方法

通过script中的export default中的props

传递的步骤

父组件

在template中的子组件的标签中写

:A=B :C=D

如果要传一些复杂的参数B，可以在setup()中写

此处B就是user

子组件

script

export default { name : "MyComponent", props: { A:{ type : String, default: "" }, }, }

一般required:true和default:""二选一

注意

数组和对象的默认值必须是函数

default:function(){ return []; }

default:function(){ return {}; }

在setup中可以通过props.引用父组件的信息

template

{{}}引用

传递的类型

String

Number

Boolean

Array

Object

Function

子组件传递到父组件

传递的方法

通过自定义事件来传递数据

传递的步骤

子组件

在template中写一个事件A

事件源

在methods中实现这个事件A

旧版

this.$emit("B",this.message)

新版

context.emit("B")：触发父组件绑定的函数

父组件

在template中的子组件的标签中写

@B="C"

在methods中实现这个事件C，事件会有一个参数，这个参数就是传过来的值

C(data){}

组件的生命周期

创建时: beforeCreate 、created 渲染时: beforeMount 、mounted 更新时:beforeUpdate 、updated 卸载时: beforeUnmount 、unmounted

八个周期函数和data是同一级别的

引入第三方

Swiper

轮播图

Axios

网络请求

封装

在src中创建utils文件夹，在其中创建request.js文件

具体用法

https://www.bilibili.com/video/BV1Y84y1B7Tz?p=14&vd_source=048c7bdfe54313b8b3ee1483d9d07e38

10:16

网络请求跨域解决方案

querystring

转换成string

路由

页面跳转

在router中的routes中写需要跳转的网址

<router-view>

显示

<router-link to="...">

跳转

携带参数

path:"/list/:A/:B"

to="/list/百度/1"

const route = useRoute(); {{route.params.userID}}

嵌套路由

重定向

{ path: '/:catchAll(.*)/', redirect: "/404", }

刷新

默认是由name判定是否刷新

可以通过重写key值自定义判断方式

vuex

组成

state:使用vuex中的内容

getter:对Vuex中的数据进行过滤和计算

Mutation:修改 Vuex 的 store 中的状态

旧版

新版

import { useStore } from "vuex";

const store = useStore();

setup(){ store.dispatch("login", {paras}) }

commit是提交执行mutations中的方法，Mutations是修改数据的，必须同步。

dispatch是提交执行actions中的方法，action提交的是Mutations,可以是异步操作。

action:类似Mutation，支持异步操作，但不能修改store

modules:定义state的子模块

调用

外部

state

store.state.user.access

action

store.dispatch("函数名",参数)

mutation

store.commit("函数名",参数)

内部

mutations调state

state.id

调函数

把store改成context

JWT

密码+公钥 ->新字符串 如果你拥有公钥可以用来验证密码是否正确 但是你想通过这个新字符串得到密码 则需要私钥+新字符串 反推回去

npm i jwt-decode

import jwt_decode from 'jwt-decode';

注意：Bearer后面有空格

ajax

如果要在vue页面使用ajax，可以直接写在setup里面，会在页面生成的时候直接调用。当然也可以写在函数当中

如果要在vuex中使用，需要放到函数里面才触发

其他

setup()

没有根节点的碎片

安装element

npm install element-plus --save

npm install -D unplugin-vue-components unplugin-auto-import

vue.config.js

const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } })