![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3
云卷云舒%
这个作者很懒,什么都没留下…
展开
-
vue3中如何实现组件通信?
vue3中如何实现组件通信原创 2023-06-20 15:16:42 · 991 阅读 · 0 评论 -
Vue3中动态渲染菜单栏(TS)
。需求:左侧的菜单栏渲染数据从路由文件中获取并组织成我们想要的数据格式。此代码只适用一级菜单,多级菜单也是这个思路组织好数据然后再渲染。路由:router》index.ts。原创 2022-08-09 10:01:50 · 4934 阅读 · 0 评论 -
Vue3中切换路由页面不展示内容,刷新后页面正常显示
解决办法,给路由添加key。原创 2022-07-18 14:57:32 · 4741 阅读 · 19 评论 -
Vue3中使用用户引导插件driver.js
Intro.js是AGPL许可和开源的。但是,如果您想在您的商业应用程序、网站或插件中使用Intro.js,则需要获得商业许可证。element对应的是元素id或class名称,若是给元素设置了class就用#,设置id就用.本文介绍在vue3setup语法糖中如何使用dirvre.js来实现用户引导。position引导卡片所在的位置,若不设置会自动计算放在合适的位置。description为展示的内容,可以是html元素。对比了用户引导插件intro.js和driver.js。............原创 2022-07-18 11:13:39 · 1941 阅读 · 0 评论 -
Vue3中使用vue-i18n实现多语言切换
多语言切换1、安装插件【注意Vue3使用9版本,Vue2用的是8版本】2、在src在创建lang文件夹,并创建index.js、i18n.js、和 翻译的内容文件 3、写入翻译内容,举个例子:英文(en)、中文简体(zhCN)、中文繁体(zhTN)3、编写index.js文件,导出所有翻译内容4、编写i18n.js文件5、在main.js中挂载 至此,就可以使用按需显示语种了。那么,当我们去改变locale的值为对应的语种时就可以做到多语言切换了~插件官网:Getting st原创 2022-07-14 14:40:28 · 9794 阅读 · 12 评论 -
getActivePinia was called with no active Pinia. Did you forget to install pinia?
在Vue3中的路由里面使用Pinia报错: 代码如下:解决办法:Using a store outside of a component | Pinia原创 2022-07-12 09:48:36 · 688 阅读 · 0 评论 -
vue3中的一些其他变化
1.全局API的转移Vue 2.x 有许多全局 API 和配置。 例如:注册全局组件、注册全局指令等。 //注册全局组件Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>'})//注册全局指令Vue.directive('focus',原创 2022-05-15 20:13:04 · 218 阅读 · 0 评论 -
vue3新增的一些组件
1.Fragment在Vue2中: 组件必须有一个根标签 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中 好处: 减少标签层级, 减小内存占用咱就是说,vue越来越react化了。。。。。2. Teleport什么是Teleport?——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。 <teleport to="移动位置"> <div v-if="isShow" class="mask"...原创 2022-05-15 19:54:57 · 1001 阅读 · 0 评论 -
谈谈vue3组合式api的优势
vue2: options API 配置式使用传统Options API(配置式API)中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 。在修改时vue3: composition API 组合式我们使用Composition API后,虽然看起来烦琐了一些,但是带来了诸多好处:●所有API都是import引入的用到的 功能都import进来,对Tree- shaking很友好,没用到功能,打包的时候会被清理掉,减小包的大小。●不再上下反复横跳..原创 2022-05-15 19:02:03 · 3861 阅读 · 0 评论 -
vue3中一些不常见的属性
1. shallowReactive 与 shallowRef shallowReactive:只处理对象最外层(第一层)属性的响应式(浅响应式)。 shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。 应用场景: 如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> shallowRef。 2. re原创 2022-05-14 22:42:39 · 210 阅读 · 0 评论 -
vue3---toRef&&toRefs
toRef: // 将person对象中的name属性单独对外提取出来const name = toRef(person,'name')作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。应用:要将响应式对象中的某个属性单独提供给外部使用时。toRefs:和toRef作用一样,但可以批量创建多个 ref 对象<template> <h4>{{person}}</h4> <h2>姓名:{{name}}</h原创 2022-05-14 22:00:55 · 309 阅读 · 0 评论 -
vue3---生命周期
Vue3.0中可以继续使用Vue2.x中的生命周期钩子,只有最后两个钩子名称有变更,其余名称不变beforeDestroy改名为beforeUnmount destroyed改名为unmounted可以直接已配置项的形式使用生命周期钩子(vue2的写法),也可以使用组合式API的形式使用(vue3的写法),尽量统一写法。一般来说,组合式API里的钩子会比配置项的钩子先执行,组合式API的钩子名字有变化(前面多了on)Vue3.0也提供了 Composition API 形式的生命..原创 2022-05-14 17:48:28 · 239 阅读 · 0 评论 -
vue3---watchEffect
回顾下watch的用法:既要指明监视的属性,也要指明监视的回调watch(sum,(newValue,oldValue)=>{ console.log('sum变化了',newValue,oldValue)},{immediate:true})回顾下computed的用法: //计算属性 —— 完整 let fullName = computed({ get(){ return person.firstName + '-' +原创 2022-05-14 16:15:29 · 305 阅读 · 0 评论 -
vue3---watch
情况一:监视ref定义的响应式数据watch(sum,(newValue,oldValue)=>{ console.log('sum变化了',newValue,oldValue)},{immediate:true})如果使用ref定义了一个对象:watch(person.value,(newValue,oldValue)=>{ console.log('person变化了',newValue,oldValue)}) 或者:watch(person,(newV原创 2022-05-11 21:49:00 · 122 阅读 · 0 评论 -
vue3---comouted
import {computed} from 'vue'setup(){ ... //计算属性 —— 简写【只读】 let fullName = computed(()=>{ return person.firstName + '-' + person.lastName }) //计算属性 —— 完整【读和写】 let fullName = computed({ get(){ return pers.原创 2022-05-11 20:45:23 · 271 阅读 · 0 评论 -
vue3---reactive
作用: 定义一个对象类型的响应式数据(基本类型要用ref函数) 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象) reactive定义的响应式数据是“深层次的”。 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。<template> <h1>个人信息</h1> <h2>姓名:{{ name }}</h2>.原创 2022-05-08 18:07:38 · 1021 阅读 · 0 评论 -
vue3---ref函数
作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。 JS中操作数据: xxx.value 模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div> 备注: 接收的数据可以是:基本类型、也可以是对象类型。 基本类型的数据:响应式依靠的是类上的getter与setter完成的(object.defineProperty)..原创 2022-05-08 16:56:10 · 932 阅读 · 0 评论 -
Vue3---setup
理解:Vue3.0中一个新的配置项,值为一个函数。 setup是所有Composition API(组合API)“ 表演的舞台 ”。 组件中所用到的:数据、方法等等,均要配置在setup中。 setup函数的两种返回值: 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!) 若返回一个渲染函数:则可以自定义渲染内容。(了解) (不常用) 尽量不要与Vue2.x配置混用 Vue2.x配置(data、methos、computed...)中可以访问到setup中的属原创 2022-05-08 16:04:38 · 314 阅读 · 0 评论 -
Vue3响应式原理
vue共使用了三种响应式机制:defineProperty、Proxy、value setter1.defineProperty【Vue2】let getDouble = n=>n*2let obj = {}let count = 1let double = getDouble(count)Object.defineProperty(obj,'count',{ get(){ return count }, set(val){原创 2022-04-26 21:35:54 · 258 阅读 · 0 评论 -
体验Composition API + <script setup>
1,案例一:清单组件(To dolist.vue)【体验ref】<template> <div> <input type="text" v-model="title" @keydown.enter="addTodo" /> <button v-if="active < all" @click="clear">清理</button> <ul v-if="todos.length"> &l原创 2022-04-26 19:18:30 · 617 阅读 · 0 评论 -
搭建Vue3工程化项目(vite+js)
环境准备:chrome浏览器nodejs -> vitevscode + Volar插件创建项目:1 、创建一个文件夹(这里我命名为V3)2.在vscode中打开文件夹,终端输入命令(创建一个Vite的初始化项目)npm init @vitejs/app3,依次输入项目名、选择框架、4.项目创建成功,看下我们的目录:5.回退到geek-admin目录下,执行安装、启动命令来运行项目(命令在第3步中已圈出)看到如上信息就算是启动成功啦,我们打..原创 2022-04-26 16:25:47 · 3337 阅读 · 1 评论