![](https://img-blog.csdnimg.cn/20210422162153617.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE
文章平均质量分 50
vue相关的技术
阿里巴啦
vue3/vue2/aigc/nuxt/uni-app/node/electron/react/微信相关/小程序-前端开发工程师,不定时更新博客,分享前端相关的知识.
展开
-
vue路由切换时报错:api.now is not a function
vue路由切换报错vue-devrools原创 2022-04-24 18:03:51 · 8044 阅读 · 0 评论 -
vue3中自动化注册全局组件vite版
引言:当我们开发一个很大的项目的时候,往往需要封装很多全局组件来复用,这时如果我们一个个的在main.js通过去完成全局注册就非常麻烦,所以我们得自动注册全局组件直接使用。本文主讲vue3+vite的项目vite不像webpack可以使用require.context方法进行处理,这里就不细说了。ok,我们来看看vite中的引入方式。import.meta.glob 为过动态导入import.meta.globEager 为直接引入先看下目录结构:我们在components目录下创建一个原创 2021-08-13 11:39:21 · 3953 阅读 · 1 评论 -
vue的nuxtjs报错 Cannot use import statement outside a module
项目场景:因nuxt项目需要安装a基础库包,故需引用到a包的一些方法,从而import的时候报错了。问题描述:如我们import fn from “a”, 拿a包的fn方法时,报的错误:Cannot use import statement outside a module解决方案:nuxt官网说明:https://zh.nuxtjs.org/docs/2.x/directory-structure/plugins在nuxt.config.js配置中,build中加入transpile,如下:原创 2021-06-28 11:38:22 · 2771 阅读 · 1 评论 -
vue3基于hammerjs实现移动端图片拖动缩放旋转功能案例
首先我们先有一个需求,就是在移动端h5实现图片的拖动,缩放,旋转等手势操作。假如我们使用原生的touch实现起来是非常麻烦,推荐使用一下hammerjs这个包进行处理这些手势操作。hammerjs是什么 hammerjs:hammerjs这个库可以让我们轻松的实现移动端上的手势操作, 也去除移动端上的点击事件的300ms延迟。 它封装了一下这些方法:pan 左右拖动tap 点击press 长时间按压swipe 滑动rotate 旋转效果pinch 缩放我写了个案例大概是这样子原创 2021-05-27 10:40:55 · 3402 阅读 · 5 评论 -
Vue3.0跨级嵌套组件通信$attrs,context.attrs和.emit的使用
上一篇2.4x的文章已经提过,就不作多说明,组件可以有以下几种关系:如下图所示,A 和 B、B 和 C/D 都是父子关系,C 和 D 是兄弟关系,A 和 C/D 是隔代关系。vue2.x文章移步到:Vue2.x跨级组件嵌套组件通信attrs,attrs,attrs,listeners,inheritAttrs的使用$attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有原创 2021-05-17 15:45:30 · 5167 阅读 · 1 评论 -
Vue2.x跨级/嵌套组件通信$attrs,$listeners,inheritAttrs的使用
一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C/D 都是父子关系,C 和 D 是兄弟关系,A 和 C/D 是隔代关系。vue组件之间的通信6种为:父子通信:props/$emit兄弟通信:eventHub($emit / $on)vue 的状态管理器,存储的数据是响应式:vuex多级组件嵌套:$attrs / $listeners注入依赖:provide/inject组件访问:$parent / $children与 ref假如我们想让A和C进行通信,有些小伙伴就原创 2021-05-08 16:02:05 · 1331 阅读 · 2 评论 -
Vue2.x和Vue3.0同时支持的调试工具devtools-6.0.0-beta-10-适用谷歌浏览器
vue开发利器:vue-devtools, 适合vue3.0版本的。Vue3.0版本的-devtools-6.0.0-beta-7适合谷歌浏览器,下载地址:https://download.csdn.net/download/weixin_42211816/16632636?spm=1001.2014.3001.5503原创 2021-04-13 10:40:58 · 5172 阅读 · 5 评论 -
为什么Vue中的v-if 和v-for不建议一起用?
我们都知道v-if和v-for是vue开发工程中十分常用的方法,当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。这意味着 v-if 将分别重复运行于 每个 v-for 循环中,即先运行 v-for 的循环,然后在每一个 v-for 的循环中,再进行 v-if 的条件对比,会造成性能问题,影响速度。解决方案:1.外部嵌套 template v-if 判断,内部进行 v-for 循环<template v-if="isShow"> <div v原创 2021-04-03 13:41:19 · 6210 阅读 · 1 评论 -
vue-draggable拖拽拖动组件的实际应用案例
vue-draggable拖拽组件库在项目中总会遇见一些需要排序的数据 , 那我们可以通过vuedraggable 进行拖动排序 。draggable为基于sortable.js的vue组件,用以实现拖拽功能。特性支持触摸设备支持拖拽和选择文本支持智能滚动,支持不同列表之间的拖拽。安装:npm i -S vuedraggable引入:import draggable from "vuedraggable"部分代码:实际应用:(已应用到某大型活动中…)...原创 2021-02-23 15:42:34 · 1032 阅读 · 1 评论 -
vue封装wangEditor富文本编辑器的使用案例
wangEditor是基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。在我们实际项目上还是比较频繁应用到的,下面出个案例供大家参考学习…wangEditor文档:https://www.wangeditor.com/富文本编辑器截图:源码移步到微信公众号,谢谢。...原创 2021-02-05 14:57:35 · 479 阅读 · 1 评论 -
vue使用swiper轮播图报错TypeError: Cannot read property ‘autoplay‘ of undefined-解决方案
发现很多小伙伴用vue swiper相关的插件时,当我们想使用鼠标移入移出的时候,如:this.$refs.mySwiper.autoplay.start(),this.$refs.mySwiper.autoplay.stop(),却发现报了这个错误:typeError: Cannot read property ‘autoplay’ of undefinedswiper官网没有详细的说明,自行测试后发现这个是版本问题,写查看自己的版本是多少,我的当前版本 “vue-awesome-swiper”:原创 2020-09-30 15:52:08 · 3781 阅读 · 1 评论 -
vue,javascript实现页面日期倒计时功能
日期倒计时在日常项目中还是比较常用的,活动、自动完成时间,拼团等场景比较常见,所以把自己项目中用到分享一下,具体看下方源码:代码比较简化,方便大家参考使用: /** * 日期倒计时 * @param date 如:2020-08-20 18:00:00 */ timeCountDown(date, callback = () => {}){ var time = ''; const formatNumber = (n)=>{ n = n.原创 2020-08-20 17:22:12 · 1158 阅读 · 1 评论 -
js/vue实现input file多张图片上传及预览,限制图片数量,对应每个图片文件名,删除图片
js input file 多图片上传,一次性上传多张图片(前端预览功能);运用js实现上传图片前的预览(支持多张图片),网上很多案例都是没有处理每个上传的图片文件名,这里我就增加了图片文件名的方法,希望亲们可以在项目中用到…其他input file多文件方法类似,用到FileReader读取文件的方式…先来个效果图:html结构&amp;lt;div class=&quot;upload-pic&quot;&amp;g...原创 2019-03-09 14:08:45 · 9241 阅读 · 16 评论 -
浅谈对vue中keep-alive的理解,配合vuex的使用
keepalive中文翻译的意思是:保持活着;因为日常开发中,有些组件是没必要多次init,那么我们就得让组件维持不变,所以在vue中我们可以使用keepalive来进行组件缓存,可以配合利用vuex进行状态管理。咦,好像说得要点憋扭,举个简单的例子,就比如我们日常逛淘宝:在首页上点击顶部的-搜索,进入搜索页:假如输入“鞋子”,选中一款商品点击进入到详情,然后再返回去,挑选其他的鞋子,返回...原创 2020-04-01 20:39:17 · 1011 阅读 · 1 评论 -
基于vue.js仿淘宝收货地址,并设置默认地址
这个案例主要是渲染地址列表,然后设置默认地址,与淘宝的收货地址功能一样,具体自行查看自己的淘宝收货地址;效果图:html结构<!--the-address--><div class="the-address"> <div class="adr-tent" id="vue-address"> <table class="a...原创 2019-07-11 09:55:23 · 8365 阅读 · 1 评论 -
基于vue实现的多条件下拉选择筛选功能案例
基于Vue实现的多条件筛选功能,可用上刷选商品之类的功能;效果图:具体案例可访问:https://github.com/xiexikang/vue-sortSelect原创 2019-07-01 14:32:45 · 12618 阅读 · 1 评论