分类 前端技术 下的文章

https://cn.vuejs.org/v2/api/#v-cloakv-cloak这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。示例://css [v-cloak] { display: none; } //html <div v-cloak> {{ message }} </div>

<el-upload class="upload-demo" ref="upload" :on-change="handleUploadChange" :on-success="handleImportSuccess" :before-upload="beforeImportUpload" :http-request="uploadZip" :file-list="fileList&q- 阅读剩余部分 -

最近搞了个组件发现在实现input 离焦下拉收起,和点击下拉里面的选项进行选择的时候,会同时触发blur和click事件,如图:经过分析发现主要原因是由于blur事件会比click事件更先触发导致的。发现问题了就好解决了把click使用mousedown事件来代替就解决了

最近在搞纯页面外部引入vue.js的项目(非脚手架)今天遇到了坑,发现在子组件利用emit像父组件传值就是不好使,最后发现利用$emit 创建自定义事件,方法名一定要小写,大写是不会生效的,和脚手架开发还是有好多区别的,做个笔记

一、JS是单线程语言由于JS设计的初衷就是用来进行一些简单的用户交互以及DOM操作,为了避免复杂性,从一开始JS就被设计成一门单线程语言,现在如是,以后也不会变。然后正是由于单线程的缘故,当我们需要在前端运行一些大运算量的代码时,浏览器肯定会陷入卡顿。为了解决前端大运算量问题,HTML5引入了WebWorker。二、WebWorkerWebWorker是浏览器为我们提供的一个可以在浏览器后台开启一个新的线程的API,使得运行在浏览器中的 js 有了多线程的能力。但是这并不意味这js本身就支持多线程,因为这种新线程有很多限制:不能操作DOM;受主线程控制;和普通JS相比有很多- 阅读剩余部分 -

很多人都会遇到这个问题!一般情况先这个问题你百度就会有一大堆的答案,也许你运气好很快就能解决!虽然我这里讲述的可能会跟网上的部分教程有一样,因为我也是从他们那总结出来的!但是我这里是把大家可能遇到的情况都说清楚,包括网上没有答案的情况!下面都是我被坑了一天总结出来的!希望看到的朋友少踩坑!如果你遇到其它的奇葩问题,欢迎给我留言或者联系我个人QQ,因为很多坑我都踩过,希望能帮到你!【新版解决方案】:一句命令解决 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/【旧版解决方案- 阅读剩余部分 -

1.安装vue-cli时经常卡住,将npm的仓库地址改为淘宝镜像原npm地址 npm config set registry http://registry.npmjs.org npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global 2.验证配置npm config get registry 使用cnpm工具安装npm install -g cnpm --registry=htt- 阅读剩余部分 -

video.js是一个很好的视频播放插件,但是如果移植到vue上相信很多小伙伴很苦恼,是不是网上搜了一堆,发现不好使,我也是踩坑了,后来发现官方文档上就有,好尴尬,建议以后学习先看看官方文档,会有惊喜的。1.首先安装video.js,然后在main.js中引入npm i video.js -D //安装 //main.js 引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video; 1.先官方基础的使用方法,自定一个组件,说明一下在使用v- 阅读剩余部分 -

使用vue就避免不了用element-ui使用table总是遇到设计小姐姐搞出来的不一样的空提示效果代码只要在el-table里面增加如下代码就可以了<template slot="empty"> <div class="table_empty"> <div class="empty_tips">暂无未推修任务, <el-button @click="newFixTask" type="text" size=&- 阅读剩余部分 -

今天无意间发现在浏览器是查看查看webpack下的所有程序的源码的,感觉这算是个bug,为了代码安全性,还是禁止掉比较好,因为我不想打包后的项目别人还能看我的vue源码,所以要做下配置如果是vue cli2 我们需要打开config/index.js 搜索 build,将build对象下面的productionSourceMap设置成false就可以了如图productionSourceMap: false, // 生产环境的 source map 设置上线后是否加载webpack文件 如果是vue cli3 那么在根目录打开vue.config.js,如果没有就自己创建- 阅读剩余部分 -

