分类 前端技术 下的文章

两种方案清除定时器，开发者经常使用方案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请求，再将请求转发到源服务器。它属于共- 阅读剩余部分 -

mpvue 安装比较简单，直接就把官方的步骤贴过来了# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev 1.在mpvue + vuex项目中我们不能通过vue那种方式来将store对象实例注入到每个子组件中从而无法使用this.$store.state.xxx、t- 阅读剩余部分 -

在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 - 阅读剩余部分 -

问题描述：只能用http://localhost:8080访问项目,不能用http://本机IP:8080访问解决方案一：webpack dev配置文件中加上host:'0.0.0.0' 解决方案二：在 npm run dev 时添加参数 --host 0.0.0.0即可或者在webpack的package.json"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host - 阅读剩余部分 -

根据js对象的浅拷贝来实现数组的自我递归调用来实现数据排序排序前图排序后图代码直接贴上，喜欢研究的自己可以研究下，很有意思的。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据对象的浅拷贝来实现对数组的排序</title> </head> <body> <script src="sortJson.js&quo- 阅读剩余部分 -

1. 数组转字符串.join() 将数组中所有元素放到一个字符串中，并用指定的分隔符进行分割const a = [1, 2, 3] a.join(',') // "1,2,3" a.join('_') // "1_2_3" 2. 字符串转数组.split() 将字符串以指定的分隔符分割成数组const a = '720_1_6' a.split('_') // [720, 1, 6]

一、普通数组排序　　js中用方法sort()为数组排序。sort()方法有一个可选参数，是用来确定元素顺序的函数。如果这个参数被省略，那么数组中的元素将按照ASCII字符顺序进行排序。如：var arr = ["a", "b", "A", "B"]; arr.sort(); console.log(arr);//["A", "B", "a", "b"] 因为字母A、B的ASCII值分别为65、66，而a、b的值分别为- 阅读剩余部分 -

最近调试程序遇到了个net::ERR_UNSAFE_PORT 开始以为是跨域问题后来百度才发现是浏览器端口限制问题不想修改浏览器设置的就改用其它端口吧，搜索了一下，Firefox也有类似的端口限制；如果非要使用类似的端口，我们要做的是允许访问非常规端口地址，解决办法：选中Google Chrome 快捷方式，右键属性，在”目标”对应文本框添加：--explicitly-allowed-ports=87,6666,556,6667 允许多个端口以逗号隔开，最终如下：C:\Users\Huoqing\AppData\Local\Google\Chrome\Applicatio- 阅读剩余部分 -

　浏览器渲染页面的方式各不相同，甚至同一浏览器的不同版本（“杰出代表”是 IE）也有差异。因此，浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册，那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack，记得推荐和分享啊！IE 选择器 Hack/* IE 6 and below */ * html .selector {} .suckyie6.selector {} /* .suckyie6 can be any unused class */ /* I- 阅读剩余部分 -

方法一：在router/indexs.js文件下配置路由import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history',// 使用 HTML5 的 History 路由模式，通过‘/’设置路径 routes: [ { path: '/', name: 'index', component: (resolve) => require(['@/page/i- 阅读剩余部分 -

原文：5 Vuex Plugins For Your Next VueJS Project 作者：Anthony Gore使用 Vuex 来管理 Vue 的状态，有很多好的理由。其中之一就是，通过 Vuex 插件可以非常容易的扩展一些很酷的功能。Vuex 社区中的开发人员已经创建了大量的免费插件供你使用，有许多你能想象的功能，还有一些你可能没有想到的功能。在本文中，将向你展示5个特性，你可以通过 Vuex 插件轻松地添加到下一个项目中。状态持久化同步标签页、窗口语言本地化管理多个加载状态缓存操作状态持久化vuex-persistedstate 使用浏览器的本地存储（ loc- 阅读剩余部分 -

Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：安装：npm install --save vuex-persist or yarn add vuex-persist 引入：import VuexPersistence f- 阅读剩余部分 -

最近在修复IE10,11浏览器的bug，今天下午我F12准备调试js的时候，竟然发现控制台报错了！网上搜索了半天，解决方案如下：http://www.microsoft.com/en-US/download/details.aspx?id=45154 （64位）http://www.microsoft.com/en-US/download/details.aspx?id=45134  （32位）

　最近测试给了我一大堆BUG，一瞅发现全是IE11的。吐槽一下这个浏览器真的比较特立独行。很多默认的样式跟别的浏览器不同，而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍。但是当需要修改的时候又头疼了。如果改变原有的padding值，那么在IE11生效了。别的浏览器又有问题了。于是在网上搜了一下有没有专门针对IE11的CSShack，就是只对IE11生效的CSS样式，一查还真有。就是在CSS样式文件中加一个@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){里面是你的- 阅读剩余部分 -
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7