vue3前端技术

Vue3的computed和watch

目录1、computed2、computed完整写法3、watch4、watch监听对象具体属性5、watch监听reactive数据1、computed基于现有的数据计算出新的数据import{ref,computed}from'vue'constnum=ref(1)constdoubleNum=computed(()=>{returnnum.value*2})constgoods=ref([{
诗霖雪·2024-01-23 22:56

vue3的watchEffect和watch其他参数

目录1、watchEffect基本使用2、watch与watchEffect的异同3、watch其他参数使用1、watchEffect基本使用1回调函数立即调用2回调函数依赖的数据都会被监控3深度监控num++import{watchEffect,ref,reactive}from'vue'//watchEffect监控数据constnum=ref(10)constobj=reactive({na
诗霖雪·2024-01-23 22:56

Vue3setup()的非语法糖和语法糖的用法

1、setup()的语法糖的用法script标签上写setup属性，不需要exportdefault{}setup()都可以省创建每个属性或方法时也不需要return导入某个组件时也不需要注册//script标签上写setup属性，不需要exportdefault{}setup()都可以省import{ref}from'vue'//组合式api//创建响应式数据age，初始值是10constage
诗霖雪·2024-01-23 22:55

一文掌握 vue3.2

一文掌握vue3.2前言1、setup语法糖1.1defineProps1.2defineEmits1.3defineExpose2、ref、reactive创建响应式数据3.1ref3.2reactive3
#GZ·2024-01-23 22:45

Vue 3 + Ts 生命周期钩子函数的使用 #onShow() #onMounted()

#1.Vue3+Ts关于onShow()的使用在Vue3中，onShow是一个生命周期钩子函数，用于在组件显示时执行特定的逻辑。在setup语法糖中，可以使用onShow来实现类似的功能。
Light-ing·2024-01-23 22:15

Vue3+Vite 利用postcss-pxtorem移动端适配

1.介绍postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。介绍amfe-flexibleamfe-flexible是配置可伸缩布局方案，主要是将
哒哒哒Q·2024-01-23 21:56

关于富文本编辑器wangeditor在vue3中的使用

1.安装npminstall@wangeditor/editor--savenpminstall@wangeditor/editor-for-vue@next--save安装以上两个包2.引入进行使用注释：valueHtmlCount：编辑里的内容，为富文本字符串editorRef：工具栏实例toolbarConfig：工具栏配置文件editorConfig：编辑器菜单配置文件onCreated：
哒哒哒Q·2024-01-23 21:26

vue3+vite 封装axios请求

vue3+vite封装axios请求安装axios创建axios实例封装请求方式封装请求接口vue中调用安装axiosnpminstallaxios创建axios实例//http/index.jsimportaxiosfrom'axios'import
小李不小·2024-01-23 21:28

快速打通 Vue 3（五）：详解 Vue 中的路由

08.路由很激动进入了Vue3的学习，作为一个已经上线了三年多的框架，很多项目都开始使用Vue3来编写了这一组文章主要聚焦于Vue3的新技术和新特性如果想要学习基础的Vue语法可以看我专栏中的其他博客Vue
*Soo_Young*·2024-01-23 20:19

Vue3:拖拽功能（可用于from，table）

在一些项目中，可能需要做一些定制化开发，比如：from表单中，可能需要各种拖拽的组件。所以给大家做一些推荐。访问地址VueDraggablePlus可以有多种方式，1，组件2，函数方式3，指令方式npminstallvue-draggable-plus这里我只做对组件的使用方法（对其他方式感兴趣的，可以去官网学习一下）：{{item.name}}import{ref}from'vue'import
梦雨生生·2024-01-23 19:27

关于Element Plus DatePicker 日期选择器 二次封装，精确到时分秒

环境说明：Vue3+ElementPlusui这次关于ElementPlus日期选择器组件二次封装，其中为了快速开发用到moment日期插件。
梦雨生生·2024-01-23 19:26

Vue3 父子组件传值 ts

父子组件传值父子组件传值，父组件通过子组件的v-bind定义一个属性将父子的数据传递给子组件，子组件通过defineProps传递纯类型参数的方式来声明,接收父组件传过来的数据。子组件通defineEmits派发一个事件来传递给父组件父组件加接收子组件传过来的数据：{{child}}import{reactive,ref}from'vue';importChildViewfrom'./ChildV
梦雨生生·2024-01-23 19:56

Vue3：组合式函数（引入外部ts文件，修改外部ts参数）

更为复杂的业务逻辑可以使用store来处理vue3中不在推荐使用mixins，在Vue2中，mixins是创建可重用组件逻辑的主要方式。
梦雨生生·2024-01-23 19:56

Vue3:状态管理-Store(Vuex,Pinia)

什么是状态管理理论上来说，每一个Vue组件实例都已经在“管理”它自己的响应式状态了它是一个独立的单元，由以下几个部分组成状态：驱动整个应用的数据源；视图：对状态的一种声明式映射；交互：状态根据用户在视图中的输入而作出相应变更的可能方式。Vuex和Pinia的区别Vuex：1.由state,getters,mutations,actions,modules组成2.通过mutations修改state
梦雨生生·2024-01-23 19:56

Vue3:插槽（slot，useSlots，useAttrs）

1.插槽1.组件FancyButtonClickme!2.组件FancyButton的模板是这样的元素是一个插槽出口(slotoutlet)，标示了父元素提供的插槽内容(slotcontent)将在哪里被渲染。3.渲染DOMClickme!2.defineExpose使用的组件是默认关闭的——即通过模板引用或者$parent链获取到的组件的公开实例，不会暴露任何在中声明的绑定。可以通过define
梦雨生生·2024-01-23 19:26

第十八节 vue3 elementplus 路由守卫

系列文章目录目录系列文章目录前言操作方法总结前言在Vue中，路由守卫（RouteGuards）是一个用于控制路由访问的机制。它们可以在路由被访问之前或之后执行一些操作，例如检查用户身份验证或权限。VueRouter提供了几种类型的路由守卫：全局前置守卫、全局后置守卫、路由独享的守卫。这节我们主要配置下项目得路由守卫。实现得功能
hongc93·2024-01-23 19:46

vue3项目运行慢 npm run serve 卡在40%不动弹

解决办法安装speed-measure-webpack-plugin查看编译过程中哪些地方消耗时间久，线程多。安装speed-measure-webpack-plugin修改vue.config.js配置插件重新npmrunserveconstSpeedMeasurePlugin=require('speed-measure-webpack-plugin')//查看编译过程constsmp=new
青乌·2024-01-23 19:55

VUE -- 组件库

目前较流行的组件库有：PC端：●ElementUI：ElementUI官网（饿了么前端团队开发，有vue2和vue3两种版本）●AntDesign：AntDesign官网（阿里团队开发）●ViewUI：
煸橙干儿~~·2024-01-23 18:33

vue3中几种封装让后端传参请求方式

1、post请求,但是后端参数不是对象，是一个单参后端//////获取项目服务详情////////////[AllowAnonymous][HttpPost("get-eploymentDetails")]publicasyncTaskGetDetailsAsync(Guidid){returnawait_projectServiceAppService.GetDetailsAsync(id);}
吱吱喔喔·2024-01-23 18:40

vue3如何获取本地json文件和调用后端接口渲染数据(uniapp&vue3)

一、获取本地json文件方式渲染准备：在static目录下存放一个json文件//引入本地jsonimportfixedDatafrom'@/static/data/test.json'//将json中数组给functext（根据自己json文件的层级结构来使用）constfunctext=fixedData.data二、调用后端接口方式渲染uniapp调用接口：{{item.name}}impo
又又爱拍照·2024-01-23 18:54

vue2(Vuex)、vue3(Pinia)、react(Redux)状态管理

vue2状态管理VuexVuex是一个专为Vue.js应用程序开发的状态管理模式。它使用集中式存储管理应用的所有组件的状态，以及规则保证状态只能按照规定的方式进行修改。State（状态）:Vuex使用单一状态树，即一个对象包含全部的应用层级状态。这个状态树对应着一个应用中的所有状态。Getters（获取器）:Getters允许你在模板中计算状态。相当于组件中的计算属性。可以对state中的数据进行
又又爱拍照·2024-01-23 17:53

基于SpringBoot的手机商城

推荐环境配置：eclipse/ideajdk1.8mavenmysql前端技术：vue，Ajax，Json后端技术：S
超级无敌暴龙战士塔塔开·2024-01-23 16:24

java计算机毕业设计高校防疫物资管理系统源码+mysql数据库+系统+lw文档+部署

数据库+系统+lw文档+部署java计算机毕业设计高校防疫物资管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术
鸿源网络·2024-01-23 16:24

计算机毕业设计springboot基于Web的濒危动物管理系统f0v31源码+系统+程序+lw文档+部署

文档+部署计算机毕业设计springboot基于Web的濒危动物管理系统f0v31源码+系统+程序+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术
兮兮科技·2024-01-23 16:22

java高校防疫物资管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署

LW文档+源码+调试部署java高校防疫物资管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术
云星科技·2024-01-23 16:22

JAVA毕业设计高校防疫物资管理系统计算机源码+lw文档+系统+调试部署+数据库

lw文档+系统+调试部署+数据库JAVA毕业设计高校防疫物资管理系统计算机源码+lw文档+系统+调试部署+数据库v本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术
卓远1991·2024-01-23 16:52

基于JAVA动物防疫信息管理计算机毕业设计源码+系统+lw文档+部署

动物防疫信息管理计算机毕业设计源码+系统+lw文档+部署基于JAVA动物防疫信息管理计算机毕业设计源码+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术
科科网络·2024-01-23 16:21

基于SpringBoot的学校防疫物资管理平台

推荐环境配置：eclipse/ideajdk1.8mavenmysql前端技术：vue，Ajax，Json
超级无敌暴龙战士塔塔开·2024-01-23 16:18

计算机毕业设计：基于python汽车数据采集分析可视化系统+爬虫+django框架

其中，采用了PythonDjango框架和Scrapy爬虫技术实现数据的抓取和处理，结合MySQL数据库进行数据存储和管理，利用Vue3、
q_3375686806·2024-01-23 15:07

自己构建webpack+vue3+ts

先看看我的目录结构（我全局使用TS）：一、安装配置webpack打包安装esnonpminstallesnoesno是基于esbuild的TS/ESNextnode运行时,有了它，就可以直接通过esno*.ts的方式启动脚本，package.json中添加type:“module”，使用esm的模块管理方式。{"name":"create-my-vue-test","version":"1.0.0
strexGM·2024-01-23 15:07

使用vue-qr插件生成二维码

/www.npmjs.com/package/vue-qr安装vue-qr插件npminstallvue-qr--save引入vue-qr//vue2importvueQrfrom'vue-qr'//vue3importvueQrfrom'vue-qr
初级开发·2024-01-23 14:56

Vue3组合式API之getCurrentInstance详解（在行为验证码之滑动验证AJ-Captcha遇到在开发环境可以，测试环境报错）

首先大家知道我们可以通过getCurrentInstance这个函数来获取当前组件的实例对象,也就是当前vue这个实例对象在Vue2中，我们是可以通过this来获取当前组件实例；但是在Vue3中，在setup
小涵涵是程序媛·2024-01-23 14:33

Vue3 父组件传值给子组件+以及使用NModal组件

前言：我想实现表格中点击详情弹窗出一个表格展示该行详细信息。想着这个弹窗里用子组件展示。分担父组件下，怕代码过多。（使用NModal组件弹窗展示）等我一波百度，嗯，实现方法挺多嘛，什么refs什么的，看似条条大路通罗马，我一试，一试一条死路/(ㄒoㄒ)/~~，最后也没用到refs（我还是更倾向于用这个，毕竟vue2都是这样），一直说找不到$refs，我还去了解了底层**getCurrentInst
靠着蓝色背景幻想·2024-01-23 12:38

Vue3+Ts：使用i18n实现国际化与全局动态下拉框框切换语言

Vue3+Ts：使用i18n实现国际化与全局动态下拉框框切换语言一、下载依赖：二、创建ts文件并配置main.ts三，如何使用1.在中使用2.在setup中使用四、全局下拉框动态切换一、下载依赖：npminstallvue-i18n
靠着蓝色背景幻想·2024-01-23 12:38

前后端分离项目中实现图形验证码

本次我们通过springboot后端项目生成图形验证码，通过vue3前端项目来展示验证码；在vue3前端项目中新建一个Captcha.vue文件，用来展示图形验证码。新建一个springb
张乔24·2024-01-23 12:35

vue3-组件基础

什么是组件组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行处理。在实际应用中，组件常常被组织成层层嵌套的树状结构。定义一个组件我们一般会将Vue组件定义在一个单独的.vue文件中，这被叫做单文件组件(简称SFC)：import { ref } from 'vue'const count = ref(0)      你点击了我 {{ count }} 下.  .container
王大可996·2024-01-23 12:34

Vue3+Ts：实现paypal按钮

Vue3+Ts：实现paypal按钮一、前端页面按钮实现第一步：下载paypal.js依赖第二步：引入要使用的vue页面，并调用。
靠着蓝色背景幻想·2024-01-23 12:34

前后端分离，使用vue3整合SpringSecurity加JWT实现登录校验

前端使用vue3进行构建，用到了element-plus组件库、axios封装、pinia状态管理、Router路由跳转等技术。后端还是springboot整合springs
张乔24·2024-01-23 12:33

Vue.js 3 项目开发：迈向现代化前端开发的必经之路

API三、Vue.js3项目开发实践1.搭建开发环境2.项目结构规划3.组件开发4.路由管理5.状态管理6.测试与部署《Vue.js3企业级项目开发实战（微课视频版）》编辑推荐内容简介作者简介目录随着前端技术的不断发展
程序边界·2024-01-23 12:58

第五篇 部署Vue3开发的项目

1、背景说明完成vue3项目的开发之后，通过本地环境测试，后面就是生产环境的部署发布了，本文简单说明一下，如何在生产环境发布vue3的项目。
程序员爱技术·2024-01-23 12:20

前端面试宝典：避雷

如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。
weixin_58185610·2024-01-23 11:08

Vue3中使用hooks，hooks究竟是个啥？如何理解

2.vue3hooks2.1为什么vue3可以使用hooks因为vue2由选项式Api转为组合式Api。底层源码改了好多。组合式API的好处；就是在函数内可以使用声明周期。
呆呆呆呆梦·2024-01-23 09:40

npm install vue3-print-nb --legacy-peer-deps npm ERR!

npminstallvue3-print-nb--legacy-peer-depsnpmERR!codeCERT_HAS_EXPIREDnpmERR!
十一吖i·2024-01-23 08:27

Vue3的ref和reactive

目录1、ref的基本使用2、reactive的基本使用3、ref操作dom4、ref与reactive的异同1、ref的基本使用ref创建数据可以是基本类型也可以是引用类型ref函数创建响应式数据，返回值是一个对象模版中使用ref数据,省略.value，js代码中不能省略获取ref创建数据的值要加上.value//ref函数创建响应式数据，返回值是一个对象//模版中使用ref数据,省略.value
诗霖雪·2024-01-23 07:23

速成版-带您2天学完vue3框架+Element-plus框架

Vue是渐进式的JavaScript框架，易学易用，性能出色，适用场景丰富的web前端框架，vue算是目前最火的web前端框架之一，使用vue可以提升开发体验。Vue组件可以按照两种不同的风格写，即选项式api和组合式api两种。目录一、vue开发准备1.1、安装vscode和node1.2、安装cli工具与创建vue项目1.3、创建一个vue项目(最新)1.4、Vue项目的目录结构二、vue基础
nuist__NJUPT·2024-01-23 06:45

vue3前端开发,如何引入element-plus前端框架及配置参数

vue3前端开发,如何引入element-plus前端框架及配置参数！这是一个简单的教程，帮助大家快速在自己的项目中引入element-plus框架。主要是介绍的引入流程和参数的配置情况。
yrldjsbk·2024-01-23 06:10

vue3使用 echarts - 饼图、折线图

下载安装npminstall-Secharts使用饼图-带中心图形-graphic-elementsimport{onMounted,ref,reactive,unref,nextTick}from"vue";import*asechartsfrom"echarts";importcirclefrom"@/assets/panel/circle.png"importstarfrom'@/asset
浮桥·2024-01-23 06:06

vue3使用element plus树形选择器懒加载回显失败问题。

vue3使用elementplus树形选择器懒加载回显时树形数据还未加载完成，回显时显示的的绑定值，不是要显示的名称。
浮桥·2024-01-23 06:36

Vue3新特性defineModel()便捷的双向绑定数据

官网介绍传送门配置要求：版本：vue>=3.4(必须！！！)配置：vite.config.js使用场景和案例使用场景：父子组件的数据双向绑定，不用emit和props的繁重代码具体案例代码实现父组件//子组件constshowDevice=ref(false)//控制子组件的显示和隐藏子组件//点击子组件就取消的按钮import{defineModel}from'vue'constmodel=de
珊珊而川·2024-01-23 05:34

Vue 兄弟组件通信

在Vue3中，以下是五种常用的方法来实现兄弟组件之间的通信：使用共享状态（SharedState）：创建一个共享的数据仓库（store），可以使用Vuex或者Vue3的新特性CompositionAPI
珊珊而川·2024-01-23 05:34
上一页 32 33 34 35 36 37 38 39 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他