vue3随手记第50页

vue3+elementPlus table里添加输入框并提交校验

Submitimport{ref,reactive}from'vue'importtype{FormInstance}from'element-plus'letinfo:any=reactive({data:[{id:0,name:'',role:''},{id:1,name:'',role:''}]})constformRules=reactive({name:[{required:true,m

wz990223·2024-01-16 17:09

vue3自定义指令

下面是一个使用Vue3的自定义指令的示例代码：import{createApp,DirectiveBinding}from'vue';constapp=createApp({});//自定义指令：点击外部关闭弹窗

我爱学习yq·2024-01-16 16:08

C# MVC 结合 VUE3 的进阶使用

引言C#MVC是一种常用的服务器端技术，而VUE3是一种流行的客户端JavaScript框架。结合两者可以实现强大的前后端分离的应用程序。

EternalDreamer·2024-01-16 16:13

开箱即用的开源工作流

官网地址：https://www.cxygzl.com演示地址：https://pro.cxygzl.com技术架构前端：Vue3+ElementP

CXYGZL小哥·2024-01-16 16:42

关于vue3中响应式依赖注入provide/inject

关于#vue3中响应式依赖注入场景：适合单组件（多层嵌套组件），解决父组件的响应式数据能够传递给所有子组件（包括孙子组件及以下）优点：数据同步更新，并同步渲染视图，耦合逻辑处理更容易处理，更好的开发体验

浪里小韭菜·2024-01-16 16:36

Vue2使用setup、ref、reactive等Vue3的组合式@vue/composition-api、vuex-composition-helpers

有些同学想在当前项目中体验Vue3组合式api，setup、ref、reactive等，而且一步就可以升级到Vue3，但是vue确实2.x版本，不改变当前版本怎么办呢？

浪里小韭菜·2024-01-16 16:06

Vue3使用tinymce的配置和坑

一、安装依赖下载安装依赖yarnaddtinymce-S;yarnadd@tinymce/tinymce-vue-S;下载中文语言包和静态文件2.1这一步网上都有，直接去官网下载语言包，将文件放在public/tinymce/langs中，这样打包后静态文件会被复制到打包后的目录中2.2还可以添加主题UI等样式，public/tinymce/skins，可以在github找一些相关项目复制下来，可

浪里小韭菜·2024-01-16 16:05

「Vue3面试系列」Vue 3.0中如果想实现一个 Modal组件应该怎么设计？

文章目录一、组件设计二、需求分析三、实现流程目录结构组件内容实现API形式事件处理其他完善一、组件设计组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可这样，下次开发相同界面程序时就可以写更

itpeilibo·2024-01-16 16:56

vue3+typescript+electron+NodeSerialport开发环境搭建

由于现在网上的教程文档使用的版本还有发布时间过于久远，前端技术更新较快，所以有了这一篇开发环境搭建目录安装node.js安装vue-cli创建一个vue项目vue项目集成electron安装NodeSerialport的准备工作安装node-gyp安装python安装C++环境安装NodeSerialport安装node.jsnode官网网址点击进入node官网网址，下载16.13.0LTS长期支

Havoc_Z·2024-01-16 15:41

react18初学者实用方法

从VUE3突然使用React，虽然知道要做什么，但却不知道怎么使用React编写，现在已经很熟练的使用了，总结几个比较实用的给初学者；放心学习没副作用；鼠标双击input搜索代码高亮'+searchText.current

web前端进阶者·2024-01-16 14:55

vite4加react18加ts-hooks学习篇

vite4加react18加ts-安装篇；最近从vue3转型学习了，react相关技术架构，去有意识的去学习了相关东西，内容比较实用，没有引入太多原理和概念，就是最直接最实用的记录下来；react项目中版本

web前端进阶者·2024-01-16 14:54

IntelliJ IDEA快捷键和重要设置、vscode快捷键和使用

文章目录IntelliJIDEAIDEA快捷键：重要设置：linux远程连接：SSH连接：浏览远程主机：VScodevscode快捷键：vscode插键vue3必安插件注意IntelliJIDEA感觉百度百科就给了这个软件很好的定义

PBitW·2024-01-16 14:07

Vue响应式原理

前言の前言：写得极其不通顺，只是快速做个零碎总结，后续会不断润色vue2与vue3在实现上的区别vue2实现数据劫持使用的是Object.defineProperty,Vue3使用的是Proxy共同需要解决的问题响应式的对象响应式的数组看看

_royalpioneer·2024-01-16 13:01

Vue3技术解析（小册子）

随着Vue3正式版本的发布，未来Vue3将会成为前端的主流框架，这个毋庸置疑。Vue3在使用方面会兼容部分Vue2.x的特性，比如optionsAPI。

前端组件开发·2024-01-16 13:35

Vue3_循环数组v-for中使用refs

解决方法参考来源1.使用背景我在swipe循环的时候，想要获取当前所展示内容的前一个和后一个进行操作。由于vue的版本是3.0，官方文档中曾给出这样的使用实例，将被循环元素动态绑定一个方法，将所获取到的值放在数组中，代码如下：代码简化，只展示有关内容setup(){constmyRefs=ref([])asRefconstswipeRef=(el:any):any=>{myRefs.value.p

fighting Ably!·2024-01-16 12:11

vue3 实现锚点定位

点击导航跳到对应模块的起始位置注意：一定要明确哪个是要滚动的盒子；滚动的高度要减去导航栏的高度；核心jsconstscrollToAnchor=(id)=>{varanchor=document.getElementById(id);varscrollBox=document.getElementById('scrollBox')nextTick(()=>{scrollBox.scrollTo({

易de·2024-01-16 12:40

vue3 锚点定位点击滚动高亮

功能描述点击导航跳到对应模块的起始位置，并且高亮点击的导航；滚动到相应的模块时，对应的导航也自动高亮；效果展示注意事项一定要明确哪个是要滚动的盒子；滚动的高度要减去导航栏的高度；当前在导航1，点击导航4时，会出现导航2、导航3和导航4依次高亮的现象，定义变量判断当前为点击时不监听滚动事件即可；isScroll.value=false核心代码onMounted(()=>{nextTick(()=>{

易de·2024-01-16 12:36

vue3和vite双向加持，uni-app性能再次提升

uni-app对vue3&Vite的升级，是一个渐进式过程：2020年9月：小程序平台支持vue3开发，小程序平台编译器依然使用webpack；2021年5月：H5平台支持vue3开发，H5平台编译器升级为

邵张散人·2024-01-16 12:55

vue3 defineModel

1vue3中的双向绑定//Parent.vue因此，在Child组件中，需要定义一个名为modelValue的prop，如果需要修改modelValue，需要定义一个名为update:modelValue

无心使然云中漫步·2024-01-16 11:04

vue3+tauri 创建多开窗口桌面应用

最近一直在体验Tarui结合Vue3开发桌面端exe应用。之前也开发了几个Electron桌面应用。相较于Electron构建慢、打包后程序体积大，Tauri构建的程序则具有更小、更快、更安全的优势。

xiaoyan_2018·2024-01-16 11:20

Tauri+Vite+Vue3创建项目步骤

1、按照官网文档创建tauri项目npmcreatetauri-app然后按顺序填：1、项目名称：2、选择你的packagemanager3、选择你的前端框架然后再一步一步执行下面命令cd刚才创建的项目名称npminstallnpmruntauridev然后出现第一次可能没有反应（或者需要=很久才有反应），ctrl+c退出，然后重新npmruntauridev。这个时候就可以桌面程序dev了第一次

豪先生5·2024-01-16 11:20

五一随手记

想像一下：有一天，变得，肤白貌美又高又瘦又有钱又有闲。从此，人生，就像开了挂一样……哈哈（自娱自乐），竟如此美好！五一是个特别的日子那一年的五一，我最美的年纪，出嫁了自己。那一年的自己，了解他的，只是微不足道的讯息。从那个五一起，开始描绘画江湖奔波的轨迹……又一个五一，只为取悦自己，我不倾倾，谁当倾倾?生活不易，不过是日升日落。我只是想，无烦无恼，做回干干净净的自己。修心的路上，无它，纯粹的爱上自

Scorpiogirl·2024-01-16 11:19

vue3 + tsrpc +mongodb 实现后台管理系统

前言之前上线了一个vue后台管理系统，有小伙伴问我有没有后端代码，咱只是个小前端，这就有点为难我了。不过不能辜负小伙伴的信任，nodejs也可以啊，废话不多说，开搞！后端采用TSRPC框架实现API接口，前端采用vue-manage-system后台管理系统框架，数据库采用mongodb。TSRPC是专为TypeScript设计的RPC框架，经千万级用户验证。适用于HTTPAPI、WebSocke

林鑫_·2024-01-16 11:43

VueCli-自定义创建项目

Pleasepickapreset:Default([Vue3]babel,eslint)Default([Vue2]babel,eslint)>Manuallyselectfeatures选自定义手动选择功

盖盖衍上·2024-01-16 10:31

uni-app

兼容mian.js的配置版本选择//#ifndefVUE3#vue2版本//#ifdefVUE3#vue3版本//页面兼容H5页&微信小程序页H5页//只会在web页显示小程序页//只会在微信小程序页显示

淼森润林·2024-01-16 10:29

十一.Vue3.x集成Typescript

安装vueaddtypescriptVue3.x集成Typescript后定义组件vue3.x中集成ts后请确保组件的script部分已将语言设置为TypeScript...要让TypeScript正确推断

小柠有点萌·2024-01-16 10:41

vue3+vite项目构建时报错npm ERR! code EPERMnpm ERR! syscall mkdir...

vscode终端中输入npmcreatevite@latestvueviteproject1----vue命令后报错具体报错如下：PSD:\project>npmcreatevite@latestvueviteproject1----vue>>npmERR!codeEPERMnpmERR!syscallmkdirnpmERR!pathD:\node\node_cache\_cacachenpmER

平平无奇 > _ <·2024-01-16 09:06

使用vite框架封装vue3插件，发布到npm

插件配置1、创建插件2、开发调试3、打包配置4、package.json文件配置上一篇文章讲述使用vite《如何使用vite框架封装一个js库，并发布npm包》封装js库，本文将讲述使用vite框架封装vue3

任磊abc·2024-01-16 09:00

Vue3 + ESLint + Prettier

Vue3+ESLint+Prettier配置规则1初始化项目新建vue-cli项目。如果已有项目，可直接跳到最后一步。①在cmd中输入如下代码，开始创建项目。

soul g·2024-01-16 09:24

【记录】vue3在v-html或js渲染html中赋值点击事件

点击事件最近再写vue3项目，有个需求在各个icon中给元素点击事件，由于我是用的gridstack，所以需要给每个gridstack的item绑定点击事件，然后通过点击事件来获取当前点击的元素。

百事可口·2024-01-16 08:50

Vue3配置代理解决跨域请求及携带Cookie问题

问题1解决：给vue3配置代理服务器，后台无需进行跨域请求配置。在vue.config.js配置文件中进行配置。

mumoing·2024-01-16 08:13

随手记

昨晚睡觉有些落枕，中午回来，小女儿要让我抱抱，我说妈妈脖子疼，她就说，我帮妈妈捶捶。然后，她就帮我捶肩膀，那小拳头力道恰好，一下一下的真的很舒服。可是，没捶够10下，她就不动了，找她哥哥去，“哥哥，你给妈妈捶背，我好累呀”

悦念风花雪月·2024-01-16 08:20

WEB 3D技术 three.js 3D贺卡(1) 搭建基本项目环境

好今天我也是在网上学的带着大家一起来做个3D贺卡首先我们要创建一个vue3的项目、先创建一个文件夹装我们的项目终端执行vuecreate项目名称例如我的名字想叫greetingCards就是vuecreategreetingcards

-耿瑞-·2024-01-16 08:55

N-139基于springboot,vue宠物领养系统

开发工具：IDEA服务器：Tomcat9.0，jdk1.8项目构建：maven数据库：mysql5.7系统分前后台，项目采用前后端分离前端技术：vue3+element-plus服务端技术：springboot

IT教程资源·2024-01-16 08:20

【Chrome 插件开发】入门

Chrome插件开发目标录屏插件仓库文件说明pure_js是原生JS版本开发（学习）vue3_js是Vue3框架版本开发（UN）Chrome插件开发教程官方基础教程！！！

Sam9029·2024-01-16 08:22

vue3-条件渲染

条件渲染v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。Vue is awesome!v-else你也可以使用v-else为v-if添加一个“else区块”。ToggleVue is awesome!Oh no 一个v-else元素必须跟在一个v-if或者v-else-if元素后面，否则它将不会被识别。v-else-ifv-else-if提供的是相应于v

王大可996·2024-01-16 07:08

uniapp+vue3面试纪要

uniapp+vue3面试纪要uniapp1.uniapp的生命周期应用生命周期onLaunch：应用程序启动时触发，仅在应用程序第一次启动时触发。

*小天屎*·2024-01-16 06:08

vue3实现列表自动滚动

2">{{index+1}}{{item.name}}{{`${formatNumber(item.quota)}%`}}2">{{index+1}}{{item.name}}{{`${formatNumber(item.quota)}%`}}//列表滚动ref绑定初始化consttimer=ref(null)consttableRef=ref(null)constmouseMend=ref(tr

irisMoon06·2024-01-16 05:01

vue3 使用antv地图：地球飞线、地图打点

constinitEarth=()=>{earthScene=newScene({id:"earth",map:newEarth({center:[154.113164,25.570667],zoom:3,//pitch:50}),});//地球模式下背景色默认为#000通过setBgColor方法我们可以设置可视化层的背景色earthScene.setBgColor("");constearth

irisMoon06·2024-01-16 05:31

vue3-Pinia

1.什么是piniaPinia是Vue的专属的最新的状态管理库，是Vuex状态管理工具的替代品1.提供了更加简单的API(去掉了mutation)2.提供符合组合式风格的API（和Vue3新语法统一）3

是老虎是狮子不是大象·2024-01-16 03:32

Vue Grid Layout

官网：VueGridLayout-️适用Vue.js的栅格布局系统哎，博客写了一半了，运行官方给的demo时结果报错了，原来还不支持vue3看了一下issues：https://github.com/jbaysolutions

无知的小菜鸡·2024-01-16 02:10

Vue2和Vue3的区别

1.性能提升：Vue3主要通过优化虚拟DOM和渲染过程来提高性能。Vue3版本的虚拟DOM比Vue2更轻量级，渲染过程也更快。Vue3还引入了编译时优化，使得代码的体积更小，加载更快。

是个车迷·2024-01-16 02:43

Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

目录前言computedwatchwatch侦听ref数据ref简单数据类型ref复杂数据类型watch侦听reactive数据前言本文介绍在vue3中的computed计算属性和watch侦听属性。

软工不秃头·2024-01-16 01:58

Web前端 ---- 【Vue3】vue3中的组件传值（props、自定义事件、全局事件总线）

目录前言props自定义事件全局事件总线安装第三方库mitt封装event-bus.js文件使用全局事件总线清除全局事件绑定前言本文介绍在vue3中的组件传值，props、自定义事件以及全局事件总线。

软工不秃头·2024-01-16 01:27

Vant2组件的使用

MobileUIComponentsbuiltonVueMobileUIComponentsbuiltonVuehttps://vant-contrib.gitee.io/vant/v2/#/zh-CN/通过npm安装#Vue3

LxyingINGing·2024-01-16 01:37

Taro+vue3+NutUI实现微信小程序的购物车功能

这个功能主要是使用原生的标签+js+css实现的，目前在项目中属于定制化开发，后期可以考虑封装成组件，简单的记录一下 {{item?.name}}{{getDistance(item?.positionLatitude,item?.positionLongitude,state.currentLat,state.currentLon)}} {{item?.name}}物资数量{{item?.q

BSCIO_599·2024-01-16 01:29

Taro+vue3 实现滑动列表时切换电影

-->importTarofrom"@tarojs/taro";import{onMounted,ref,reactive,toRefs,watch}from"vue";constprops=defineProps({//子组件接收父组件传递过来的值list:{type:Array,required:true,},modelValue:{type:Number,required:true,},})

一只小阿乐·2024-01-16 01:25

Taro+vue3 实现选座位功能以及座位显示

1.类似选座位那种功能我的功能座位不是html元素而是座位图片都是图片constonConfirm=()=>{//constarea_arr=selectedSeat.value.map((item)=>{//returnitem.areaId;//});//constabc=isRepeat(area_arr);//if(!abc){//Taro.showToast({//title:"请选择同

一只小阿乐·2024-01-16 01:55

Vue3实现带点击外部关闭对应弹出框（可共用一个变量）

首先，假设您在单文件组件(SFC)中使用了Vue3，并且有两个div元素分别通过`v-if`和`v-else`来切换显示一个带有`.elpopver`类的弹出组件。

爱在你心中·2024-01-16 00:18

Vue3+antDesignVue实现表单校验

一-->-->-->国际先进国际领先国内先进国内领先产学研合作自主研发其他选择文件二data(){return{fileList:[],//表单数据form:Object.assign({},this.data),//表单验证规则rules:{createdBy:[{required:true,message:'请输入创建人',type:'number',trigger:'blur'}],proj

m87里的光·2024-01-16 00:19

推荐频道

vue3随手记