vue2&vue3

Vue3-41-组件- 动态组件 component 标签 和 is 属性 的使用

说明标签有一个is属性，可以给这个is属性赋值为一个组件对象，这样这个标签就可以渲染指定的组件对象了。使用案例本案例中会准备两个简单的组件，在App.vue中导入这两个组件，并使用标签进行动态的渲染。下面的代码中将只展示App.vue的内容。App.vue的内容APP.vue中的msg:{{msg}}//引入provide方法import{ref}from'vue'//声明父组件的一个变量cons
NorthCastle·2024-01-07 12:13

vue3学习笔记之计算属性computed

最佳实践Getter不应有副作用计算属性的getter应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要在getter中做异步请求或者更改DOM！一个计算属性的声明中描述的是如何根据其他值派生一个值。因此getter的职责应该仅为计算和返回该值。在之后的指引中我们会讨论如何使用侦听器根据其他响应式状态的变更来创建副作用。避免直接修改计算属性值从计算属性返回的值是派生状态。
靳秋鑫·2024-01-07 11:12

vue3中，通过路由传参的几种形式

1.query传参//在路由信息中，path需要配置如下内容{path:"/test",component:()=>import("@/views/text/index.vue"),name:"Test",meta:{title:"测试模块",},}//组件1中传参给组件2//组件1constquery={id:1,name:'张三'}router.push({path:'/test',query
listener_life·2024-01-07 10:54

vue3路由传参，使用state替换params

vue3路由传参，使用state替换params本文目录vue3路由传参，使用state替换paramsquery传参state传参route和router区别vue3搭配使用vue-router@4query
anjushi_·2024-01-07 10:21

vue3 的内置组件汇总

官方给出的说明：Fragment:Vue3组件不再要求有一个唯一的根节点，清除了很多无用的占位div。Teleport:允许组件渲染在别的元素内，主要开发弹窗组件的时候特别有用。
weixin79893765432...·2024-01-07 09:16

vue3 里的 ts 类型工具函数

目录前言一、PropType\二、MaybeRef\三、MaybeRefOrGetter\四、ExtractPropTypes\五、ExtractPublicPropTypes\六、ComponentCustomProperties七、ComponentCustomOptions八、ComponentCustomProps九、CSSProperties前言相关API源码一、PropType用于在用
weixin79893765432...·2024-01-07 09:42

Vue3 + echart动态引入图片以及打包问题

Vite+vue3不能使用require原标题:在vue3中动态引入图片vue3不能用require了特别感谢评论区朋友指出的问题是Vite+vue3不能使用require所以特意回来考古，更正！！！
kwok_球球·2024-01-07 09:40

vue3 动态引入图片404问题解决

