Vue3组件开发

vue3 json代码及字符串 v-code-diff对比插件

vue3json代码及字符串v-code-diff对比插件安装pnpminstall--savev-code-diff在main.ts中引入importCodeDifffrom"v-code-diff"app.use
Shero.李建业·2024-02-02 09:03

vue3前端开发，element-plus前端框架探秘:scope对象

vue3前端开发，element-plus前端框架探秘:scope对象！
yrldjsbk·2024-02-02 08:31

前端框架简介及Vue3项目起步基础配置

前端框架简介及Vue3项目起步基础配置前端框架简介Vue1.1Vue脚手架1.1.1使用vue-cli创建vue2项目1.1.2使用create-vue创建vue3项目1.1.3项目起步-配置别名路径联想提示
前端小白进阶之旅·2024-02-02 07:08

vue3 element-plus 将路由和激活菜单绑定

{{item.meta.title}}import{onMounted,ref}from'vue';import{useRouter,useRoute}from'vue-router';constrouter=useRouter();constactiveMenu=ref('');//当前激活的菜单按钮constpersonalDetailMenuList:any=[//路由信息{path:'/l
不爱吃饭爱吃菜·2024-02-02 07:22

在Vue 3中，理解使用defineEmits函数来定义组件的事件。

在Vue3中，可以使用`defineEmits`函数来定义组件的事件。`defineEmits`函数接受一个对象作为参数，该对象的键是事件名，值是一个回调函数或一个函数数组。
_沐晨·2024-02-02 07:21

【Vue3+Vite】Vue生命周期与组件 快速学习 第三期

文章目录一、Vue生命周期1.1生命周期简介1.2生命周期案例二、Vue组件2.1组件基础2.2组件化入门案例2.3组件之间传递数据2.3.1父传子2.3.2子传父2.3.3兄弟传参总结一、Vue生命周期1.1生命周期简介每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数
道格维克·2024-02-02 07:15

vue3页面跳转产生白屏，刷新后能正常展示的解决方案

可以依次检查以下问题：1.是否在根组件标签最外层包含了个最大的div盒子包裹内容。2.看看是否在template标签下面直接有注释，如果有需要把注释写到div里面。（即根标签下不要直接有注释）3.在router-view中给路由添加key标识。！！注意：有使用layout封装布局的，是在layout下的主页面中的router-view添加标识，不是在src根目录下main.vue中修改（在这个文件
不爱吃饭爱吃菜·2024-02-02 07:42

【前端-VUE+TS】Vue3组件化-下（五）

一.插槽的使用1.1.认识插槽slot在开发中，我们会经常封装一个个可复用的组件：前面我们会通过props传递给组件一些数据，让组件来进行展示；但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；比如某种情况下我们使用组件希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；我们应该让使用者可以决定某一块区域到底存放什么内容；举个栗子
我自闭了？·2024-02-02 05:54

【前端-VUE+TS】Vue3组件化-知识补充（六）

一.动态组件比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示；案例截图这个案例我们可以通过两种不同的实现思路来实现：方式一：通过v-if来判断，显示不同的组件；方式二：动态组件的方式；1.1.v-if显示不同组件我们可以先通过v-if来判断显示不同的组件，这个可以使用我们之前讲过的知识来实现：{{tab}}importHomefrom"./pages/Home.vue";
我自闭了？·2024-02-02 05:54

【前端-VUE+TS】 Vue3开发基础语法(二)

1.1.computed1.1.1.认识计算属性computed我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示；比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示；在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算；在模板中放入太多的
我自闭了？·2024-02-02 05:23

【前端-VUE+TS】Vue3组件化-上（三）

一.认识组件化1.1.什么是组件化？人面对复杂问题的处理方式：任何一个人处理信息的逻辑能力都是有限的所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。但是，我们人有一种天生的能力，就是将问题进行拆解。如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。复杂问题的处理组件化也是类似的思想：如果我们将一个页面中所有的处理逻辑全部放在
我自闭了？·2024-02-02 05:23

【前端-VUE】Vue3组件组成部分及组件通信（详解）

