VUE3
vue3 使用swiper实现轮播图(两边小中间放大效果轮播图)
先引入swiper ,我直接引入的最新的包是10.2.0 pnpm add swiper yarn add swiper 在vue页面引入 <script setup> import { Swiper, SwiperSlide } from 'swiper/vue'; import { Autopl ......
vue3 使用 router 进行跳转备忘
1.在画面中添加子画面,使用 el-menu 菜单进行跳转,只更新子画面 a.首先在配置 router 路径的 js 文件中配置画面的路径,子画面的路径要在父画面的 children 下面 在父节点下设置 redirect 属性,打开父画面时会默认打开相应子画面,否则子画面默认显示为空白 b.在画面 ......
vue3 使用vuex以及数据持久化
/* * @Author: Caixia.Gao * @LastEditors: Caixia.Gao * @Date: 2023-08-23 11:28:44 * @LastEditTime: 2023-08-23 11:45:05 * @Description: */ // 引入vuex imp ......
【算法】在vue3的ts代码中分组group聚合源数据列表
有一个IList<any>()对象列表, 示例数据为[{id:'1',fieldName:'field1',value:'1'},{id:'1',fieldName:'field2',value:'2'},{id:'2',fieldName:'field1',value:'1'},{id:'2',f ......
Vue3 响应式全局对象json 动态绑定界面五 ( v-for 和 v-if 的应用)
效果图 man.js 定义 响应式全局对象 globalData 定义一个没有具体参数的json象 extTelTalkData: [], 这么写的好处是 事先不写具体参数,赋值时实例就行。 我是用websocket 收到消息 并赋值的,当然也可以用其它方式赋值。 //全局对象 const glob ......
vue3父子组件通信小结
### 父子组件中的attrs props 理解/继承 首先,父组件可以给子组件传入属性、监听函数(类似onClick),class,style,id,总结起来就是大三类-**属性,监听函数,样式**! 爷爷组件 -- 有两个监听函数 ```jsx import { computed, define ......
VUE3单页面应用开发常用工具
Vite 一种新型的前端构建工具,它主要由两个部分做成 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。 社区模板 create- ......
vue3 watch 监听响应式数据变化 改变img的src
目标:用一个图片来监视全局websocket对象的连接状态 全局websocket的写法详见:https://www.cnblogs.com/hailexuexi/p/17577818.html main.js 全局对象 websocket的连接状态 //全局对象 const globalData= ......
在Vue3后台管理系统中使用watch和watcheffect
1、watch 在 Vue3 中的组合式 API 中,watch 的作用和 Vue2 中的 watch 作用是一样的,他们都是用来监听响应式状态发生变化的,当响应式状态发生变化时,都会触发一个回调函数。 const message = ref("test"); watch(message, (n ......
Vue3 toRef响应式失效问题排查
### 父组件 ```html const stuRecordInfo = ref({ stuNum: 11111 }) // 接口请求返回 stuRecordInfo.value.stuNum = 22222 ``` ### 子组件 ```html const info = toRef(props ......
vue3探索——组件通信之事件总线
> Vue2.x使用EventBus进行组件通信,而Vue3.x推荐使用`mitt.js`。 > > > 比起Vue实例上的`EventBus`,`mitt.js`好在哪里呢?首先它足够小,仅有200bytes,其次支持全部事件的监听和批量移除,它还不依赖Vue实例,所以可以跨框架使用,React或 ......
vue3 vite后台管理模板项目打包报错 Some chunks are larger than 500 KiB after minification解决办法
1、错误原因分析: 超过块大小限制,块大小默认500 KB 2、解决办法: 在vite.config.js 中增加 output 配置项 build: { chunkSizeWarningLimit: 1500, // 调整包的大小 rollupOptions: { output: { // 最 ......
vue3常见的难点
vue中params和query的区别,以及具体用法:https://blog.csdn.net/weixin_42282727/article/details/107505014 route、router区别:https://blog.csdn.net/m0_67948827/article/de ......
vue3传属性时报错 [Vue warn]: Component is missing template or render function.
上网查这个问题,解决方案很多,没有一款适合我。。。先说我的解决办法,如果解决不了再往下看,我的原因是 用的子组件的ref和子组件的标签名一样了: <ChildComponent1 ref="ChildComponent1" :parent-data="data" > <template #slot- ......
vue3新语法糖——setup script
vue3新语法糖——setup script CoCoyY1 2021-03-27 12:5241480 前言 vue3上线已经很久了,许多小伙伴应该都已经使用过vue3了。那么在使用vue3composition API的时候有没有觉得整个过程会比较繁琐呢。比如当你定义了一个方法,然后发现模板需要 ......
谈谈Vue3中的ref和reactive
一、是什么? ref 和 reactive 是Vue3中用来实现数据响应式的API一般情况下,ref定义基本数据类型,reactive定义引用数据类型(我喜欢用它来定义对象,不用它定义数组,原因后面讲)我理解的ref本质上是reactive的再封装 二、先聊reactive reactive定义引用 ......
vue3项目,vie框架,相对路径图片,测试时正常显示,发布后不显示问题解决方案
参考 Vite 官网的说明,修改图片的引用路径后,图片发布后可以正常显示 const imgUrl = new URL('./img.png', import.meta.url).href document.getElementById('hero-img').src = imgUrl 官网地址: ......
vue3 文件上传进度条组件
index.vue文件 <template> <div class="confirm-modal"> <transition name="fade"> <div class="modal-dialog" @click="clickMaskToClose ? handleCancel() : null ......
vue3第一章
官方文档( 中文版 ):https://vue3js.cn/docs/zh/ 视频:https://www.qiuzhi99.com/movies/vue3/1330.html 语法对比:https://www.jianshu.com/p/4e7ba9e93402 与2.x区别对比 1. vue2和 ......
vue3 组合式 api 单文件组件写法
本篇博文将深入介绍 Vue3 组合式 API 和单文件组件的写法。我们将从安装和配置 Vue3 开始,然后逐步详细展示如何创建一个简单的单文件组件。除此之外,我们还将讨论使用组合式 API 的常见模式和技巧,例如响应式状态管理、替代生命周期钩子函数的方法、自定义组合式 API、数据的响应式处理和侦听... ......
Vue3 常用组件库推荐
Vue 作为一款深受广大群众喜欢的前端框架,拥有众多优秀的开源 UI 组件库,这里整理了一下供大家参考。 这几套框架主要用于后台管理系统和移动端的制作,方便开发者快速开发。 一、PC 端 UI 库 1.1 Element Plus官网地址:https://element-plus.org/zh-CN ......
搞懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref...
在 Vue3 中,有许多与响应式相关的函数,例如 toRef、toRefs、isRef、unref 等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法,让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题。 ## ref() 大家对于 ref ......
vue3 - 警告 `shallowRef` instead of `ref` - 解决
完整警告 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided b ......
vue3 动态创建ref
:ref="(el)=>setItemRef(el, 'test'+1)" const iframeRefs = {}const setItemRef = (el, key) => { if (el) { iframeRefs[key] = el }} onMounted(()=>{ const i ......
vue3 使用clipboard实现一键复制
# 安装clipboard包 ```bash npm install vue3-clipboard ``` # 在main.js中进行配置 ```js import VueClipboard from 'vue3-clipboard' const app = createApp(App) use(V ......
vue3中组件之间通信ref和$parent的用法
ref的用法: //子组件 <template> <div class="son">我是子组件{{num}}</div> </template> <script> imoprt ref from 'vue' let num = ref(100) //这里需要注意:组件内部数据对外是关闭的,如果想让外 ......
vue3中的useAttrs和 defineProps的用法
<template> <Table :data="data" v-bind="$attrs"/> </template> <script setup lang="ts"> const $attrs = useAttrs() const data = defineProps(["data"]) </s ......
vue3+vite+ts项目初始化
### 创建项目 ``` # npm 6.x npm create vite@latest my-vue-app --template vue # npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- -- ......
Vue3 + Eslint + prettier
一、背景 公司内部团队大部分由多人组成,当遇到多个前端开发同一个项目时,代码规范及代码质量,是需要考虑的一个重中之重 二、Eslint + prettier 是什么 ESLint 的主要功能包含代码格式和代码质量的校验,而 Prettier 只是代码格式的校验,不会对代码质量进行校验。 代码格式问题 ......
记录--vue3问题:如何实现微信扫码授权登录?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一、需求 微信扫码授权,如果允许授权,则登录成功,跳转到首页。 二、问题 1、微信扫码授权有几种实现方式? 2、说一下这几种实现方式的原理是什么? 3、vue中的微信扫码授权登录,与uniapp和原生小程序的微信授权登录,它们之间有共同点 ......