前端开发
前端开发
晴天有点孤单
等风来,不如追风去
展开
-
H5 移动端 保存图片到本地 + 图片预览
动态创建A链接,添加download属性和href属性,并触发点击事件。动态创建A链接,添加href属性,并触发点击事件。原创 2022-12-28 11:44:08 · 1810 阅读 · 1 评论 -
樱花飘落效果,可附带祝福语~
效果图如下视频地址: https://live.csdn.net/v/201026 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>晴 天</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Au原创 2022-04-21 16:28:33 · 383 阅读 · 0 评论 -
h5 vue vant @click @bulr 或者 移动端touch 事件冲突 解决办法
场景 失焦的时候关闭 选择列表 但是同时 点击列表的时候会触发 bulr 事件 然后 click事件失效解决办法 click 换 mousedown ( tips:事件优先执行顺序 mousedown > bulr > click)如果是移动端 同理 touchstart > bulr > touch...原创 2019-12-21 18:14:46 · 2269 阅读 · 0 评论 -
vscode 如何格式化vue(template)html代码 , 保持标签属性不换行
打开vscode的 》文件 》 首选项 》设置找到vetur 这个选项里面的vetur.format.defaultFormatter.html 这个选项 将其设置为 js-beautify-html前提是你必须安装了这两个插件然后重新加载格式化的时候就不会在格式化html里面的内容了 完整的setting.json配置可以来这里看https://blog.csdn.net/qq_3...原创 2018-11-27 14:37:26 · 11792 阅读 · 0 评论 -
正确理解使用Vue里的nextTick方法 (如何在数据或dom渲染结束后再执行函数或方法)
Vue.nextTick(callback),当数据发生变化,更新后执行回调。Vue.$nextTick(callback),当dom发生变化,更新后执行的回调。示例:&lt;ul id="demo"&gt; &lt;li v-for="item in list"&gt;{{item}}&lt;/div&gt;&原创 2018-11-03 10:06:56 · 15892 阅读 · 2 评论 -
vue如何在用户要关闭当前网页时弹出提示
正常 js 页面处理方式window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ r...原创 2018-10-27 15:47:54 · 22871 阅读 · 27 评论 -
vue 爬坑 之js 对象/数组 赋值/拷贝 解决VUE中赋值引用后数据双向改变的问题
浅拷贝这里就不讲了,我们直接讲深拷贝正常的数组/对象拷贝可以直接用const cloneObj = JSON.parse(JSON.stringify(Obj));这种方式可以解决相当多一部分的赋值问题,但是一些特殊属性除外(undefined/function)在vue 或者js 中有时需要对一些特殊数据处理,比如VUE中的table等…这个时候就需要用到第二种方法处理数据附代码:...原创 2018-10-23 15:02:46 · 4827 阅读 · 3 评论 -
js 怎样判断用户是否在浏览当前页面?
可以通过document.hidden属性判断当前页面是否是激活状态。兼容性:IE10+,Firefox10+,Chrome14+,Opera12.1+,Safari7.1+兼容性写法示例:var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHid...原创 2018-10-13 13:35:22 · 775 阅读 · 0 评论 -
前端面试知识汇总
前端面试知识汇总1、http工作原理2、http缓存机制3、首页性能优化4、vue双向数据绑定原理5、vue依赖收集的实现6、Promise实现原理7、CDN缓存与客户端缓存8、get请求与post请求区别,优缺点9、进程与线程10、UDP与TCP,适用场景11、http与https区别12、http1.0、http1.1与http2.013、webpack基本配置14...转载 2018-09-21 17:26:40 · 267 阅读 · 0 评论 -
vue2.0 cli +webpack 多入口开发 配置教程附详细代码
配置好以后的目录:webpack.base.conf.js目录下,在module.exports的那里,找到entry,在那里配置添加多个入口:打开\build\webpack.dev.conf.js文件,在module.exports那里找到plugins,下面写法如下:在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量...原创 2018-08-21 20:20:29 · 1969 阅读 · 8 评论 -
初窥vue,入门理解(适用于初学者)
一、事件冒泡方法一、使用event.cancelBubble = true来阻止冒泡<div @click="show2()"> <input type="button" value="按钮" @click="show1($event)"> </div> methods:{ show1:function(ev原创 2017-08-15 16:41:45 · 310 阅读 · 0 评论 -
ESLint 禁用检查
可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告:/* eslint-disable */alert('foo');/* eslint-enable */你也可以对指定的规则启用或禁用警告:/* eslint-disable no-alert, no-console */alert('foo');console.log('bar');/* eslint-enable no...原创 2018-11-12 18:17:10 · 4945 阅读 · 0 评论 -
qs.stringify和JSON.stringify的使用和区别
qs.stringify和JSON.stringify使用和区别qs.stringify可以通过npm install qs进行安装是一个npm仓库所管理的包。而qs.stringify()将对象 序列化成URL的形式,以&进行拼接。JSON是正常类型的JSON,请对比一下输出let ObjectDemo = {name:'weixin',age:12}; qs.stringif...原创 2018-11-16 13:22:36 · 3864 阅读 · 0 评论 -
浅谈 http和https
HTTP 是 超文本协议,TCP 端口是 80 HTTPS 是一种配合了SSL协议的、加密的HTTP 协议 ,TCP端口是 443HTTP : HTTP(HyperText Transfer Protocol)协议是非常常见的网络协议,是专门用来传输WEB内容的,提供了发布和接收HTML的方法,大部分网站都是通过HTTP协议来传输WEB页面的(HTML、CSS、JS等)SSL/T...原创 2018-11-30 15:55:29 · 182 阅读 · 0 评论 -
什么是CDN加速?
CND概况CDN的全称是Content Delivery Network,即内容分发网络。CND加速主要是加速静态资源,如网站上面上传的图片、媒体,以及引入的一些Js、css等文件。CND加速需要依靠各个网络节点,例如100台CDN服务器分布在全国范围,从上海访问,会从最近的节点返回资源,这是核心。CND服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。关于CDN一些专业人士的解答...转载 2018-11-30 15:58:33 · 187 阅读 · 0 评论 -
手写 ES6 promise
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>promise对象原理详解</title> </head> <原创 2018-12-03 16:07:02 · 327 阅读 · 0 评论 -
封装原生js 获取地址栏请求参数
// 获取地址栏请求参数function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var result = window.location.search.substr(1).match(reg); if (result...原创 2018-12-27 13:33:25 · 920 阅读 · 0 评论 -
企业微信获取扫一扫登录 获取 code
实现方法如下1.引入script&amp;amp;lt;script src=&amp;quot;http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js&amp;quot; type=&amp;quot;text/javascript&amp;quot; charset=&amp;quot;utf-8&amp;quo原创 2018-12-27 13:39:28 · 1529 阅读 · 0 评论 -
前端常用字典 (html+css)篇
1.1 水平居中 1.1.1 行内元素 (父元素)text-align,(子元素)inline-block .parent{text-align:center} .child{display:inline-block} 1.1.2 块状元素 使用margin:0 auto来实现 .parent{} .child{width:20...原创 2018-12-28 18:26:28 · 4502 阅读 · 0 评论 -
获取两个时间之间的月份
// 获取两个时间之间的月份 getMonthBetween (start, end) { var result = [start]; var starts = start.split('-'); var ends = end.split('-'); var staYear = parseInt(starts[0]); var ...原创 2019-02-27 13:43:37 · 617 阅读 · 0 评论 -
css + iview 加载动画
html<template> <div class="loading"> <Spin class="img"> <Icon type="load-c" size=38 class="demo-spin-icon-load"></Icon> &l原创 2018-08-20 16:38:39 · 3383 阅读 · 2 评论 -
jsonp跨域的原理以及优缺点
在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,iframe等1.jsonp的原理 jsonp,即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说漏洞),服 务...原创 2018-08-20 13:37:32 · 3865 阅读 · 0 评论 -
vscode cpu 占用过高解决办法
前阵子我家里的电脑中的vscode,出现过CPU占用过高,网上有人说是和淘宝镜像冲突,但是今天公司的电脑也出现这个问题,查看了下npm镜像,发现没有装淘宝的镜像,不知道是什么原因,网上有人这样说,在 文件=>首选项 搜索 search.followSymlinks 将这个值设置成false解决问题。 ...原创 2018-05-31 17:11:39 · 8329 阅读 · 0 评论 -
前端常见跨域解决方案
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求...转载 2018-05-30 19:40:21 · 209 阅读 · 0 评论 -
ES6 Promise 用法讲解
Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。如下代码var pTest = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成');...转载 2018-05-30 19:27:12 · 178 阅读 · 0 评论 -
iconfont 的使用方法
iconfont文件放在静态资源assets下面,每次更新更新iconfont 文件夹就可以页面操作如下 不喜勿喷<template> <div class="main"> iconfont <ul> cdn远程iconfont <li class="iconfont">&a原创 2018-05-30 18:58:56 · 1149 阅读 · 0 评论 -
VUE Cascader省市二级联动 二级联动数据
<template> <div> 省市区联动 <Cascader trigger="hover" placeholder="请选择您的城市" style="width:238px;display:inline-block;" :data="provs" v-model="formValidate.cityId"原创 2018-05-30 18:56:04 · 8492 阅读 · 1 评论 -
封装数组中遍历 自定义key value
使用方法如下 this.$utils.pub.getResult(this.getResult, 1, 'key', 'value') 封装如下util.getResult = function (arr = [], id = '', find = 'id', result = 'value') { let value = '' if (id === undefined || id...原创 2018-05-30 14:50:42 · 1129 阅读 · 0 评论 -
vue 项目api 封装 + 全局拦截处理 + 全局参数处理 + 处理ie缓存
import axios from 'axios'; import qs from 'qs'; import Vue from 'vue'; import Element from 'element-ui'; import stroage from '~/plugins/utils/localstroage'; Vue.use(Element); // let baseURL = ; ...原创 2018-05-30 14:38:24 · 3731 阅读 · 0 评论 -
使用vue-router设置每个页面的title
import Vue from 'vue'import VueRouter from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Sass from '@/pages/sass'import Filter from '@/pages/filter'import Store from '@/pages...原创 2018-05-30 14:34:58 · 1058 阅读 · 0 评论 -
web前端开发规范 文件规范 代码规范 项目规范 提交规范
前端开发规范 :代码规范1.1 写符合eslint规范的代码1.2 能以背景形式呈现的图片, 尽量写入css样式中; 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;1.3 代码中一次缩进2个空格1.4 语义化书写自定义标签或变量(禁止出现 a b 1 2 3这种无实际意义的代码)1.5 无特殊情况下统一用驼峰书写代码(不要人为缩短命名到最小除了传统...原创 2018-05-23 16:05:30 · 637 阅读 · 0 评论 -
vscode 前端 vue php 开发 插件安装
原创 2018-08-03 17:26:43 · 486 阅读 · 0 评论 -
git 分支 查看 切换 更新 删除 添加 常用操作大全
创建分支git branch dev创建+切换分支git branch -b dev查看远程分支加上-a参数可以查看远程分支,远程分支会用红色表示出来(如果你开了颜色支持的话):$ git branch -a master remote tungway v1.52* zrong remotes/origin/master remotes...原创 2018-07-27 20:12:09 · 1224 阅读 · 2 评论 -
es6,es7,es8语法总结 =====>> (不定期更新)
ES61. var let constlet,const具有块级作用域,不具有变量提升const 用于不能被重新赋值的变量2. 箭头函数我们经常要给回调函数给一个父级的this常用办法就是 var self = this 定义一个变量接住他使用 箭头函数,this 将不会受到影响,可以直接用this调用父级的this3. 字符串includes: c...原创 2018-08-17 16:02:31 · 2064 阅读 · 0 评论 -
js 原生 全局弹窗插件 徽标提醒
原生插件session+后端存储状态定时弹窗 徽标缩小显示import oas from '../api/oas';(function modal (option) { window.onload = function () { // 先检查登陆的人是否有此功能的权限 let hasPromise = 'yyyyy'; oas.get(hasPromis...原创 2018-08-06 17:13:38 · 1172 阅读 · 0 评论 -
vue编程式路由实现新窗口打开
一. 标签实现新窗口打开:官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 target=”_blank” 属性的(tag=”a”),示例如下:<router-link tag="a" target="_blank" :to="{name:'searchG...原创 2018-08-10 13:56:11 · 2975 阅读 · 0 评论 -
vscode =>setting.json 常用配置 git背景图 自动保存 eslint
{ &amp;amp;amp;quot;workbench.iconTheme&amp;amp;amp;quot;: &amp;amp;amp;quot;vscode-icons&amp;amp;amp;quot;, &amp;amp;amp;quot;editor.tabSize&amp;amp;amp;quot;: 2, &amp;amp;amp;quot;editor.detec原创 2018-07-27 20:42:51 · 7689 阅读 · 0 评论 -
nodejs入门 安装与使用详细步骤 小白必读
一、什么是NodeJSNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,成为世界上最大的开放源代码的生态系统。淘宝镜像网站:http://npm.taobao.org/npm install -g cnpm --registry=http...原创 2018-07-27 20:32:41 · 630 阅读 · 0 评论 -
基于vue+iview 时间选择插件封装处理
不定期更新<template> <div style="position: relative;display: inline-block;"> {{label}} <Date-picker v-model="params.startTime" @on-change="handleChangeStart" type="date" pl原创 2018-07-27 20:27:24 · 1236 阅读 · 0 评论 -
js封装moment 时间工具
不定期更新import moment from 'moment';/** * @Title: 时间处理-工具类提供一些便捷地工具服务 * * ===================================================================== * @Description: 工具索引 * 2、formatAddTime 时间 加法 ...原创 2018-07-27 20:26:11 · 745 阅读 · 0 评论