1.由于使用 uglifyjs-webpack-plugin 插件打包会报错,不在介绍使用方法,2.使用webpack提供的删除console的插件:安装terser-webpack-pluginnpm install terser-webpack-plugin -D 然后在vue.config.js中写插件的配置:module.export = { configureWebpack: (config)=>{ if(process.env.NODE_ENV === 'production'){ config.optimization.minim- 阅读剩余部分 -

很奇怪,Y轴只显示了部分节点。没有显示全。在yAxis上加上下面的配置就能解决:yAxis: { type: 'category', axisLabel :{ interval:0 }, data: ['学生一', '学生二', '学生三', '学生四', '学生五', '学生六', '学生七'] }, 坐标轴刻度标签的显示间隔,在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签,可以设置成 0 强制显示所有标签。axisLabel :{ interval:0 },

vue create hello-world创建项目的时候选择了Linter / Formatter,所以写代码的时候会有代码规范检查,怎么才能关闭这个校验呢1.项目创建好后会生成 .eslintrc.js文件module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', // '@vue/standard',//这行注释就可以 '@vue/typescript' ], rules: { 'no-c- 阅读剩余部分 -

两种方案清除定时器,开发者经常使用方案1,建议使用方案2方案1首先我在data函数里面进行定义定时器名称:data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器:this.timer = (() => { // 某些操作 }, 1000) 最后在beforeDestroy()生命周期内清除定时器:beforeDestroy() { clearInte- 阅读剩余部分 -

vue-piczoom 基于vue2.x的电商图片放大镜插件,修复了图片放大的一些bug,看懂的就看看,看不懂的就算了,太忙没时间写笔记备注了,可以自己用对比工具去看下修改了哪些<template> <div class="magnifier-box" :class="vertical?'vertical':''" :ref="id" @mousemove="mousemove" @mouseover="mouseover" @mouseleave- 阅读剩余部分 -

因为加载图片是异步的,在图片的相关数据没有加载完之后,宽高都是默认为0,所以我们要给imgDom增加个onload方法。let imgDom = new Image(); imgDom.src = this.bigUrl?this.bigUrl:this.url; imgDom.onload = () => { // 打印数据 console.log('width:' + imgDom.width + ', height:' + imgDom.height); }

最近学习了下angular,利用Angular CLI 在本地搭建了个环境,然后装了个ant.design的NG-ZORRO库,试了下用ui的脚手架来创建组件ng g ng-zorro-antd:form-normal-login login 创建完成发现访问项目的时候,在使用nz-form时报错Can't bind to 'formGroup' since it isn't a known property of 'form',百度了下解决方案:需要从@angular/forms导入ReactiveFormsModule。因为FormGroupDirective 指令属于- 阅读剩余部分 -

npm run dev 错误提示:{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. 解决方法:找到你的工程文件夹里的 YourProName\node_modules\vue-loader\lib\template-compiler\index.js//将以下代码 if (!isProduction) { code = prettier.format(code, { semi: false, parser: 'babylon' - 阅读剩余部分 -

一. 标签实现新窗口打开:官方文档中说 v-link 指令被 组件指令替代,且 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 是支持 target="_blank" 属性的(tag="a"),示例如下:<router-link target="_blank" :to="{path:'/user/document',query:{id:'1'}}">新页面打开home页</router-link- 阅读剩余部分 -

JavaScript 是单线程的,但提供了很多异步调用方式比如 setTimeout,setInterval,setImmediate,Promise.prototype.then,postMessage,requestAnimationFrame, I/O,DOM 事件等。 这些异步调用的实现都是事件循环,但根据插入的队列不同和取任务的时机不同他们的表现也不同。 尤其在涉及与页面渲染的关系时。TL;DR页面渲染/交互任务也会插入在 Task Queue 中,会与各种异步机制插入的任务交错执行。Microtask Queue 会在下一个任务开始之前清空。单个耗时任务和 Mi- 阅读剩余部分 -

如何完美滴使浏览器访问一个 HTML 页面时禁用缓存?在测试某个 SPA 项目时,发现更改后 Chrome 浏览器页面刷新还是使用之前的版本。经调查发现 Chrome 默认缓存值为 300 秒。经测试跨浏览器禁止缓存的 headers 如下:Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0 Cache-Control is for HTTP 1.1Pragma is for HTTP 1.0Expires is for proxies因为是 HTML 页面,可以于 H- 阅读剩余部分 -

在前端开发中,性能一直都是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。那么下面我们就来看看服务器端缓存的原理。缓存分类web缓存分为很多种,比如数据库缓存、代理服务器缓存、还有我们熟悉的CDN缓存,以及浏览器缓存。对于太多文字的阅读其实我是拒绝的,于是就画了个图来解释下。浏览器通过代理服务器向源服务器发起请求的原理如下图,浏览器先向代理服务器发起Web请求,再将请求转发到源服务器。它属于共- 阅读剩余部分 -

在vue项目中,如果服务上没有这张图片,那么前端展示时就会出现渲染出错图:解决方案:1.在img图片标签中绑定onerror事件<div class="img-div" v-loading="partImageInfoState" element-loading-text="数据加载中..."> <img v-if="currentImagePart.imgUrl" :src="'/static/images/parts/'+currentImagePart.im- 阅读剩余部分 -

最近做webpack基于vue-cli的打包优化,调试到productionGzip文件压缩优化,在项目 根目录config/index.js 中 build 对象内找到 productionGzip: false, 把 false改为true 实现启用。属性值修改后,这个时候可以执行 npm run build。但是会报错compiler.hooks.emit.tapAsync({ name: 'CompressionPlugin' }, emit); 排查了下原因,然后我去看了下:https://www.npmjs.com/package/compression-w- 阅读剩余部分 -

随着项目越来约庞大,导致构建包的时候速度缓慢!首先推荐使用wepback的可视化资源分析工具。以下给出webpack-bundle-analyzer配置【vue-cli构建项目时会自动配置好】安装webpack-bundle-analyzer控制台输入npm/cnpm install --save-dev webpack-bundle-analyzerconfig/index.js文件中module.exports = { build: { ... // Run the build command with an extra argument to - 阅读剩余部分 -