vue3随手记

Vue3之插槽

前言之前的文章里介绍了vue3中父传子props方法可以传递js中任意类型的数据。
heiyay·2024-01-09 11:22

Vue3.js组件通信，兄弟组件，父子、祖孙组件

在Vue.js3中，组件通信主要包括父子组件通信、兄弟组件通信以及祖孙组件通信。以下是各种情况下的常见通信方式：1.父子组件通信：1.1Props传递数据：父组件通过props向子组件传递数据：importChildfrom'./Child.vue';exportdefault{data(){return{parentMessage:'HellofromParent!'};},components
heiyay·2024-01-09 11:22

vue3 封装一个按钮组件（可自定义按钮样式）

效果图鼠标悬浮有对应的文字提示，且图标出现背景色和颜色实现目前提供五个固定样式的图标及三个用户自定义的图标，可根据需要补充组件代码import{onMounted,PropType,reactive,ref,watch}from'vue'importTooltipfrom'@/components/Tooltip/src/Tooltip.vue'import{useI18n}from'vue-i1
～Serendipity～·2024-01-09 11:20

vue3 封裝一个常用固定按钮组件（添加、上传、下载、删除）

效果图这个组件只有四个按钮，添加，上传、下载、删除，其中删除按钮的颜色默认是灰色，当表格有数据选中时再变成红色实现组件代码import{Icon}from'@/components/Icon/index'import{useI18n}from'@/hooks/web/useI18n'const{t}=useI18n()defineProps({addBtnShow:{type:Boolean,de
～Serendipity～·2024-01-09 11:50

vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别

Vue3.0引入了CompositionAPI，这是对Vue2.0中使用的OptionsAPI的一个补充。
无妄的罪·2024-01-09 11:46

vue3 封装一个Tooltip 文字提示组件

效果图默认展示icon图标，悬浮展示文字如果slot有内容则展示对应内容实现用的是El-Tooltip组件Element-Theworld'smostpopularVueUIframework组件代码import{Icon}from'@/components/Icon'import{ElTooltip}from'element-plus'import{PropType}from'vue'typeP
～Serendipity～·2024-01-09 11:16

Vue3 依赖注入Provide / Inject

Provide/Injectprovide可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用inject来接收provide提供的数据或方法,如果传递普通的值是不具有响应式的需要通过refreactive添加响应式使用场景：当父组件有很多数据需要分发给其子代组件的时候，就可以使用provide和inject父组件爷级：importAfrom'./compon
是小张呀！·2024-01-09 09:36

vue3 依赖注入Provide / Inject

Provide/Inject：在我学习依赖注入之前，一般父组件传给孙组件一般是通过prop一层一层的传递，这样的嵌套就会相对繁琐，Provide/Inject：就很好的解决了这一问题。先看效果：这里我定义了三个组件，index.vue作为爷爷级别的组件，Aview作为儿子级别的组件，Bview作为孙子级别的组件。在index.vue定义颜色，用provide抛出去，在子组件和孙组件中用Inject
五分钱嘀Love·2024-01-09 09:05

Vue3-44-Pinia- 安装步骤

介绍本文介绍在vue3中安装Pinia的步骤安装步骤1、npm安装npminstallpinia》安装完成后可以看到package.json中添加了pinia的依赖信息2、main.ts中配置//引入vue
NorthCastle·2024-01-09 09:27

Vue3-42-组件-给组件指定名称 + defineOptions 函数的简单使用

下面就是本文要介绍的解决方案：解决方案一在vue3中，提供了一个defineOprions方法，此方法可以帮助我们配置组件的选项式属
NorthCastle·2024-01-09 09:57

Vue3-43-组件- 组件状态保持 KeepAlive 的简单使用

作用说明一个应用场景：当我们在进行路由跳转的时候，会用到来作为组件渲染的出口，此时，组件的状态是不会被保持的。比如：当前在【组件A】中有一个响应式状态num的值通过自加的方式从初始值0变成了100；然后跳转到【组件B】，再次跳转回到【组件A】的时候，num的值会恢复为初始值0。如何实现回到【组件A】的时候，仍然保持num的数据状态为100呢？这就是本文要介绍的KeepAlive组件的作用。它就是用
NorthCastle·2024-01-09 09:20

使用vscode开发小程序项目

使用vscode开发uni-app这里的创建使用用vue3+ts版本，如过是vue2，具体可参考官网命令uni-app官网首先创建uni-app`npxdegitdcloudio/uni-preset-vue
小夏同学呀·2024-01-09 09:34

解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题

目录前言问题概述解决方案1.创建树形表格2.实现全选功能3.实现多选功能4.实现子节点勾选5.实现父节点勾选总结前言作者简介：懒大王敲代码，计算机专业应届生今天给大家聊聊解决Vue3+ElementPlus
懒大王敲代码·2024-01-09 08:43

毕业设计：Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前言

一、项目介绍资源链接：https://download.csdn.net/download/m0_46573428/87796553前言：毕业设计：Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用
人工智能技术小白修炼手册·2024-01-09 08:34

Js使用ffmpeg在视频中合成音频背景音乐

注意:以下所有的使用案例均基于vue3setup。同时由于@ffmpeg版本不同会导致使用的api不同，使用案例前需要注意@ffmpeg版本问题。
Raccom·2024-01-09 08:41

vue3 img图片怎么渲染

在Vue3中加载图片（img）src地址时，出现无法加载问题。
SailingCoder·2024-01-09 07:53

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户信息修改实现

锋哥原创的uniapp微信小程序投票系统实战：uniapp微信小程序投票系统实战课程(SpringBoot2+vue3.2+elementplus)(火爆连载更新中...)
java1234_小锋·2024-01-09 07:20

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -个人中心页面搭建实现

锋哥原创的uniapp微信小程序投票系统实战：uniapp微信小程序投票系统实战课程(SpringBoot2+vue3.2+elementplus)(火爆连载更新中...)
java1234_小锋·2024-01-09 07:19

ant design vue3.2.9 Table可拖拽行

antdesignvue3.2.9Table可拖拽行向上向下exportdefaultdefineComponent({setup(props,context){consthpo=reactive({columns
码到头秃还不会·2024-01-09 07:49

Vue2和Vue3的区别

1.生命周期vue2(左）和vue3（右）创建前：BeforeCreate-----data和methods中的数据都没有初始化创建后：Created-----实例创建完成（vue3将BeforeCreate
胆小小鬼·2024-01-09 07:15

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票创建页面实现

锋哥原创的uniapp微信小程序投票系统实战：uniapp微信小程序投票系统实战课程(SpringBoot2+vue3.2+elementplus)(火爆连载更新中...)
java1234_小锋·2024-01-09 07:44

vue3利用自定义事件和v-model实现父子传参

一、父组件利用v-model向子组件传递参数1、父组件//引入子组件importtanfrom'@/components/index/tan.vue'import{ref}from'vue'constpopupShow=ref('11')//v-model:popupShow="popupShow"自定义语法糖名称//@changTxt='changText'自定义事件2、子组件接参数import
啊～哈·2024-01-09 07:02

【Vue3】2-5 : 指令系统与事件方法及传参处理

本书目录：点击进入一、标签属性中的使用-指令系统1.1那么模板语法是否可以在标签属性中进行使用呢?▶当然可以：使用指令系统二、指令系统2.1v-bind2.2v-on三、实战3.1methods选项3.2$event语法一、标签属性中的使用-指令系统1.1那么模板语法是否可以在标签属性中进行使用呢?▶当然可以：使用指令系统二、指令系统2.1v-bind作用：属性绑定，如v-bind:id="dyn
ladymorgana·2024-01-09 07:31

Vue.js设计与实现阅读2

5错误处理1、前言上一篇我们了解到了命令式和声明式的区别，前者关注过程，后者关注结果了解了虚拟dom存在的意义，使找出差异这个过程消耗的性能最小化学习了进行时、编译时、编译时+进行时的特点，初步知道了vue3
gxgalaxy·2024-01-09 07:59

手把手教你如何使用SpringBoot3打造一个个性化的代码生成器

自定义代码生成器代码基于SpringBoot3、Vue3、highlight实现自定义代码生成功能SpringBoot3.x、MySQL8、MyBatisPlus3.5.x、velocity2.x、SpringSecurity6
.陌路·2024-01-09 06:29

vue3 中进行数据监听来执行异步操作

在vue3中数据监听的写法中，是不能直接进行异步操作的，如果我们想要执行的方法是基于上一个操作完成之后再触发时，那么可以进行这样的书写方式watch(()=>变量名,()=>{//asyncawait
前端小臻·2024-01-09 05:30

可能会帮助你vue2，vue3组件参数获取不到的情况（组件element 数据加载不上）

起因可能会引发的事故如下，在多级组件的引用下，子组件的数据在{{}}内可以引用成功但是加载到elementui中的话，就会丢失甚至是白屏。我在尝试生命周期中onbeforemount和onmounted两个生命周期函数，发现在这两个生命周期中没有获取到想要的数据，但是数据的处理是在onmounted里面成功调用了的，然后我使用watch监听，以及async和await来执行操作数据处理发现都没有解
前端小臻·2024-01-09 05:26

uniapp z-paging简单使用——笔记

支持虚拟列表，支持nvue、vue3-DCloud插件市场使用搜索{{item}}这
前端榴脆骨·2024-01-09 05:23

Vue3---安装路由

介绍在Vue3项目中安装路由示例第一步：执行npm命令安装路由npminstallvue-router@4第二步：在项目的src文件夹下创建router子文件夹第三步：创建index.js和routes.js
牧小七·2024-01-09 04:25

Vue3项目安装Element Plus

介绍使用npm在Vue3项目安装ElementPlus示例第一步：执行npm安装命令npminstallelement-plus--save第二步：引入ElementPlus，此处使用的完整引入importElementPlusfrom'element-plus'import'element-plus
牧小七·2024-01-09 04:55

Vue3项目安装ElementPlus图标

介绍在Vue3项目进行安装ElementPlus图标示例第一步：执行npm命令安装依赖npminstall@element-plus/icons-vue第二步：注册所有图标//main.ts//如果您正在使用
牧小七·2024-01-09 04:55

ElementPlus设置中文

介绍在Vue3项目将ElementPlus切换为中文示例第一步：引入中文文件importzhCnfrom'element-plus/dist/locale/zh-cn.mjs'第二步：设置中文app.use
牧小七·2024-01-09 04:23

VUE3打包build 报错

错误一解决方法打开package.json包将下面部分修改"dev":"vite","build":"vitebuild","preview":"vitepreview",然后打包错误二打包后，我得又报错，这个错误通常是因为您的目标环境不支持顶级await语法。在默认情况下，Node.js版本低于v14.8.0和某些浏览器（如Safari）不支持此功能。解决：安装插件npminstallvite-
墨_风·2024-01-09 04:21

升级 Vite 5 出现警告 The CJS build of Vite‘s Node API is deprecated.

作者主页：有来技术开源项目：youlai-mallvue3-element-adminyoulai-boot仓库主页：GiteeGithubGitCode欢迎点赞收藏⭐留言如有错误敬请纠正！
有来技术·2024-01-09 04:50

vue3,配置scss文件自动导入

import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//elementuiplus配置importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-
越来越好的月·2024-01-09 03:05

eslint配置.eslintrc.cjs

/*eslint-envnode*/module.exports={root:true,'extends':['plugin:vue/vue3-essential','eslint:recommended
越来越好的月·2024-01-09 03:04

vue3配置项目路由

1.一级路由切换原则，页面整体切换一级路由2.先创建一级路由对应的组件3.router/index.jsimport{createRouter,createWebHistory}from'vue-router'//1.createRouter创建路由实例//2.createWebHistory创建history模式的路由importLoginfrom'@/views/Login/index.vue
越来越好的月·2024-01-09 03:04

54 记账

尤其在昨晚看了挖财手记里的文章之后，越发发现，关于记账理财，我知道的还是太少了……收集到随手记是不错的记账app,其实之前用过一段时间挖财而后没在坚持，现在恢复这种意识。且先从记账开始吧。
五月成长笔记·2024-01-09 01:58

Vue3项目中在线编辑组件，codemirror-editor-vue3

#安装npminstallcodemirror-editor-vue3[email protected]#组件中使用保存-->import{ref,reactive,onMounted,onUnmounted
张不大了·2024-01-09 01:05

vue3创建项目及基础配置

webstorm编辑器创建项目打开编辑器，点击左上角File—New—Project，点击1，选择储存的文件夹（此处为D盘），点击2，输入3，点击OK，选中刚刚创建的文件夹，点击OK，点击create安装vue3
沐笙959·2024-01-09 01:34

Vue3 实现麦克风实时音量检测

文章目录1前言2功能实现2.1新建vumeter.js2.2新建useVolume.ts2.3新增音量检测展示容器1前言本文基于Vue3+TypeScript实现实时音量检测，其他语言可修改相应写法2功能实现
YanaDH·2024-01-09 01:04

vue+vite项目在开发时报错：Internal server error: EISDIR: illegal operation on a directory, read

在学习vue项目时，刚开始搭建就遇到了一个问题我是通过npminitvue@latest创建vue3项目时，建立路由时报错错误如下：[vite]Internalservererror:EISDIR:illegaloperationonadirectory
qq_43710066·2024-01-09 01:01

Vue3 中使用 AudioWorklet 获取麦克风音量

Vue3中使用AudioWorklet获取麦克风音量最近公司在开发音视频项目，其中有个功能是用户监测麦克风讲话是否有波动；于是从各种技术网站想找关于Vue3的示例项目想着借鉴一番，但是功夫不负有心人，没有找到
济宁、皮皮·2024-01-09 01:30

vue3的撤销与重做

前言一个低代码项目遇到的撤销重做功能，基于vue3实现。
清缓存试试·2024-01-09 01:27

vue3使用router + axios

一、router1、router加载依赖npminstallvue-router@4@4是版本号也可以@5等有的以上版本2、创建router相关js文件并写入类容import{createRouter,createWebHistory}from'vue-router'constrouter=[{path:'/',name:'login',componen:()=>import('@/pages/l
呵呵 哒·2024-01-09 01:26

Vue3异步请到后台数据时在渲染时页面不显示或者页面没有数据的问题

页面数据打印是有的证明接口已经获取了数据。reactive()应该是响应式实时更新数据的但是打印有数据但是页面没有渲染，只有用push()方法添加到数据中现在页面已经渲染数据
呵呵 哒·2024-01-09 01:26

Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

在vue2中ref被用来获取对应的子元素，然后调用子元素内部的方法。123456789101112131415161718//导入子组件importTestComponentfrom'./TestComponent'exportdefault{components:{TestComponent},mounted(){//调用子组件方法this.$refs.TestComponent.show()}
呵呵 哒·2024-01-09 01:56

Vue3上传文件/文件夹/压缩包（包含拖拽实现）

Vue3+Naive-ui+Jszip+Tailwind上传文件/文件夹/压缩包（包含拖拽文件上传功能）一、前言二、案列图示三、代码1、templete部分代码2、上传文件3、上传文件夹4、上传压缩包5
Oamnij·2024-01-09 01:23

uniapp，vue3，h5端使用zxing扫描二维码，条形码

文章目录前言一、引入zxingnpm直接使用js文件二、功能实现1.获取摄像头2.开始扫描完整代码前言废话不多说，使用uniapp时scan方法不支持h5端，因此h5端需要自己引入三方库，我这里用的是zxing完整代码在最后一、引入zxing这里有两种方法，npm和直接使用js文件，按需使用npmpnpmadd@zxing/libraryimport{BrowserMultiFormatReade
charlie_y·2024-01-09 01:53

vue中的render函数

二、使用方式1.在vue2中使用2.在vue3setup中使用3.在vue3setup语法糖中使用总结前言本文主要内容是讲，什么是render函数，及render函数在vue2和vue3中的使用方式。
狮子歌歌_丶·2024-01-09 01:53
上一页 56 57 58 59 60 61 62 63 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他