vue3
文章平均质量分 58
vue3皮毛的学习路
Jay丶萧邦
uview维护组成员;LOL全能型混子;Jay&Vae的忠实粉丝;骑电车贼6的前端攻城狮;未完待续...
展开
-
Vue3:自定义指令以及简单的后台管理权限封装
说起这个自定义指令的使用场景,我第一反应就是,后台管理的权限管理,要问我为什么?就是ruoyi系统用多了😂;本篇就聊聊vue3的自定义指令以及若依的管理权限封装。如果对vue指令还是有点懵,不清楚这是vue哪一块的知识,v-if,v-show,v-for总用过吧?没错,指令说的就是它们,这些都是vue内置的指令,同时vue还允许我们注册一些自定义的指令。既然作为指令,当然有它的一些规则,那么指令的规则就是以v字母开头的驼峰变量,当然这是在中可以这么写。在没有使用。原创 2023-02-24 16:13:15 · 3961 阅读 · 0 评论 -
Vue3:有关v-model的用法
提起v-model,想必都不陌生,作为vue的经典语法,帮助我们在编写项目的时候,省了很多很多的事情,本文着重记录v-model在组件上的绑定使用!在默认的情况下,组件的都是使用modelValue作为自己的prop,使用update:modelValue作为对应的更新事件,有时候我们需要去改动一哈!基本规则就是,自定义的prop:xxx, 对应的更新事件:update:xxx, 组件上就变成了v-model:xxx的写法,下面以value举例原创 2023-02-23 15:26:49 · 5733 阅读 · 1 评论 -
vue3:直接修改reative的值,页面却不响应,这是什么情况?
今天看到有人在提问,问题是这样的,我修改了reative的值,数据居然失去了响应性,页面毫无变化,这是什么情况?本着好奇心害死猫的原则,我就看了下,我直呼好家伙!原创 2023-02-15 15:02:02 · 3080 阅读 · 0 评论 -
vue3:安装配置sass
对于前端开发人员来说,css预处理的语言已经是家常便饭了,如sass,less等等,那么在vue3中该如何去使用sass呢?首先看个最基础的页面,木有任何的样式,接下来将一步一步的添加样式!原创 2022-10-11 15:30:08 · 13320 阅读 · 1 评论 -
vue3:如何使用@符代替 ./src
【代码】vue3:如何使用@符代替 ./src。原创 2022-10-10 16:13:48 · 4392 阅读 · 0 评论 -
vue3:如何去挂载全局的变量和方法
在vue2中,我们会把经常使用的方法,变量挂载到 vue.prototype上,例如下面这样const getParams = (params) => paramsVue.prototype.$getParams = getParams然后我们就可以在任意的组件中 进行 this.$getParams('999'),这种调用,也很是简单方便但是时代变了,在vue3中,我们不能再去这么操作,这么写了,我们需要采用以下方式1. 使用 app.config.globalPropertie原创 2022-04-24 21:30:00 · 3771 阅读 · 3 评论 -
vue3:兄弟组件,跨组件传值,事件总线的通信方式(mitt / tiny-emitter)
在vue2中的跨组件通信中,我们如果不用状态管理vuex的话,我们就会采用事件总线的通信的方式,通常做法就是新建一个js文件,例如bus.js,在里面new Vue(),然后export default导出,但是在vue3中移除了事件总线,我们不可以再这么用了,,,但是官方给我们推荐了外部第三方的库来帮我们完成事件总线,官方推荐了两个:mitt或者tiny-emitternpm地址:mitt - npm或者tiny-emitter - npm用法也很简单:我这里以mitt举例1...原创 2022-03-28 21:44:00 · 11339 阅读 · 5 评论 -
vue3:组件通信v-model式写法
v-model作为vue中一个非常出色语法糖,帮助我们在开发的过程中省略了很多的麻烦,在进行组件通信的过程中,我们也可以用v-model帮助我们进行一些省事的操作!首先说一下我的需求,子组件是一个输入框,每在子组件中输入一段话,父组件中就多一条记录,我采用了element-plus的UI组件库,大概页面是长这个样子!做法有很多种,这里为了展示v-model的用法,我采用了在子组件中把数据组成数组,再返回至父组件,父组件直接渲染即可,先看看正常的采用props,emit的写法正常的采用pro.原创 2022-03-28 21:08:40 · 3826 阅读 · 1 评论 -
懒人必备:使用vue ui创建vue项目
工作的时候,大量的时间都是在思考需求,编写代码的,除了新起项目的时候,我们需要去创建一个项目,但是这个时候出现了一个尴尬的问题,创建vue的项目命令忘记了,这可咋办?我给安利一个,虽然很多人吐槽程序员用这玩意创建项目,你是看不起我吗?我倒是觉得啊,一个创建项目而已,怎么都行,管他黑猫白猫逮着老鼠就是好猫!1. 安装vue-cli这种就不说了,找到你要创建项目的目录,打开cmd,输入vue ui这个时候你的浏览器就会自动打开http://localhost:80002.点击创建...原创 2022-03-25 20:54:10 · 8438 阅读 · 4 评论 -
31 vue3 Pinia监听订阅actions
上篇:30 vue3 Pinia对state的订阅监听($subscribe)_十一月的萧邦-CSDN博客本篇记录在vue3中如何对actions进行一个监听订阅的操作,这些操作对于在运行时跟踪错误很有用!可以帮助我们更好的发现问题,解决问题1. 创建vue3项目,安装Pinia,配置Pinia,不再详细赘述2. 目录 /store/main.js3.main.js,因为在订阅的时候,有错误异常的执行函数,所以,我们这里直接写上一个promise,当isError为false的...原创 2022-03-15 09:35:57 · 4886 阅读 · 0 评论 -
30 vue3 Pinia对state的订阅监听($subscribe)
上一篇:29 vue3 Pinia--getters的使用_十一月的萧邦-CSDN博客基本的使用已经记录完毕了,本篇记录 Pinia对store数据进行的订阅监听,更直白点说,当store中的state变化到我们想要的那个值时,我们需要去做些什么,那么我们就需要用到$subscribe1. 新建vue3项目,安装Pinia,配置Pinia,不再多说了,不会的可以看官网也可以看我前面的几篇记录文章2. app.js---首先声明了一个state:baseUrl,写了一个action方法,用于改原创 2022-03-13 16:50:43 · 23493 阅读 · 2 评论 -
29 vue3 Pinia--getters的使用
28 vue3 Pinia修改state的三种方法(直接修改,$patch,actions)_十一月的萧邦-CSDN博客本篇记录在vue3中使用pinia中的getters的使用!原创 2022-03-11 19:30:00 · 3718 阅读 · 0 评论 -
28 vue3 Pinia修改state的三种方法(直接修改,$patch,actions)
本篇记录vue3 使用pinia修改state的三种方法1. 新建vue3项目,安装Pinia,不再详细描述。。。2.目录app.jsimport {defineStore} from "pinia"const appStore = defineStore('appStore', { state: () => ({ baseUrl: 'https://www.baidu.com/', ipList: ['192.168.10.777',原创 2022-03-10 22:30:00 · 30498 阅读 · 5 评论 -
27 vue3 Pinia取值
本篇记录使用pinia状态管理工具如何取值的操作1. 进行vue3的创建 以及 pinia的安装,还不知道的请看上篇文档目录如下:2.app.js中写入如下代码import {defineStore} from "pinia"const appStore = defineStore('appStore', { state: () => ({ baseUrl: 'https://www.baidu.com/', appid: 'wx1..原创 2022-03-10 20:00:00 · 8243 阅读 · 0 评论 -
26 vue3 Pinia的安装配置
首先介绍一下pinia,Pinia官网我们都用过vuex吧,知道vuex是vue的状管理器,那pinia也是vue的状态管理器,解决问题的目的都是一样的,是 Vue 的另一种状态管理方案,相比于vuex,pinia的优势在于符合直觉,易于学习;大小仅有1kb有着模块化的思想,便于管理1. 新建vue3项目,不再多说了。。。2. 安装pinianpm install pinia@next3.src下新建目录store,下新建一个js文件,我这里新建了一个app.js..原创 2022-03-10 19:30:00 · 1472 阅读 · 0 评论 -
25 vue3中使用vuex--- getters的使用
上一篇:24 vue3 vuex actions的使用_十一月的萧邦-CSDN博客本篇记录vue3中 vuex getters的使用方式 默认进行了模块化的管理,开启了命名空间目录:user.js写了两个示例,简单讲,就是一个不用传递参数,一个传递参数const user = { namespaced: true, //开启命名空间 建议开启 state: { name: '小米', sex: 2, //0=>代表女...原创 2022-03-09 14:08:59 · 7077 阅读 · 1 评论 -
24 vue3使用vuex--- actions的使用
紧接上篇:本篇记录vue3 vuex actions的使用,默认进行了模块化的管理,开启了命名空间目录:user.jsconst user = { namespaced: true, //开启命名空间 建议开启 state: { name: '', token: 'token 123456789', sex: 2, //0=>代表女 | 1=>代表男 | 2=>代表保密 role:.原创 2022-03-08 22:30:00 · 5078 阅读 · 2 评论 -
23 vue3中使用vuex--- mutations的使用
紧接上篇:本篇记录 vue3 vuex的mutations的使用,默认进行了模块化的管理,开启了命名空间目录:user.jsconst user = { namespaced: true, //开启命名空间 建议开启 state: { name: '', token: '', sex: 2 //0=>代表女 | 1=>代表男 | 2=>代表保密 }, mutations: {原创 2022-03-08 21:45:00 · 4658 阅读 · 1 评论 -
22 vue3中使用vuex--- state取值操作
紧接上篇:本篇记录vue3中 vuex的取值操作,因为在写的项目中,我们大多都对vuex状态管理器进行了模块化的管理,所以我这里就直接模块化起步了,熟悉vue2的应该都知道吧?目录结构如下:在user.js中我们会去存放一些用户的一些信息以及我们经常见的token,我直接开启的命名空间,如果对命名空间不太懂的,请看官网介绍:Module | Vuexconst user = { namespaced: true, //开启命名空间 建议开启 state: { ..原创 2022-03-08 21:00:00 · 4841 阅读 · 0 评论 -
21 vue3 vuex的安装配置
上一篇:20.0 vue3 vue-router路由跳转,参数(query,params)的传递与接收(包括请求操作)_十一月的萧邦-CSDN博客本篇主要记录vuex的安装配置,官网:Vuex 是什么? | Vuex1.创建vue3项目(不再详细说明)2.安装vuex命令:npm install vuex@next --save完成如下3.src下新建store文件夹下新建index.js,目录如下index.js中写入如下代码import {cre...原创 2022-03-08 20:30:00 · 2183 阅读 · 0 评论 -
20.0 vue3中使用vue-router路由跳转,参数(query,params)的传递与接收(包括请求操作)
上一篇:19.0 vue3 ref,reactive赋值的问题以及解决方法_十一月的萧邦-CSDN博客本篇着重记录在vue3中使用vue-router的跳转方法,以及参数的传递接收等操作router / index.jsimport {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'const routes = [ { path: '/', name:原创 2022-03-08 10:05:33 · 3592 阅读 · 2 评论 -
19.0 vue3 ref,reactive请求后的赋值问题以及解决方法
上一篇:18.0 vue3 Vue Router的使用(1)_十一月的萧邦-CSDN博客开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我们可能会稍微的有点不适应,在赋值的过程中,使用了错误的做法,导致一直失败错误示范:无论是使用ref声明的数组还是使用reactive声明的数组,此种写法都是错误的<template> <div> list:{{ list }} </div>&l原创 2022-03-07 22:00:43 · 12415 阅读 · 2 评论 -
18.0 vue3 vue-router的配置
上一篇:17.0 vue3 Suspense的用法_十一月的萧邦-CSDN博客本篇来介绍有关vue3中vue-router的使用,官网地址:Vue Router1.创建vue3项目(这点就不再详细说了)2.安装vue-router使用命令:npm install vue-router@4如下:3.在src文件夹下创建一个文件夹名称为router,下面创建一个index.js,如下index.js写入如下代码import {createRouter...原创 2022-03-07 16:27:09 · 1288 阅读 · 0 评论 -
17.0 vue3 Suspense的用法
上一篇:16.0 vue3 Teleport---自定义dialog组件_十一月的萧邦-CSDN博客上一篇:15.0 vue3 provide&inject跨组件通信方式_十一月的萧邦-CSDN博客上一篇:14.0 vue3 customRef的使用_十一月的萧邦-CSDN博客上一篇:vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇记录vue3的customRef,customR原创 2022-02-22 20:58:27 · 437 阅读 · 0 评论 -
16.0 vue3 Teleport---自定义dialog组件
上一篇:15.0 vue3 provide&inject跨组件通信方式_十一月的萧邦-CSDN博客上一篇:14.0 vue3 customRef的使用_十一月的萧邦-CSDN博客上一篇:vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇记录vue3的customRef,customRef是vue3的一大亮点,custom的意思大家都懂,自定义的意思,一旦出现自定义,那么就代表我们可原创 2022-02-16 17:35:37 · 1205 阅读 · 0 评论 -
15.0 vue3 provide&inject跨组件通信方式
上一篇:14.0 vue3 customRef的使用_十一月的萧邦-CSDN博客上一篇:vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇记录vue3的customRef,customRef是vue3的一大亮点,custom的意思大家都懂,自定义的意思,一旦出现自定义,那么就代表我们可以做很多基于自己的需求的操作,vue3的官方文档的关于这块的示例其实已经蛮不错了,看代码需求是这样,我们需原创 2022-02-10 21:56:25 · 351 阅读 · 0 评论 -
14.0 vue3 customRef的使用
上一篇:vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇记录vue3的customRef,customRef是vue3的一大亮点,custom的意思大家都懂,自定义的意思,一旦出现自定义,那么就代表我们可以做很多基于自己的需求的操作,vue3的官方文档的关于这块的示例其实已经蛮不错了,看代码需求是这样,我们需要做一个模糊搜索 输入框防抖的效果,在输入框内输入内容,一秒内不再输入就去发原创 2022-02-07 21:44:02 · 721 阅读 · 0 评论 -
13.0 vue3 toRaw&markRaw
上一篇:vue3 readonly&shallowReadonlyhttps://blog.csdn.net/qq_42543244/article/details/122772194本片继续记录vue3的新特性 toRaw & markRaw简单来说,toRaw:返回reactive或readonly代理的原始对象,当我们去改变原始对象,页面是不是刷新的,因为数据不是proxy响应式代理的。markRaw:去标记一个对象,让它永远不会转换为proxy;示例:&...原创 2022-02-05 21:09:46 · 699 阅读 · 0 评论 -
12.0 vue3 readonly&shallowReadonly
上一篇:vue3 shallowRef&shallowReactivehttps://blog.csdn.net/qq_42543244/article/details/122771740本篇记录vue3的readonly & shallowReadonly;顾名思义,readonly只读属性,将一个属性设置为只读的属性;<template> <div>Demo组件内容</div> <div>{{ num }}</div原创 2022-02-02 21:29:26 · 574 阅读 · 0 评论 -
11.0 vue3 shallowRef&shallowReactive
上一篇:vue3 toRef&toRefshttps://blog.csdn.net/qq_42543244/article/details/122715199本篇文章主要记录vue3的shallowRef,shallowReactive的api;在默认的情况下,无论是 ref还是reactive都是深度监听,但是深度监听带来的问题是:如果数据量比较大,我们在使用ref reactive,讲原始数据代理为响应式数据,是非常消耗性能的,有些时候对于某些数据我们并不需要深度监听,此时就用到了原创 2022-02-02 20:50:02 · 526 阅读 · 0 评论 -
10.0 vue3 toRef&toRefs
上一篇:vue3 自定义hook函数https://blog.csdn.net/qq_42543244/article/details/122644055原创 2022-01-27 14:02:48 · 769 阅读 · 0 评论 -
9.0 vue3 自定义hook函数
上一篇:vue3生命周期https://blog.csdn.net/qq_42543244/article/details/122398873?spm=1001.2014.3001.5501今天主要需要记录vue3的自定义hook函数,vue3自定义hook函数与vue2的mixin是有点相似的,进行代码的复用。为了更好的演示,我写了两个测试的子组件。父组件:<template> <button @click="isShow = !isShow">切换组件<原创 2022-01-22 21:33:56 · 608 阅读 · 0 评论 -
8.0 vue3生命周期
上一篇:vue3 watchEffect函数https://blog.csdn.net/qq_42543244/article/details/122291727记录vue3的生命周期,于vue2相比,变化并不算很大,最大的变化是,组合式的开发,意味着如果需要在某个生命周期中写点代码,那么前提是必须引入,然后叫法单词上发生的一些变化,先看官网给出的周期图:vue2:vue3:然后有两种写法,为了能更好的呈现出来,我就直接贴代码了:父组件(因为生命周期中有卸载前,已卸载的周..原创 2022-01-09 21:04:41 · 1180 阅读 · 1 评论 -
7.0 vue3 watchEffect函数
上一篇:vue3 watch监听函数(reactive篇)https://blog.csdn.net/qq_42543244/article/details/122281029上篇记录了watch监听函数(reactive篇),今天来记录vue3 新增的一个函数watchEffect,其作用也是用于监听但是于watch又稍显不同,下面请看代码举例<template> <h2>姓名:{{ data.name }}</h2> <h2>年龄:{{.原创 2022-01-03 20:10:50 · 636 阅读 · 0 评论 -
6.0 vue3 watch监听函数(reactive篇)
上一篇:vue3 watch监听函数 (ref篇)https://blog.csdn.net/qq_42543244/article/details/122203802?spm=1001.2014.3001.5501上篇说到的是监听ref声明的数据,今天记录监听reactive声明的数据,其实差别并不是不大,但是其中有一些坑,特此记录,请看代码(注释也要仔细看哦)<template> <h1>reactive数据类型</h1> <h2>姓名:原创 2022-01-02 21:25:58 · 4265 阅读 · 0 评论 -
5.0 vue3 watch监听函数 (ref篇)
上一篇:vue3 computed计算属性https://blog.csdn.net/qq_42543244/article/details/122180340?spm=1001.2014.3001.5501即上一篇写完computed属性之后,今天来记录 watch监听函数,我打算写成两个部分(ref & reactive,在vue3中毫无疑问,watch也被放到了组合式api !具体请看下方代码<template> <h1>ref基础数据类型监听</h原创 2021-12-28 22:06:04 · 2902 阅读 · 0 评论 -
4.0 vue3 computed计算属性
上一篇:vue3有关组件传值https://blog.csdn.net/qq_42543244/article/details/122161060紧接上篇,今天来记录一下vue3 computed的计算属性,在vue中使用计算属性是很常见的操作,一起来看看vue3关于计算属性有哪些改动吧!首先最大的一点就是,vue3把计算属性变成一个api,要使用它,就首先要引用它,话不多说,上代码!<template> <div>姓:<input type="text"原创 2021-12-27 21:05:26 · 554 阅读 · 0 评论 -
3.0 vue3有关组件传值
上一篇:vue3数据变量的修改https://blog.csdn.net/qq_42543244/article/details/122146552在使用过框架的过程中,有关组件传值是必不缺少的一部分,今天主要记录一下有关vue3组件传值的用法!父组件:我的父组件定义如下<template> <h1 v-show="data.title">标题:我是子组件传递过来的===>{{ data.title }}</h1> <demo原创 2021-12-26 21:26:51 · 634 阅读 · 0 评论 -
2.0 vue3数据变量的修改
在上一篇中,已经学习了vue3中数据的声明,下面就该说一下数据的修改,话不多说直接上代码!<template> <h1>个人信息</h1> <h2>姓名:{{ name }}</h2> <h2>年龄:{{ age }}</h2> <h2>性别:{{ info.sex }}</h2> <h2>身高:{{ info.height }}m</h2> &l原创 2021-12-25 18:00:25 · 5610 阅读 · 2 评论 -
1.0 vue3数据变量的声明(ref & reactive)
前言:相信大家对于vue2的使用已经挺熟练,就算遇见难题,相信大家逛于各大论坛博客也能找到解决办法,最近小编在学习vue3,记录一下学习历程,顺便提前给大家踩踩坑!vue3数据声明,vue3采用了组合式的开发模式,在声明变量时,我们需要引入 ref 、reactiveref:针对于基础类型数据的声明,比如string,number ,boolean,也可以声明引用类型数据,array,object,但其本质内部依然采用了raective声明reactive:针对于引用类型数据的声明,array,原创 2021-12-24 21:53:53 · 7845 阅读 · 0 评论