vue2.x
文章平均质量分 83
vue2.x
时清云
自强不息,厚德载物;日拱一卒,功不唐捐;海纳百川,有容乃大。这世上没有最强的人,只有想变强的人,做一个简单真实的自己。
展开
-
vue3中获取ref元素的几种方式总结
最近开发了一个PC端的新项目,其中有一个这样的需求,点击表单中已上传的图片(这一栏中可以上传多张图片),进行预览时,会出现一个轮播图的效果,显示当前点击的图片,点击左右滑动,可以预览上一张或者下一张。因为要实现点击哪一张,就显示哪一张的效果,所以在轮播图中需要给它设置当前的图片的name,这样才会展示当前图片,这个时候就用到了ref来获取轮播图的元素。原创 2023-07-05 16:35:41 · 12098 阅读 · 0 评论 -
关于Vite项目打包后浏览器兼容性问题的解决方案
此时你的大脑可能跟页面一样也是一片空白,但是不要慌,我们先分析一下产生这个问题的可能的原因:那些版本较低的浏览器不支持ES6的语法和新API,而Babel默认只转换新的JavaScript句法,不转换新的API,比如Proxy、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法都不会转码。在本次的案例中,我们重写了Vant组件的部分变量,并全局引入了。在打开包含这些变量的页面时,按需加载插件此时才会加载Vant的样式文件,我们在全局重写的变量又被重写了,因此重写的全局变量没有生效。转载 2023-07-05 15:00:15 · 2048 阅读 · 2 评论 -
vue3.0+vite项目如何解决低版本浏览器兼容性
最近开发了一个PC端的新项目,这个项目要嵌入到之前一个老的后台管理系统里面。因为客户使用的谷歌浏览器版本比较低,又不愿意做升级处理,所以只能由我们来做低版本浏览器的兼容性处理(无奈,有些新技术想用又不能用)。所以我总结一下vue3.0+vite项目的低版本浏览器的兼容性处理。原创 2023-07-05 14:51:27 · 9103 阅读 · 0 评论 -
vue中动态引入图片为什么要是require, 你不知道的那些事
与静态资源相对应的还有一个动态资源,先让我们看看网上的各位大佬们怎么解释的。静态资源:一般客户端发送请求到web服务器,web服务器从内存在取到相应的文件,返回给客户端,客户端解析并渲染显示出来。动态资源:一般客户端请求的动态资源,先将请求交于web容器,web容器连接数据库,数据库处理数据之后,将内容交给web服务器,web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。静态资源就是直接存放在项目中的资源,这些资源不需要我们发送专门的请求进行获取。转载 2022-11-04 10:19:18 · 1571 阅读 · 0 评论 -
Vue2 到 Vue3,重学这 5 个常用的 API
距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等。虽然目前大多数开发者们在使用的仍旧以Vue2为准,但Vue3显然是Vue开发者们未来必须面对的,而且前不久Vue官方也发布了Vue2.7.0,使得Vue2可以兼容Vue3的API,这让开发者可以在项目不升级Vue3的情况下依旧可以使用Vue3的开发方式,这为Vue2开发者学习Vue3提供了一个非常好的过渡途径。之于最大的变化,当属了,而除了引入外,一些我们在上经常使用的东西到了时也发生了不小的变化,本文将介绍一些有。转载 2022-11-02 11:16:33 · 155 阅读 · 0 评论 -
如何在Vue3.2的setup中设置组件名、在vben-admin中实现页面缓存?
为什么会取这样的标题名?有很多小伙伴会有这样的问题。我先解答一下,和设置组件名的方式不一样,想要通过实现页面缓存,一定要设置组件名,所以有个先后顺序,先设置组件名,然后实现页面缓存。我们先看一下在和中分别是怎么设置组件名的?原创 2022-10-22 18:25:44 · 3243 阅读 · 0 评论 -
为什么有人说 vite 快,有人却说 vite 慢?
谈到,给人的第一印象就是启动速度快。同样规模的项目,相比动辄十几秒甚至几十秒的的启动速度,简直是快到没朋友,往往数秒之内即可完成启动(PS: 都没有时间去喝一杯 ☕️ 啦)。正好小编最近在做一些关于开发体验的性能优化,就想着把手上一些项目的开发模式更新为 Vite。经过一番操作,终于改造成功,而效果也不负众望,项目启动速度由原来的 25 s 如坐 🚀一般跃升为 2 s,简直夸张。虽然也出现了一些诸如首屏、懒加载性能下降等负面效果,但整体来说依然利大于弊,开发幸福感提升非常明显。转载 2022-09-24 11:28:37 · 1023 阅读 · 0 评论 -
新指令 v-memo,提高性能的又一利器
这个新的指令对于要求性能极高的项目有很大帮助了,一般是在比较大型的项目中使用的,当然小型项目,大家可以根据项目需要进行使用。转载 2022-09-16 20:44:54 · 593 阅读 · 0 评论 -
浅谈:为啥vue和react都选择了Hooks?
阅读本文,你将:初步了解 Hooks 在 vue 与 react 的现状听一听本文作者关于 Hooks 的定义和总结弄懂“为什么我们需要 Hooks”进行一些简单的 Hooks 实践一、hooks: 什么叫大势所趋?2019年年初,react 在 16.8.x 版本正式具备了 hooks 能力。2019年6月,尤雨溪在 vue/github-issues 里提出了关于 vue3 Component API 的提案。(vue hooks的基础)在后续的 react 和 v转载 2022-03-04 11:28:00 · 640 阅读 · 1 评论 -
如何在Vue CLI上配置process.env环境变量
我们一般用process.env.NODE_ENV来区分开发环境和线上环境。在开始本文之前,我先强调一下, process.env.NODE_ENV默认只有两种状态即development和production,development指开发环境,说白了就是本地开发即localhost环境(本地的开发),而production代表发布在任何服务上的服务(不管是dat、uat还是生产环境),node是不知道你服务是测试还是正式,除非你手动指定。通常认为都是线上环境。所以可以这样认为development代表本原创 2021-08-25 18:05:23 · 6899 阅读 · 0 评论 -
结合js中的addEventListener()去理解vue中的事件修饰符
为什么要写这篇文章呢?是因为在看vue官方文档时,看到了事件修饰符这一块。我们都知道vue中的事件修饰符总共有6种,包括.stop、.prevent、.capture、.once、.self、.passive。对于它们的含义和使用,我就不做描述了,可以看我的这一篇文章:vue中的事件修饰符.self、.capture和.passive。主要是结合addEventListener去理解.capture、.once、.passive等的实现原理。1、先看一下addEventListener的用法eleme原创 2021-08-22 15:40:16 · 1159 阅读 · 0 评论 -
如何阅读源码--以Vetur为例
作者: 范文杰 Tecvan原文链接:https://mp.weixin.qq.com/s/wD4ERrDIPLweLvNalC8h4A我很早就意识到,能熟练、高效阅读开源前端框架源码是成为一个高级前端工程师必须具备的基本技能之一,所以在我职业生涯的最早期,就已经开始做了很多次相关的尝试,但结果通常都以失败告终,原因五花八门:缺乏必要的背景知识,犹如阅读天书不理解项目架构、设计理念,始终不得要领目标不够聚焦,阅读过程容易复杂化容易陷入细节,在不重要的问题上纠结半天容易追着分支流程跑,分散注意转载 2021-08-05 11:13:00 · 632 阅读 · 0 评论 -
keep-alive实现原理
作者:amCow链接:https://www.jianshu.com/p/9523bb439950来源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。1、前言本文介绍的内容包括:keep-alive用法:动态组件&vue-routerkeep-alive源码解析keep-alive组件及其包裹组件的钩子keep-alive组件及其包裹组件的渲染2、keep-alive介绍与应用2.1 keep-alive是什么keep-alive是一个抽象组件:转载 2021-07-26 17:44:00 · 276 阅读 · 0 评论 -
vue中父组件添加自定义参数后,如何获取子组件$emit传递过来的参数
vue中子组件使用$emit传参,父组件接收参数的同时添加自定义参数,这个是在项目中常见的应用场景.总结一下。本文大纲:1、子组件使用emit传过来的参数只有一个时(父组件可以使用$event接收子组件传过来的参数)子组件(child1):this.$emit('fromChild1','我是子组件传过来的参数--child1')父组件:<child1 @fromChild1="getChild1($event,'我是父组件中的自定义参数--parent1')"></chi原创 2021-07-15 15:45:06 · 2729 阅读 · 0 评论 -
Vue.use()的使用和原理
Vue.use()的作用是通过全局方法 Vue.use() 使用插件插件通常用来为 Vue 添加全局功能,可以通过全局方法 Vue.use() 使用插件,而且它需要在你调用 new Vue() 启动应用之前完成。Vue.use(plugin, options)plugin的类型可以是{ object | Function }options是一个可选的对象举例我们先来看下面的例子,看一下Vue.use的简单应用目录结构如下:plugin.js 代码如下:// object --- 对象中转载 2021-05-17 15:17:56 · 12166 阅读 · 2 评论 -
vue中v-if v-else复用元素机制
今天在开发的时候遇到这样一个问题。代码如下:<div class="auth-code"> <anyi-input v-form:item="{required: '验证码为空'}" v-model="form.captcha" type="text" :maxLength="6" label="验证码" placeholder="请输入验证码"></anyi-input> <span class="auth-code-btn"&原创 2021-01-07 13:39:43 · 754 阅读 · 1 评论 -
vue中上传图片使用v-for所带的key值的缓存问题
近期开发了一个新功能,就是上传图片,并支持删除,于是乎写了一个组件。上传是没有问题的,但是删除的时候老是出问题,问题是删除的时候,例如总共上传了4张图片,我删除了第二张,就剩下了三张,但是现在的第二张和第三张图片是一样的,这是什么情况?经过分析之后,知道了是因为缓存的原因。使用v-for的时候设置key值得时候,我用的是index,导致存在缓存的情况,这个和vue中的diff算法有关。于是,我就给每一项设置一个独一无二的索引值,就是给每一项加一个时间戳new Date().getTime()作为索引值,这样原创 2020-10-09 21:31:33 · 849 阅读 · 0 评论 -
vue中的.native修饰符
一般来说,vue本身提供了v-on:eventName这个语法来提供vue的时事件绑定,通常使用@eventName这个语法糖代替上述语法。使用过程中没有考虑@eventName作用标签的类型,因为一般将该语法用在html原生标签,在组件标签上使用的时候,就要加上native修饰符,这样就可以像原生标签一样使用了。native在Vue.js官方的大致意思是监听自定义标签根标签的事件,我的理解是一般都是原生的html标签加上处理事件,但如果给组件标签加上事件的话,相当于给组件的根元素(也就是原生的htm原创 2020-07-12 17:41:37 · 8351 阅读 · 3 评论 -
vue源码分析之reduce()的思考
vue中如果data中的数据嵌套层数较多的情况下,例如://html<p>{{items.item.a}}</p><p>{{items.item.b.c}}</p>// jsdata(){ items:{ item:{ a:1 b:{ c:2 } } }}那vue中是怎么解析items.item.a和items.item.b.c这样数据的呢?在co原创 2020-07-12 12:16:22 · 1938 阅读 · 0 评论 -
vue源码分析之createDocumentFragment()的思考
先看一下关于createDocumentFragment的定义:createDocumentFragment()方法,是用来创建一个虚拟的节点对象,或者说,是用来创建文档碎片节点。它可以包含各种类型的节点,在创建之初是空的。DocumentFragment节点不属于文档树,继承的parentNode属性总是null。它有一个很实用的特点,当请求把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点,即插入的是括号里的节点。这个特性使转载 2020-07-11 06:11:33 · 1507 阅读 · 0 评论 -
vue中v-if与v-show的区别以及使用场景
区别1.手段:v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为转载 2020-07-05 22:27:24 · 410 阅读 · 1 评论 -
Vue实例为什么只能有一个根元素?
我们在初学Vue时,第一个上手的例子基本都是 new Vue({el:’#app’}),但是为什么Vue实例只能挂载在一个div上呢?同样的当我们开始写第一个Vue页面的时候,我们试图在template标签下写两个div,Vue提醒我们只能写一个元素,但是为什么只能有一个元素呢?很多时候我们都已经习以为常,但是却说不上来为什么。笔者入坑Vue也有一段时间了,对Vue也算了解,Vuex、Vue-Router也用了不少;但是前几天一看到这个面试问题却感觉一下子回答不上了,想来每次写代码也都是拿来就用,也没有仔转载 2020-07-05 22:16:06 · 1871 阅读 · 0 评论 -
innerHTML和outerHTML的区别
为什么要总结innerHTML和outerHTML的区别呢,主要是在看vue.js官方文档时,看到生命周期时)]原生的方法有点忘了,所以要重拾起来。示例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-07-05 21:34:55 · 1733 阅读 · 0 评论 -
安装vue-devtools那些事儿
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用工欲善其事, 必先利其器, 快来用vue-devtools来调试开发你的vue项目吧安装:1.到github下载:git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包cd vue-devtoolsnpm install// 如果网速不好,可以用cnpm install 来代替// 淘宝镜像安装 npm config set regi原创 2020-07-04 23:27:02 · 167 阅读 · 0 评论 -
vue中的事件修饰符.self、.capture和.passive
vue中的事件修饰符有6种:.stop.prevent.capture.once.self.passive.stop是stopPropagation停止冒泡,.prevent是preventDefault阻止默认事件,.once是点击事件将只会触发一次<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>1、.self只在目标Dom是绑定了动作的Dom才触发也就是说只有这个Dom绑定了这个原创 2020-06-29 13:19:16 · 3958 阅读 · 0 评论 -
深入理解.sync修饰符
v-on="{a: f()}"等价于v-on:a=“f()”为什么会有.sync这样的修饰符呢?在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的效果该怎么办呢? 简单的方法是子组件向父组件发送一个事件,父组件监听该事件,然后更新prop。具体如下:...原创 2020-06-27 10:43:05 · 2335 阅读 · 0 评论 -
mac上安装vue-cli时报错
mac上安装vue-cli时报Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules’原因: 执行命令行命令时没有获得管理员权限解决方案:在命令行前面添加sudo获取管理员权限,输入管理员密码就行例如原来的是: npm install -g vue-cli应该该为:sudo npm install -g vue-cli 再输入密码就行注意红色的长方形中圈出的报错信息,主要是没有相关的权限,一定要找准问题原创 2020-06-26 23:21:54 · 790 阅读 · 1 评论 -
Vue-- $attrs与$listeners的详解
1、vm.$attrs2.4.0新增类型 { [key: string]: string }只读详细包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。简单点讲就是包含了所有父组件在子组件上设置的属性(除了prop传递的属性、class 和 styl转载 2020-06-26 18:05:12 · 3686 阅读 · 0 评论 -
vue组件中data为什么是一个函数?
vue2.X组件中data为什么是一个函数?曾经的困惑,今天我就好好总结一下。在vue实例上data定义的是一个对象:new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' }原创 2020-06-24 08:50:15 · 1666 阅读 · 0 评论 -
vuex的理解和总结
vux原创 2019-10-24 19:22:33 · 455 阅读 · 0 评论 -
工作学习总结-vue中设置头部标题
最近在做公众号的时候要外链一个H5页面,这个H5页面是用vue写的,然后在路由vouter中也给这个页面设置了title,这个H5页面总共有三个页面,第一个页面是列表页,第二个页面是详情页,第三个页面是结果页,但是在公众号中跳转过来的时候,列表页头部标题没有了,但是进入详情页,再返回到列表页的时候,头部标题又出来了。就产生了这样一个bug,怎么解决呢?首先具体原因我还没有确定,我猜测是因为我是从...原创 2019-09-09 17:37:24 · 1140 阅读 · 0 评论 -
工作学习总结-vue报错 Cannot read property '__ob__' of undefined(back)
这两天在做公众号这一块,有一个外链页面是用vue写的,总共有三个页面,第一个页面是列表页,第二个页面是详情页,第三个页面是结果页。其他页面的返回作用都很好,就是返回上个页面,上个页面的数据都能展示出来。但是我在第三个页面返回到第二个页面的时候,第二个页面就是空白的页面了,没有数据了。在微信开发者工具看了一下,发现报错了。报了一个这样的错误TypeError: Cannot read prope...原创 2019-09-09 15:01:34 · 893 阅读 · 0 评论 -
读取解析预览pdf文件的插件之pdf.js
最近有这样一个需求,需要在线预览pdf文件,于是就去找这方面的插件。最后筛选了一下,选择了pdf.js这个插件。我们先看一下pdf.js定义:pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析pdf.js本质上是用canvas渲染的,p...原创 2019-05-17 18:38:49 · 3949 阅读 · 0 评论 -
vue中的插槽--slot和v-slot
今天团队内部有一个技术分享会,主要是vue进阶这一块,我对插槽slot的认识还不清晰,于是就总结一下什么是插槽?插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制怎么用插槽?1.默认插槽子组件(slotOn......原创 2019-04-25 15:58:25 · 15948 阅读 · 9 评论 -
项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结
说实话,使用Mint-ui这个ui组件的过程中遇到了很多问题,这个ui组件问题真多。先说今天的主题吧,我在使用popup选择框的时候和datepicker时间选择器的时候出现了滚动穿透的问题,特别是在ios上面。找了好多方法,最后同事给出了一个好的方法,很简洁,于是就想着总结下来。代码如下:Popup组件: <mt-popup v-model="popupVisible" ...原创 2019-04-24 17:07:56 · 5699 阅读 · 8 评论 -
项目总结之vue Router中的跳转自动加上#/
最近弄懂一个小问题,就想着先总结下来。是关于vue Router的跳转问题,就是如果引入了vue-router,例如给一个这样的链接https:www.app/index.html,但是真正在浏览器中输入后执行的时候就变成了 https:www.app/index.html#/,为什么呢?原来是因为引入了vue-router,引入vue-router后,再点开链接的时候,会自动加上#/,因为vue...原创 2019-04-23 19:33:49 · 3772 阅读 · 0 评论 -
项目总结之关于vue中的UI组件
目前项目中vue用的UI组件为饿了么团队开发的UI组件,其中包括pc端的element-ui,移动端的mint-ui,所以平时这两个UI组件用的比较多点。下面是基于vue的UI框架集锦(摘自于其他博文)(1)Element 饿了么 vue 2.0后台UI框架 (Star:18382)https://github.com/ElemeFE/element(2)iview组件库 (Star:10...原创 2019-01-08 15:55:51 · 240 阅读 · 0 评论 -
vue中的父子组件之间的数据传递之props、$ref和$emit
之前大部分时候都是在用angular开发项目,vue用的很少,不过现在也逐渐在用vue开发一些项目了,于是就想着把vue熟悉并总结一下。vue的组件化思想,其中组件之间数据的传递很重要,我感觉很有必要把它总结一下。好了,开始正题:props是用于数据之间的传递(父组件向子组件),ref也可以用于数据之间的传递(ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过ref可能获取到...原创 2019-01-08 11:17:03 · 9275 阅读 · 0 评论 -
Vue生命周期中的created和mounted的区别
之前大部分时候都是用angular开发项目,vue写的很少,最近有必要把vue和webpack重新整理一下了。下面我们先看一下Vue生命周期中的created和mounted的区别。我们先看一张图(这张图是借鉴别人的,嘻嘻,在此感谢)created:创造的;创建mounted: 安装好的; 准备好的;从英文意思也可以看出来区别:created(html模板渲染之前,这时候获取不到dom...原创 2019-01-04 11:19:47 · 3832 阅读 · 0 评论