Vue3组件开发

vue3入门知识点

vue2与vue3的区别1.响应式原理vue2响应式原理采用Object.defineProperties监听对象的getter与settervue3pxoy代理的方式监听对象2.启动方式在main.js
眼缘丶·2024-09-11 23:14

VUE3学习 第五章 Teleport传送组件、keep-alive缓存组件、transition动画组件、transition-group过度、依赖注入Provide/Inject、兄弟组件Mitt

一、Teleport传送组件TeleportVue3.0新特性之一。
Hyman-ya·2024-09-11 22:37

Vue3 全文知识点

vue全文知识点vue3学习1关于项目初始化2vue3语法setup3vue3语法和vue2语法兼容4setup语法糖5响应式数据-基础6响应式数据-ref定义对象类型数据6toRef，toRefs将多个非响应式数据转变为响应式数据
清风ꦿ·2024-09-11 21:34

Vue3+TypeScript从入门到精通系列之：类多态

Vue3+TypeScript从入门到精通系列之：类多态一、TypeScript类多态代码二、TypeScript的类多态转化为JS代码三、查看js输出一、TypeScript类多态代码(()=>{//
快乐骑行^_^·2024-09-11 20:50

vue3.0父子组件的通信

vue3.0父子组件的通信Vue3.0组件通信Vue3.0组件通信vue3.0脚手架setup内部的组件通信1、父到子通过props父组件import{defineComponent,reactive}
勤奋的代码搬运工·2024-09-11 19:19

Vue3.0中常用的通信方式

1.父传子（Props）：父组件通过props向子组件传递数据。父组件：importChildComponentfrom'./ChildComponent.vue';exportdefault{data(){return{messageFromParent:'HellofromParent',};},components:{ChildComponent,},};子组件：{{message}}exp
CV__工程师·2024-09-11 19:47

二、vue3.0之组件通信之父子通信

在vue3.0中我们应该怎么去做组件通信呢？
arguments_zd·2024-09-11 19:45

vue3封装城市联动组件

一.准备1.axios利用axios发送请求，拿到全部城市数据。在项目根目录下打开任意终端，执行yarnaddaxios命令。项目中需要发送请求统一统一放在src/api/index.js。importaxiosfrom'axios'//获取城市数据//1.数据在哪里？https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area
yang295242361·2024-09-11 15:51

vue3项目中使用 vue-i18n国际化插件，实现多语言效果

**i18来源：**国际化的英文单词internationalization太长了，掐头去尾取首字母i和尾字母n，中间刚好还有18个字母，就缩写为了i18n。安装直接下载/CDNnpm/yarn安装npminstallvue-i18n//oryarnaddvue-i18n基本使用创建语言包在项目中创建一个locales目录，用于存放不同语言版本的翻译文件。例如，可以在locales目录下创建en.
回忆哆啦没有A梦·2024-09-11 15:48

记录一些vue3的知识（未完）

mounted(vue2)在Vue2的组件中，mounted钩子用于执行那些需要在组件实例挂载到DOM之后运行的代码，这通常包括DOM操作、数据请求等onMounted(vue3)Vue2：使用mounted
a605536834·2024-09-11 14:09

vue3 什么是Composition API 我为什么要使用它？

CompositionAPI（组合式API）是Vue3中引入的一组全新的API，旨在提供一种更加灵活和可组合的方式来组织和复用组件逻辑。
软件技术NINI·2024-09-11 13:36

Vue3异步请求的最佳实践：async/await 与 Promise.then()，Vue3请求接口数据，以及TypeScript中的泛型和任意类型（Vue3请求API，TS中的T 和 any）

前言在Vue3开发中，异步请求是非常常见的操作，特别是在与后端API交互时。虽然Vue.js自带了一些对异步数据的处理方式，但合理使用异步操作是确保应用顺畅运行的关键。
北城笑笑·2024-09-11 11:17

Vue3生命周期钩子函数

一、Vue3中的生命周期1、setup():开始创建组件之前，在beforeCreate和created之前执行，创建的是data和method2、onBeforeMount():组件挂载到节点上之前执行的函数
说好不emo·2024-09-11 09:37

vue如何实现路由缓存

（以下示例皆是以vue3+vite+ts项目为例）场景一：所有路由都可以进行缓存在渲染路由视图对应的页面进行缓存设置，代码如下：：用来渲染当前路由对应的视图。
大宁宁吖·2024-09-11 00:59

.NetCore+vue3上传图片 Multipart body length limit 16384 exceeded.

实现目标。点击图片上传头像效果图前端部分图片上传关键代码更换头像上传js部分import{ref,reactive,onMounted}from"vue";import{uploadAvatar}from"../../api/auth";import{ElMessage}from"element-plus";exportdefault{setup(){constfit=ref("cover");c
鱼是一只鱼啊·2024-09-10 13:43

vue3知识总结

Vue3是Vue.js的最新版本，相较于Vue2，它在性能、API设计、类型支持等多个方面都有显著的改进和创新。
软件技术NINI·2024-09-10 07:32

Vue2组件间通信的14种方式详解

（本篇以Vue2为主，Vue3在写啦）开始（引用一张举例图，全文依据下图关系进行举例说明）A组件==1.props/$emit//父向子传值importaaafrom'.
SqCheese·2024-09-10 02:32

vue3+tesseract 图片文字提取

github:https://github.com/naptha/tesseract.js可实现多语言识别，中英文混合识别demo如下：importTesseractfrom"tesseract.js"//方式1：Tesseract.recognize('http://localhost:5173/vue.jpg','eng+chi_sim',).then((d)=>{console.log(d.
妙明元心·2024-09-10 01:55

vue3 watch监听响应式数组失效问题

constpageData=reactive({checkedNodeList:[]})constcolspanDisabled=ref(false);watch(()=>{returnpageData.checkedNodeList},(newValue,oldValue)=>{if(newValue.length>0){colspanDisabled.value=true;}else{cols
妙明元心·2024-09-10 01:55

vue3 el-menu 菜单Maximum recursive updates exceeded 报错

vue3用el-menu实现管理后台左侧菜单，报Uncaught(inpromise)Maximumrecursiveupdatesexceededincomponent.Thismeansyouhaveareactiveeffectthatismutatingitsowndependenciesandthusrecursivelytriggeringitself.Possiblesourcesi
supming1·2024-09-09 21:48

Django5+Vue3:OA系统前后端分离项目实战-后端登录功能实现(7)

Django5+Vue3系列文章前言本节开始，全文仅对会员开放。若点赞和收藏数量超过100，全文将免费开放。此项目采用Django框架的5.0.7版本进行开发。
Fender的web学习路程·2024-09-09 17:48

vue3使用simple-mind-map，分分钟开发思维导图

感觉很复杂的样子，这种很牛p的东西应该不是我三两天就能手写搞定的，于是我github转了一圈，果然不出我所料，对比了几个插件以后我是先选择了vue3-mindmap简单易用。
码农九零·2024-09-09 09:55

java版本ERP管理系统源码 Spring Cloud alibaba Spring Boot MybatisPlus Redis VUE3 ElementUI 微服务

该系统充分利用了SpringCloudAlibaba、SpringBoot、MybatisPlus、Redis等先进技术栈，并结合前端框架VUE3和ElementUI，构建了一个功能丰富、性能
m0_66404702·2024-09-09 02:09

vue3+ant design vue实现表格导出（后端返回文件流类型导出）

1、之前的博客介绍了，依据页面展示的table表格数据为基础展示表格导出，今天介绍下后端返回文件流来实现表格导出。导出import{ExportTheEmployeesTab}from'@/api/import';//导出import{downExcelUrl}from'@/utils/downloadFile';constsearchRef=ref();constexportData1=()=>
炒毛豆·2024-09-09 02:09

DataV的安装与使用（Vue3版本）

1、DataV(vue3)地址：DataVVue3+TS+Vite版|DataV-Vue32、使用npminstall@kjgl77/datav-vue3安装3、全局引入。4、此时就可以按需使用了~
炒毛豆·2024-09-09 02:39

Vue3+vite打包配置及部分打包优化~

这里介绍的是vite项目的打包配置，若想了解webpack打包配置可看我的其他博客。（下面来介绍下vite打包配置的步骤）1、步骤一：配置base。(为什么需要配置base？这里配置base主要是修改根路径，一般我们在开发环境中引用静态资源可能使用的是绝对路径，但是一旦打包部署到服务器上后可能会报404,无法正确的获取的资源。)//在vite.config.ts中import{defineConf
炒毛豆·2024-09-09 02:39

vue3中发请求配置{ isGetDataDirectly: false }属性的作用~

1、{isGetDataDirectly:false}的作用：设置不直接获取数据。2、代码示例：letbaseURL='/api';exportconstgetEmployeeTab=(params)=>{returnrequest({url:`${baseURL}/staff-tag/query-tag`,method:'GET',params,},//设置不直接获取数据{isGetDataDi
炒毛豆·2024-09-09 02:39

【vue3】钩子函数详细介绍

1、setup()这不是一个传统的钩子函数，但它是最主要的入口点，其为我们使用Vue3的CompositionAPI新特性提供了统一的入口，用于初始化组件的状态和定义组合逻辑。
纳米小川·2024-09-09 01:31

前端引入ffmepg 对视频画矩形贴图

业务场景：和后端联调中视频监控需要把人员位置框出，返回的后端只给视频和框选位置先上效果图成功给视频添加了两个框demo技术框架vue3+vite+typeScript引入ffmepgnpmi@ffmpeg
全赣州最老实的男人guoy·2024-09-08 22:09

解决Vue 2.0 安装 vue-router 不成功问题

报错信息：vue解决办法：这是因为npmivue-router默认下载的是vue3.0版本对应的，这里需要指定下载版本[email protected]
什么都是已存在·2024-09-08 21:32

VitePress 布局插槽使用指南

VitePress是一款基于Vite和Vue3的静态网站生成器，专为文档编写而设计。VitePress的默认主题提供了丰富的布局插槽，允许开发者在页面的特定位置注入自定义内容。
软考鸭·2024-09-08 14:47

Module “console“ has been externalized for browser compatibility.

1.问题描述Vue3.5.3中import{error}from"console";出现以下错误__vite-browser-external:console:3UncaughtError:Module"console"hasbeenexternalizedforbrowsercompatibility.Cannotaccess"console.error"inclientcode
NavinCodeSpace·2024-09-08 14:46

vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint

server:{port:3300,cors:true,proxy:{}},build:{outDir:path.resolve(__dirname,‘…/dist’)}})#####第四步安装eslint-parser（ESLint解析器）pnpmadd@babel/core-D//某些代码需要调用Babel的API进行转码，就要使用@babel/core模块。pnpmadd@babel/esl
2401_84446882·2024-09-08 10:51

vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint(2)

build:{outDir:path.resolve(__dirname,‘…/dist’)}})#####第四步安装eslint-parser（ESLint解析器）pnpmadd@babel/core-D//某些代码需要调用Babel的API进行转码，就要使用@babel/core模块。pnpmadd@babel/eslint-parser@latest-D#####第五步安装prettier(
2401_84446882·2024-09-08 10:21

vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint(1)

第三步安装vite-plugin-eslint//该包是用于配置vite运行的时候自动检测eslint规范，不符合页面会报错pnpmaddvite-plugin-eslint@latest-D//安装最新版eslint-plugin-vuepnpmaddeslint-plugin-vue@latest-D配置vite.config.jsimport{defineConfig}from'vite'i
2401_84446882·2024-09-08 10:21

花十分钟将vue3前端项目一步一步自动化部署到linux的docker上

要编写与ASM兼容的代码，开发人员需要使用UserIdService中的takeUserId()函数来确定OCC调用中使用的userId。这通常在一个服务中完成，该服务调度一个在有效负载中包含userId的Action.在Spartacus官方支持ASM场景之前，在代表经过身份验证的用户发送的请求中，OCCuserId是特殊的currentOCC用户，由OCC_USER_ID_CURRENT常量表
东方睡衣·2024-09-08 10:15

vue3找不到模块“element-plus”或其相应的类型说明

假设你npminstallelement-plus，之后项目已经有了模块，但是引入的时候说找不到但是在package.json已经有了解决办法：在src文件夹下创建一个文件，可以自定义名字，但是后缀是.d.ts将你没有的模块导入进来
拿铁不拿铁·2024-09-08 07:29

微信小程序uniappvue3版本-控制tabbar某一个的显示与隐藏

1.首先在pages.json中配置tabbar信息2.在代码根目录下添加tabBar代码文件直接把微信小程序文档里面的四个文件复制到自己项目中就可以了3.根据自己的需求更改index.js文件首先我这里需要判断什么时候隐藏某一个元素，需要引入接口然后在切换tabbar时，改变tabbar当前点击的元素importgetListfrom'../api/kdh'Component({data:{}.
牛奶皮子·2024-09-08 07:23

Vue3+elementplus实现图片上传下载（最强实践）

图片上传子组件：实现照片的上传，预览，以及转成以逗号隔开的图片地址，即时监听，并发送消息到父组件。Loading...import{computed,ref,watch}from'vue';import{upload}from'@/api/file'import{ElMessage}from'element-plus'importemitterfrom'@/utils/emitter'//上传文件
J不A秃V头A·2024-09-08 06:17

VitePress 自定义 CSS 指南

VitePress是一款基于Vite和Vue3的静态网站生成器，专为文档编写而设计。尽管VitePress提供了丰富的默认主题，但在某些情况下，我们可能需要对其进行更深入的定制以满足特定的视觉需求。
软考鸭·2024-09-08 00:36

Vue3 + vite + antd2 vite.config.js及SyntaxError: The requested module ‘/node_modules/.vite/ant-design

项目中使用Vue3+vite+antdv2.x的vite.config.js配置文件，复制粘贴即可使用！
咏春-迪迦·2024-09-07 19:05

解决vite打包出现 “default“ is not exported by “node_modules/...问题

项目场景：uniapp+vue3+ts+vite问题描述：场景很多，下面只是一种//codemirror编辑器的相关资源importCodemirrorfrom'codemirror';errorduringbuild
司徒小北·2024-09-07 19:29

Pinia+Vue3使用案例及Pinia持久化存储

为什么要使用PiniaPinia是Vue的一个存储库，它允许你跨组件/页面共享状态。如果你熟悉CompositionAPI，你可能会认为你已经可以通过一个简单的导出conststate=reactive({})来共享一个全局状态。这对于单页应用程序是正确的，但如果是服务器端呈现，则会暴露应用程序的安全漏洞。但即使是在小的单页应用程序中，你也可以通过使用Pinia获得很多:热模块替换修改存储而无需重
m0_67401228·2024-09-07 17:52

前端面试遇到的问题记录（实习）

一、vue2和vue3的区别Vue2和Vue3之间存在一些重要的区别，这些差异主要体现在架构、API、性能优化和开发体验等方面。
为什么没有实习·2024-09-07 17:19

vue3和vue2的双向绑定原理

在Vue2和Vue3中，双向绑定的实现原理有所不同。
m0_73882020·2024-09-07 10:57

vue3+vite+electron开发桌面端应用流程

一、创建项目初始化项目:npminitvite@latest'projectname:输入项目名称，selectaframework:选择框架vueselectavariant：选择使用js或者ts安装默认依赖包:进入项目，npminstall安装electron:npminstall--save-develectron安装热加载(自动加载更新):npminstallelectron-reload
沪cares·2024-09-07 09:21

vue3中provide和inject使用。

在Vue3中，provide和injectAPI是一种非常强大的功能，用于在组件层级之间传递数据，特别是在处理深层嵌套组件时非常有用。
gxw_viva·2024-09-07 08:43

Vue 3 中 provide 和 inject 高级用法与最佳实践

《Vue3中provide和inject高级用法与最佳实践》一、基本概念二、高级用法（一）提供函数（二）响应式数据（三）多值提供三、最佳实践（一）封装通用服务（二）避免过度依赖（三）命名规范（四）结合Vuex
暖阳浅笑-嘿·2024-09-07 07:12

Vue 3 中的 provide 和 inject 跨组件通讯

在Vue3中，provide和inject的使用方式略有不同，但依然提供了强大的功能来实现跨组件通信。1.祖先组件提供数据在祖先组件中使用provide提供数据。
u010373106·2024-09-07 06:03

vue3，贪吃蛇

得分:{{score}}速度:{{speed}}游戏暂停按空格键开始/暂停重新开始import{ref,reactive,onMounted,toRefs,watch,computed,onUnmounted,}from"vue";/***@param{value}0-空格子1-蛇蛇2-食物*@param{ROW}行数*@param{COL}列数*@param{direction}蛇蛇移动方向0-
har01d·2024-09-07 04:20
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他