图片地址直接到用法传入图片地址定义方法重新定义图片路径constgetAssetsImages=(name:any)=>{returnnewURL(`/src/assets/img/${name}`,import.meta.url).href;//本地文件路径}
她和海水一样咸·2024-01-07 09:40

vue3 + vite 动态引入不被打包的静态资源

在开发中，通常会把一些静态资源放在assets文件夹下，但是assets目录下的内容是需要vite编译打包的，所以如果只是引用assets目录下的资源时，使用绝对路径、相对路径均可。但是，在开发中，我们经常会引用一些不被打包的资源，此时该资源是放在public目录下的，那么在引用时，路径的写法如下：不管是在组件中使用，还是在index.html中使用，路径直接从public中的下一级开始即可，比如
listener_life·2024-01-07 09:39

vue中tinymce的使用

1.下载[email protected]@tinymce/[email protected].在node_modules中找到（我这里是vue2，vue3不是写在public下，具体的可以搜搜看看
不完美女孩-·2024-01-07 09:08

【uniapp】mescroll-body-part & mescroll-uni-part

mescroll.comhttp://www.mescroll.com/uni.html#loadmescroll-uni_1.3.8_example高性能下拉刷新上拉加载组件支持vue3setup-插件市场
Minions_Fatman·2024-01-07 08:32

vue3.x 的生命周期和钩子函数

Vue3的生命周期setup():开始创建组件之前，在beforeCreate和created之前执行。创建的是data和methodonBeforeMount():组件挂
SofterICer·2024-01-07 08:04

vue3 数据转换

只需要添加consttaskHeader=JSON.parse(JSON.stringify(now))
圆脸喜欢吃菠萝·2024-01-07 08:02

vue3 el-dialog

附件：将文件拖到此处，或点击上传1.最多可上传10个附件，附件大小不得超过8M;不可以上传附件或删除附件取消确定import{ElForm,ElMessage}from'element-plus'constdialogFormVisible=ref(true)//对话框显示与否constroleObject=ref()//弹框字段表constrecordData=reactive({names:'
圆脸喜欢吃菠萝·2024-01-07 08:31

js 判断路由有没有参数 vue2+vue3

vue3的写法constad=Object.keys(router.currentRoute.value.query).length>0if(!
圆脸喜欢吃菠萝·2024-01-07 08:31

34.vue3过渡和动画实现

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验：React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group；Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；我们来看一个案例：HelloWorld的显示和隐藏；通过下面的代码实现，
静昕妈妈芦培培·2024-01-07 08:50

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -后端鉴权拦截器实现

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

vue3详细讲解

一.简介Vue3是一种流行的JavaScript框架，用于构建用户界面。它是Vue.js框架的最新版本，于2020年9月正式发布。
7.9·2024-01-07 06:35

vue3日期选择器的封装

/***根据时间筛选*/constdate=newDate();constyear=date.getFullYear();constmonth=String(date.getMonth()+1).padStart(2,"0");constday=String(date.getDate()).padStart(2,"0");constcurrentDate=newDate();letprevious
7.9·2024-01-07 06:35

vue3自定义确认密码匹配验证规则

//自定义确认密码匹配验证规则constmatchPassword=(rules:any,value:any,callback:any)=>{if(value!=addData.payPwd){callback(newError('两次密码输入不一致！'))}else{callback()}}construles=reactive({payPwd:[{required:true,message:"
7.9·2024-01-07 06:03

vue3+springboot 实现token登录 过期自动退出操作

准备工作1.在src创建utils文件夹创建constant.js放咱们所需的变量exportconstTOKEN_TIME='tokenTime'exportconstTOKEN_TIME_VALUE=2*60*60*1000创建auth.js来放咱们所需的方法import{TOKEN_TIME,TOKEN_TIME_VALUE}from'./constant'//登录时设置时间exportco
owensweat·2024-01-07 06:00

vue 3.0 prototype 替代用法

在vue2.x中，我们想设置全局变量，可以在main文件中用prototype绑定vue实列，在vue3.0中，可以用app.config.globalProperties来代替prototype，具体用法如下
寻ing·2024-01-07 05:32

vite 如何打包 dist 文件到 zip 使用插件 vite-plugin-zip-pack，vue3 ts

vite如何打包dist文件到zip使用插件vite-plugin-zip-pack，vue3ts开发过程中一个经常做的事就是将./dist文件夹打包成zip分发。
十月ooOO·2024-01-07 04:40

Vue3 $emit指南--包含选项API、组合API以及 setup 语法糖

有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文GitHubhttps://github.com/qq449245884/xiaozhi已收录，有一线大厂面试完整考点、资料以及我的系列文章。许多Vue模式涉及使用props将数据从父组件传递到子组件。但如果我们需要一个子组件将数据传给它的父组件呢？使用emit，我们可以触发事件并将数据传递到组件的层次结构中。这对下面几种情况
@大迁世界·2024-01-07 04:11

Vue3使用vite-plugin-vue-setup-extend 不生效问题

在使用Vue3.2的setup语法糖后，无法优雅的定义组件的name值，虽然vite会根据组件的文件名自动生成组件名，但是需要自定义的组件名时，就很不方便。
ruisenLi·2024-01-07 04:11

vue实现搜索后列表关键字高亮

exportdefault{data(){return{keywords:'',list:[{id:1,title:'Vue.js开发实践'},{id:2,title:'Vue3基础教程'},{id:3
学如逆水，不进则退·2024-01-07 04:40

uniapp实现扫码功能H5+APP+wx小程序

vue2H5网页扫码(线上需要在https服务器部署)vue3h5扫码插件点这里1.首先uniapp初始化（需要引入npm包已经初始化就忽略吧）在项目中打开cmd窗口npminit-y根目录会多出一个package.json
学如逆水，不进则退·2024-01-07 04:10

Vue学习计划-Vue3--核心语法（一）OptionsAPI、CompositionAPI与setup

1.OptionsAPI与CompositionAPIVue2的API设计是Options(配置)风格的Vue3的API设计是Composition(组合)风格的OptionsAPI的弊端：Options
化作繁星·2024-01-07 04:39

vue3组件数据双向绑定

1.双向绑定传递基本数据类型父组件父组件值：{{searchText}}import{ref}from'vue'importtestfrom"@/components/test.vue";constsearchText=ref(0)子组件(写法一)constprops=defineProps({modelValue:{type:Number,require:true}})constemit=def
学如逆水，不进则退·2024-01-07 04:09

Vue3中hooks函数封装和使用

Vue3中hooks函数封装和使用hooks是什么hooks的优点自定义hook需要满足的规范示例hooks是什么vue3中的hooks就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来进行封装使用
*郑*·2024-01-07 03:25

vue3中watch 子组件中的 props

子组件监听父组件传入的值：constprops=defineProps({contentId:{type:String||Number,required:true,},});//整体监听watch(props,(newValue,oldValue)=>{//})//监听contentIdwatch(()=>props.contentId,(newValue,oldValue)=>{//},{dee
reembarkation·2024-01-07 02:05

vue3中的watch

1.简单的监听：constnumber=ref(0)watch(number,(newValue,oldValue)=>{//})2.复杂类型：constuser=reactive({name:'test',age:18})//整体监听watch(user,(oldValue,newValue)=>{//})//监听某一属性watch(()=>user.name,(oldValue,newValu
reembarkation·2024-01-07 02:32

Vite+Vue3使用MockJS

在使用Vue3开发的时候，有时候没有后端或者后端接口还没有准备好，那就需要使用Mock模拟数据便于前端开发。现在就记录一下Vite+Vue3的环境下如果使用MockJS。
枫叶梨花·2024-01-07 00:28

解决vue3中watch 监听不到旧值的问题,亲测有效！

问题描述这个问题是我在公司vue3项目的时候发现的一个问题，watch在监听对象/数组变量的变化时，发现对象的数据变化时旧数据获取到的和新数据是一样的类似于下面这样constobj=ref({a:'我是原来的值
枫ゞ·2024-01-06 23:33

Vue学习计划-Vue3--核心语法（二）ref、reactive和toRefs、toRef

1.ref和reactiveref创建：基本类型的响应式数据作用：定义响应式变量语法：letxxx=ref(初始值)返回值：一个RefImpl的实例对象，简称ref对象或ref,ref对象的value属性是响应式的注意点：JS中操作数据需要xxx.value,但模板中不需要.value,直接使用即可对于letname=ref('张三')来说，name不是响应式的，name.value是响应式的re
化作繁星·2024-01-06 22:14

Vue学习计划-Vue3--核心语法（三）computed计算属性、watch监听、watchEffect函数

2.watch监视与watchEffect1.watch作用：监视数据的变化（和Vue2的watch作用一致）特点：Vue3中的watch只能监视以下4种数据：ref定义的数据reactive定义的数据函数返回一个值
化作繁星·2024-01-06 22:43

Vue学习计划-Vue3--核心语法（四）标签的ref属性、props父子通信

1.标签的ref属性作用：用于注册模板引用用在普通DOM标签上，获取的使DOM节点用在组件标签上，获取的是组件实例对象用在子组件上，父组件想要访问子组件内的数据，需要使用defineExpose暴露用在普通DOM标签上：哈哈呵呵呵呵这是第三行了修改高度import{ref}from'vue'lettest=ref()functionshowLog(){console.log(test.value)
化作繁星·2024-01-06 22:43

Vue学习计划-Vue3--核心语法（五）生命周期、自定义Hook

1.生命周期概念：Vue组件实例在创建时要经历一些列的初始化步骤，在此过程中vue会在合适的时机，调用特定函数，从而让开发中有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子规律：生命周期整体分为四个阶段：分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后Vue2的生命周期创建阶段：beforeCreate、created挂载阶段：beforeMount、mounted
化作繁星·2024-01-06 22:38

Vue3-37-路由-组件内的路由守卫 onBeforeRouteLeave 和 onBeforeRouteUpdate

简介组件内的路由守卫，实际上就是两个API方法。他们与普通的守卫不同的是：他们是写在组件内的，在组件中监听路由的变化，不是全局的，比较灵活。以下是两个API的功能说明：onBeforeRouteLeave():守卫在当前路由离开时触发，例如：从/c跳转到/aonBeforeRouteUpdate():守卫在当前路由发生改变时触发,例如：从/c/100跳转到/c/200案例本案例演示上述两个API的
NorthCastle·2024-01-06 22:33

Vue3-39-路由-导航异常的检测 afterEatch 与 编程式导航之后的订阅动作

说明本文主要是介绍一下路由的后置守卫afterEatch的一个重要的作用：就是检测路由异常信息。它的实现方式是通过第三个参数来返回的。而且，它的异常检测是全局的。导航的异常有以下三种类型：aborted:在导航守卫中被拦截并返回了false；cancelled:在导航完成之前又产生了一次新的导航；duplicated:导航被阻止，已经在目标位置了。下面通过案例来认识一下这三种异常。补充1vue-r
NorthCastle·2024-01-06 22:33

Vue3-40-路由- 动态路由

说明本文主要介绍了对路由的动态配置，主要包括以下几个部分：1、判断某个路由是否存在；2、查看路由对象中的所有路由配置；3、添加一个路由；4、删除一个路由。针对上述四个方面，vue-router中提供了对应的API，因此，本文将主要介绍对应的API及其使用方法。API说明注意：以下API都是全局路由配置对象的方法！hasRoute(路由名称):判断某个路由是否存在，参数为目标路由的名称，即name属
NorthCastle·2024-01-06 22:33

Vue3-38-路由-路由的懒加载

什么是路由的懒加载一句话概括：懒加载，就是在初次用到的时候才执行加载；而非一上来就全部加载完毕。优点：可以提高项目的访问效率。因为一上来不用加载所有的资源。建议：项目中的所有路由配置都配置为懒加载的方式。语法将组件的导入使用下面的格式：()=>import('../../a.vue')配置案例本文只展示路由文件的配置写法：写法一：先声明导入，后直接使用；写法二：不声明，直接导入使用。//导入定义路
NorthCastle·2024-01-06 22:33

项目从npm迁移到pnpm

场景如下：在安装Vue3时默认为使用Npm安装，如图所示：安装完后项目就包含了基于NPM的node_modules、package.json，以及package-lock.json如果想使用pnpm去安装依赖项的话
前端小王hs·2024-01-06 21:26

uniappVue3版本中组件生命周期和页面生命周期的详细介绍

一、什么是生命周期？生命周期有多重叫法，有叫生命周期函数的，也有叫生命周期钩子的，还有钩子函数的，其实都是代表，在Vue实例创建、更新和销毁的不同阶段触发的一组钩子函数，这些生命周期函数允许开发者在不同阶段对Vue实例进行操作，以便执行特定的逻辑或清理工作。生命周期主要包含以下四个阶段：创建、挂载、更新、销毁。好比一款手机，创建（拿到全新一款手机）、挂载（安装各种软件）、更新（系统或者软件升级）、
咸虾米_·2024-01-06 21:45

开发uniapp使用Vue3组合式API版本，如何实现从vue模块中自动导入

在常规开发uniappVue3的项目时，需要用到ref、computed等需要每次都手动import导入，使用unplugin-auto-import插件就可以免去每次导入的步骤了，在使用插件前的示例代码如下
咸虾米_·2024-01-06 21:15

【前端】[vue3] vue-router使用

安装vue-router：（注意：vue2引用vue-router@3vue3才引用vue-router@4）npminstallvue-router@4src文件夹下面创建router/index.ts
timeguys·2024-01-06 20:26

Vue3 使用 Teleport 封装 一个 Dialog

文章目录什么是Teleport？用法：1.通过to指定传送的位置2.禁用teleport3.共享一个Teleport封装一个Dialog效果：什么是Teleport？是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的DOM结构外层的位置去。简单的说，Telep
程序员海军·2024-01-06 20:44

深入理解Vue3中的watch与watchEffect的使用与区别

关注⬆️⬆️⬆️⬆️专栏后期更新更多前端内容文章目录导图大纲watchwatch有三个参数第一个参数：第二个参数第三个参数注意当直接侦听一个响应式对象时，侦听器会自动启用深层模式：侦听一个getter函数：侦听一个refwatchEffect()watchEffect接受两个参数第一个参数
程序员海军·2024-01-06 20:42

vue3项目运行报错import zhCn from “element-plus/lib/locale/lang/zh-cn“

解决办法importzhCnfrom"element-plus/lib/locale/lang/zh-cn";修改为importzhCnfrom"element-plus/dist/locale/zh-cn.mjs";
我是芋头呀·2024-01-06 18:11

学习笔记四：Vue3.x+Element Plus项目Demo引入Vue-i18n并实现手动切换页面语言

前言学习Vite和Vue3并搭建项目Demo，主要目的是搭项目，对于新手直接跟着操作就可以把项目搭起来，借这个机会自己尝试写写博客，希望对大家有帮助。
郁子IKUKO·2024-01-06 18:10
上一页 89 90 91 92 93 94 95 96 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他