一、父子间通信1.父传子：2.子传父：3.什么是propProp定义：组件上注册的一些自定义属性Prop作用：向子组件传递数据特点：可以传递任意数量的prop可以传递任意类型的prop3.1props校验思考：组件的prop可以乱传么？不可以作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示——>帮助开发者，快速发现错误语法：①类型校验②非空校验③默认值④自定义校验props:{
我自闭了？·2024-02-02 05:23

【前端-VUE+TS】Vue3组件化-中（四）

一.认识组件的嵌套1.1.App单独开发前面我们是将所有的逻辑放到一个App.vue中：在之前的案例中，我们只是创建了一个组件App；如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；再将这些组件组合嵌套在一起，最终形成我们的应用程序；我们来分析一下下面代码的嵌套逻辑，假如我们将所有的代码逻辑
我自闭了？·2024-02-02 05:20

vue3.X

Vue.js3.0源码组织方式的变化CompositionAPI性能提升Vite一、源码组织方式源码采用TypeScript重写使用Monorepo管理项目结构二、vue.js3.0不同构建版本packages/vuecjsvue.cjs.jsvue.cjs.prod.jsglobalvue.global.jsvue.global.prod.jsvue.runtime.global.jsvue.r
丽__·2024-02-02 05:25

[vue3进阶] 6.slot插槽3——作用域插槽

作用域插槽——又是一个抽象的名字，那我用简单的语言解释一下当父组件里写的插槽的内容需要使用子组件里的数据时，这时候就要用作用域插槽这个功能可能你还是没明白，不过没关系，咱们还是通过写一个小例子来学习我们现在有一个子组件，叫heroList，顾名思义就是要显示一个英雄列表，咱们快速的把它写出来，都是以前学过的内容{{item}}exportdefault{data(){return{list:['列
林哥学前端·2024-02-02 04:40

springboot3+vue3支付宝交易案例-结算支付

springboot3+vue3支付宝交易案例-结算支付！今天下午整理了一下结算的内容。遇到了很多问题。汇总分享给大家。
yrldjsbk·2024-02-02 04:21

Vue3基本概念

script部分exportdefault对象的属性：name：组件的名称components：存储中用到的所有组件props：存储父组件传递给子组件的数据watch()：当某个数据发生变化时触发computed：动态计算某个数据setup(props,context)：初始化变量、函数ref定义变量，可以用.value属性重新赋值reactive定义对象，不可重新赋值props存储父组件传递过来
林林亓·2024-02-02 03:31

在Vue 3中，如何理解使用CSS变量（也被称为自定义属性）来动态地设置和更新组件的样式

在Vue3中，你可以使用CSS变量（也被称为自定义属性）来动态地设置和更新组件的样式。Vue3提供了``块，使你可以在单个组件中定义CSS变量。
_沐晨·2024-02-02 02:46

ele-h5项目使用vue3+vite开发：第二节、search 搜索框组件开发

如何设计一个组件需求分析布局contentleft-iconbodyinput-controlright-iconaction功能使用defineEmits定义组件的事件在组件的scriptsetup里如何定义事件使用defineEmits（）定义先声明事件接口interfaceIProps{showAction?:booleanbackground?:stringplaceholder?:str
_沐晨·2024-02-02 02:16

在vue3中，组件的script setup 里如何理解 v-model 参数

在Vue3中，可以使用`defineEmits`和`defineProps`函数来定义组件的`v-model`。
_沐晨·2024-02-02 02:16

解决vue切换页面echarts不显示

问题描述：vue3项目中用el-tabs组件切换页面，echarts图表只在初始化的时候显示了一次，切换页面后就不显示了。
小珏酱·2024-02-02 02:58

Pinia｜VUe的状态管理库

pinia是vuex的升级版，因为有vue3新特性的加持，比v
Judy1623·2024-02-02 01:08

Vuex this.$store undefined

$store一直都是undefined最后的解决办法：Vuex的版本过高，是vuex：4.0.2，而我用的是Vue2，使用vue2对应的vuex应该为vuex3，vue3对应的版本为Vuex4store
雨水芬纷·2024-02-02 00:00

this.$store undefined

从以下几个方向排查1、查看store文件中的vuex实例对象是否暴漏2、main.js中是否注入store3、如果上边均没问题，打开package.json，查看vue与vuex的版本，vue2对应vuex3,vue3
guhy fighting·2024-02-02 00:28

Vue3+vite引入Tailwind CSS

TailwindCSS是一个为快速创建定制化UI组件而设计的实用型框架。与其他CSS框架或库不同，TailwindCSS组件没有预先设置好样式。可以使用Tailwind的低级实用类来为CSS元素设置样式，如margin、flex、color等。自从2017年发布以来，TailwindCSS越来越受欢迎，因为它允许开发者创建独特的UI，而不被UIkit规则所束缚。引入tailwindcss中文文档t
QGS-CD·2024-02-02 00:31

基于 vite 创建 Vue3 项目

1、基于vue-cli创建##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue--version##安装或者升级你的@vue/clinpminstall-g@vue/cli##执行创建命令vuecreatevue_test##随后选择3.x##ChooseaversionofVue.jsthatyouwanttostarttheprojectwith(Usearrowkey
打不着的大喇叭·2024-02-01 21:33

Vue学习之使用HBuilderX创建并使用vue3.0项目

Vue学习之使用HBuilderX创建并使用vue3.0项目下文将简述如何使用HBuilderX创建并使用vue3.0项目，包含项目创建、目录介绍、如何引用组件、首页自定义设置。
ciku·2024-02-01 20:08

vue3兼容超宽屏、超窄屏、4K屏幕等等

vue3兼容超宽屏、超窄屏、4K屏幕等等在你的项目src下创建一个hooks文件夹在里面创建一个UserScalePage.ts文件在里面写上import{onMounted,onUnmounted}from"vue
我叫汪枫·2024-02-01 19:06

vue3+ts使用echarts正确姿势

首先我们去封装一个Hooks为啥要封装Hooks在vue2中我们可以全局导入echarts通过this.ecahrts方式去使用echats,在vue3中使用了组合式Api对于this的支持不是方便所以为了便于开发建议自己去封装
我叫汪枫·2024-02-01 19:35

Error: EPERM: operation not permitted, mkdir ‘D:\Program Files\nodejs\node_cache\_cacache‘

安装vue时，出现如下错误：E:\QianDuan\Vue3>npminstall-g@vue/clinpmERR!codeEPERMnpmERR!syscallmkdirnpmERR!
木木三三·2024-02-01 19:46

VUE3+elementPlus 之 Form表单校验器 之 数字类型、小数位数校验

限制录入数字类型+小数位数限制：封装自定义验证器：/***数字输入项校验*@param{*}ruleelement-ui表单校验规则*@param{*}value输入项的值*@param{*}callback回调函数*@param{*}extraInfo附加校验信息：*allowZeroboolean是否允许为0，true:允许*isRateboolean是否是百分比字段，true：是*numRa
赫兹/Herzz·2024-02-01 19:54

VUE3+elementPlus 之 Form表单校验器 之 字符长度校验

需求：校验字符长度，超过后仍可输入，error提示录入字符数与限制字符数校验字符长度：/***检验文字输入区的长度*@param{*}rule输入框的rule对象，field：字段名称*@param{*}value输入框的内容*@param{*}callback回调函数*@param{*}textLengthRules文本长度校验规则对象，key：字段名称，value：字段允许最大长度*@retu
赫兹/Herzz·2024-02-01 19:53

Vue3插槽

插槽slot就是子组件提供给父组件使用的占位符,使用表示,可以填充任何模板代码插槽有匿名插槽,具名插槽,作用域插槽,动态插槽1.匿名插槽1.子组件创建插槽父组件使用插槽123或1232.具名插槽创建插槽使用底部或底部作用域插槽import{reactive}from"vue"typenames={name:string,age:number}constdata=reactive([{name:"唐
*郑*·2024-02-01 18:17

【vue】vue跑马灯vue-marquee-text-component

[email protected]vue3npminstallvue-marquee-text-component安装完成之后，vue页面全局引入
小墨鱼_z·2024-02-01 18:15

Vue3中mitt使用

在Vue3中on,on,on,off和$once实例方法已被移除,在Vu3中可以使用Mitt库1.安装Mittnpminstallmitt-s2.main.ts全局挂载import{createApp}
*郑*·2024-02-01 18:45

Vue2（十二）：Vuex

一、Vuex1.Vuex的环境搭建1.1安装vuex安装：npmivuex@3注意Vue2一定要安装vuex3，如果是vue3可以直接npmivuex安装的是vuex4，可以去package.json文件里看下
Kiwi23333·2024-02-01 18:59

vue3初体验-基于vue3+ant design封装公共弹框

parent.vueimport{defineComponent,reactive,ref}from'vue';importcustomMultipleModelfrom'/@/components/custonMultipleSelection/index.vue'exportdefaultdefineComponent({components:{customMultipleModel},set
温酒斟与你·2024-02-01 18:57

vue3 + antd 封装动态表单组件（四）

传送带vue3+antd封装动态表单组件（一）vue3+antd封装动态表单组件（二）vue3+antd封装动态表单组件（三）前置条件vue版本v3.3.11ant-design-vue版本v4.1.1
guizi0809·2024-02-01 18:25

vue3快速上手-vue3核心语法-做项目必备

1.vue3简介2020年9月18日，Vue.js发布版3.0版本，代号：OnePiece（n经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址：Releasev3.0.0OnePiece
前端进阶中·2024-02-01 17:00

TS + vue3 + element-plus 分页组件封装

记录下封装分页组件的小坑，由于开始子组件使用的:current-page来绑定，切换页码的时候页码视图没有变化，导致以为是子组件无法监听到父组件的数据变化导致的，后面查看文档使用v-model="current_page"视图就可以变化了父组件import{onMounted,reactive,ref}from"vue";import{useUserList}from"@/store/userLi
Memory灬番薯·2024-02-01 17:59

Vue3+TS+移动端-购物车实现详细步骤+项目优化

分析得到:因为购物车,在几个页面都是需要进行数据互通,主页面,商品页面,详情页面,三个不同的组件,要实现一个页面数据变化,另外页面数据跟着变化,那必须要使用vue中vuex,因为是vue3也可以使用piniavuex
前端进阶中·2024-02-01 17:59

Vue3项目封装一个Element-plus Pagination分页

前言:后台系统分页肯定是离不开的,但是ui框架都很多,我们可以定义封装一种格式,所有项目按到这个结构来做.实例:第一步:在项目components组件新建一个分页组件,用来进行封装组件.第二步:根据官方的进行定义,官方提供的这些,需要我们封装成动态模式第三步:代码改造import{ref,defineProps,defineEmits}from'vue'constprops=defineProps
前端进阶中·2024-02-01 17:59

[N-136]基于springboot,vue在线聊天系统

开发工具：IDEA服务器：Tomcat9.0，jdk1.8项目构建：maven数据库：mysql5.7系统分前后台，项目采用前后端分离前端技术：TypeScript+Vue3.0+ElementUI-Plus
IT教程资源_·2024-02-01 16:13

实现vue3响应式系统核心-shallowReactive

代码地址：https://github.com/SuYxh/share-vue3代码并没有按照源码的方式去进行组织，目的是学习、实现vue3响
Timer@·2024-02-01 16:06

vue3：中warch监听的几种写法

作用：监视数据的变化（和vue2中的watch作用一致）特点：vue3中watch只能监视以下四种数据：1、ref定义的数据2、reactive定义的数据3、函数返回的值（getter函数）4、前面3个内容的数组写法情况一监视
荀鼠不是鼠·2024-02-01 16:02

2022 新书《Vue.js 设计与实现》读书笔记

标题是“设计和实现”，这本书讲的都是Vue3的原理，如何设计的，以及如何通过代码实现最基本的功能。所以，看这本书必须要先熟悉Vue3应用，否则看起来会很被动。
姑老爷呀·2024-02-01 16:46

Vuejs设计与实现2-响应系统

目录二、响应系统响应系统作用域实现非原始值的响应式方案合理的响应触发代理数组代理set与map第二章快速总结二、响应系统响应系统作用域实现响应式数据在vue3中使用proxy代理实现，基本原理：当读取操作发生时
Zhillery·2024-02-01 16:44

VUE3-Cesium（entity、primitive总结及材质的修改）

目录0.Entity和Primitive概述1.entity材质修改1.1MaterialProperty方式修改材质1.1.1MaterialProperty方式设置材质1.1.2示例1-设置矩形材质：1.1.3示例2-设置折线材质：1.2通过自定义materialProperty更改材质（自定义着色器）2.primitive材质修改2.1appearance修改材质2.1.1appearanc
HM-hhxx！·2024-02-01 14:15

VUE3新特性hook

什么是hook？——本质是一个函数，把setup函数中使用的CompositionAPI进行了封装，类似于vue2中的mixin。自定义hook的优势：复用代码,让setup中的逻辑更清楚易懂。下面举例说明在新建的hook文件夹下新建index.ts，定义了两个请求方法/**@description:自定义ts*@Author:yp*@Date:2024-01-27*@LastEditors:yp
前端你鹏哥·2024-02-01 14:16

vue2项目迁移到vue3中需要做什么处理

1.更改script标签为了方便写代码，在这里我们使用...标签2.定义变量的不同vue2中的data()内是用来定义变量的，如exportdefault{data(){return{   loginForm:{    username:"",    password:"",    code:"",    rpassword:""  },   passwordType:"password"}}而在
前端你鹏哥·2024-02-01 14:46
上一页 17 18 19 20 21 22 23 24 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他