Vue.js
文章平均质量分 59
蚂蚁上的大象
一个大龄的前端渣渣
展开
-
Vue3 watch与watchEffect区别与进阶
Vue3 watch与watchEffect区别watch 手动(定向)依赖特性示例watchEffect 自动依赖特性示例watchEffect 与 watch 有什么不同?watchEffect 进阶停止监听onInvalidate()watch 手动(定向)依赖watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源,并在单独的回调函数中执行副作用。默认情况下,它也是惰性的——即回调仅在侦听源发生变化时被调用。原创 2021-10-09 16:51:19 · 629 阅读 · 0 评论 -
vue 自定义指令过滤特殊字符
export default (app) => { app.directive('emoji', { mounted(el, binding) { // console.log(binding) el.oninput = (e) => { if (e.target.value != '') { const pattern = new RegExp(/[^a-zA-Z0-9_\u4e00-\u9fa5 ]+$/gi); .原创 2021-06-01 09:50:48 · 1476 阅读 · 0 评论 -
他写出了 Vue,却做不对这十道 Vue 笔试题
请原谅我起了这么个浓浓营销号味道的标题。但这可丝毫没有夸大宣传,而是前端娱乐圈今日份的瓜——有十道关于 Vue 的选择题,在群里引出了一众社区知名人士竞折腰,最后钓出了 Evan You 本人亲自挑战……然后他自己也做错了(其中的某两道)。鲁迅会做错鲁迅文选的阅读理解?有截图为证:所以,只要答对这十道题里的九道以上,你就实打实地(在做题这个维度上)超越了尤大,比他更懂 Vue 了噢!是不是很心动?其实要求都不用这么高,只要做对六七道,就已经可以吊打一群小有名气的社区选手了。所转载 2020-11-04 16:02:22 · 395 阅读 · 1 评论 -
Vue打包优化之gizp压缩
前言:gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。在 Vue CLI3 中webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。安装插件:npm i -D compression-webpack-pluginwebpack配置在 vue.config.js 中按照如下方式进行配置const CompressionPlugin = r原创 2020-05-22 12:00:07 · 581 阅读 · 0 评论 -
Vue打包优化之路由懒加载
前言当打包构建项目时,js包会变得非常大,影响页面加载,我们把不同路由的对应组件分割成不同的代码块,然后当路由被访问的时候加载对应的组件,这样能提升访问效率。切分之后,并不是浏览器访问某个路由,才去下载对应的模块,仍然在首次访问程序时,下载所有模块,只不过每个模块分的很小,加载首页时需要的模块能够更快的下载下来,所以能够更快的显示解决方案 基础写法,没有懒加载,打包分离代码 路由懒加载,import()方法。(按需加载) vue的异步组件+webpack的ensure(原创 2020-05-14 18:20:43 · 533 阅读 · 0 评论 -
webpack(基础篇)
一、基本使用先让我们来看看最基本的一种使用webpack的方式.首先你得知道, webpack和其它依赖一样, 是包括本地安装和全局安装的, 但是在此我建议你使用本地安装的方式, 不推荐全局安装。因为使用了全局安装之后, 会使你的项目中的webpack锁定到指定版本中,并且在使用不同的webpack 版本的项目中,可能会导致构建失败.所以在后面的教材中, 我都会以本地安装webpa...转载 2020-06-09 14:15:08 · 374 阅读 · 0 评论 -
前端代码优化(基础)
索引优化代码先来看一个简单的例子:需求是星期回显,传 1 回显 星期一,传 7 回显 星期日,其他类推,无效回显空字符串;类似的需求还有回显月份第一种实现方法: switch 实现function previewWeek(i){ switch(i){ case 1: return '星期一' break;...原创 2020-04-19 13:53:59 · 815 阅读 · 0 评论 -
关于Element-UI Upload 上传图片第二次或第N次无反应的问题
如果我们设置了 :limit="1" ,在我们上传完成第一张图片后,如果想更改当前的图片那么很幸运的告诉你,不行、没效果。发现后是不是立刻百度,会发现很多错综复杂的解决方案!直到自己眼晕脑胀也没有一点办法,那么很幸运的告诉你,你找到了我!导致整个问题的原因是因为你没有清除当前files,导致他一直保存这你第一次上传文件的信息,只要你把他一刀切掉就好了!那么问题来了,应该怎么清除呢!看下面...原创 2020-03-11 19:07:17 · 7510 阅读 · 12 评论 -
Vue 图片加载错误处理(显示默认图片)
在Vue H5项目中,图片加载错误,需要给图片一个默认的配图,如图:如果不给默认图片的话会是这样,如图:这样是不是很丑,哈哈哈哈!那么我们应该怎么处理呢?上码:<img :src="图片地址变量" alt="" @error="imgError(图片地址变量)">imgError(图片地址变量){ 图片地址变量 = require(...原创 2020-01-20 16:51:50 · 3271 阅读 · 0 评论 -
简版仿vue双向数据绑定
简版双向数据绑定 了解Object.defineProperty(): 这个API是实现双向绑定的核心,最主要的作用是重写数据的get、set方法,现在的三大框架(vue react angular)也都是通过这个API来实现双向绑定的。使用方式:let obj = { singer: "周杰伦"};let value = "青花瓷";Object.defineProper...原创 2020-01-06 11:23:07 · 273 阅读 · 0 评论 -
Vue的钩子函数-守卫篇
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢…Vue-Router导航守卫:有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导...原创 2020-01-06 10:02:08 · 354 阅读 · 0 评论 -
vue 复制剪切板功能
在没项目中经常遇到要求可以复制一东西便于用户去粘贴。下面就说说两个简单粗暴的方法第一种:利用document.execCommand() 这个方法 执行浏览器复制领命<template> <div class="seller-box" @click="Copy('我要复制')"></dev></template>meth...原创 2019-12-31 11:49:07 · 486 阅读 · 0 评论 -
Vue 配置postcss.config.js CSS处理和移动端适配方案!
今天跟大家聊了一下 vue 中的CSS 处理:postcss.config.js首先我们要了解一下什么是 postcsspostcss:它是一个利用JS插件来对CSS进行转换的工具,这些插件非常强大,强大到无所不能。拥有极高的处理性能(3倍以上的处理速度) 你既可以写正常的CSS,也可以结合LESS或者SASS一起编写 对Source Map支持更好 他的插件真的太多太强大太便利...原创 2019-11-22 18:06:46 · 32595 阅读 · 5 评论 -
vue项目 使用provide、inject无闪烁刷新当前页面
解决的办法及遇到的问题:this.$router.go(0)这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的。 location.reload()这种也是一样,画面一闪,体验不是很好推荐解决方法:用provide/inject组合原理:允许一个祖先组件向其所有子孙后代...原创 2019-10-17 10:03:12 · 313 阅读 · 0 评论 -
vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
业务的需要:我要对与会人员勾选,记录所选的与会人员,并且点击到别的页面上时也要记录所勾选的。第一次尝试,每次点击下一页数据都会清空。然后我就去element ui官网查看了api.实现如下:在table一定要定义以下事件和列表属性:row-key reserve-selectionhandleSelectionChange这个事件的作用是我保存勾选数据的。 <el-tabl...原创 2019-10-16 14:44:38 · 607 阅读 · 0 评论 -
一看就懂的vue环境变量配置
这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍,只有极简的实用配置。旨在给需要的朋友提供帮助以及自己温故知新,真正一看就会懂,懂了就能用。配置环境变量的目的项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同,若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生,我们只需做简单的配置...原创 2019-09-29 17:24:33 · 10073 阅读 · 2 评论