自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(17)
  • 收藏
  • 关注

原创 vue图片懒加载

在开发中,有一些页面以图片展示为主,界面不可见部分可能有很多图片用户并不会去看,而且图片消耗的流量十分多,必须要优化。1、安装vue-lazyloadnpm i vue-lazyload -S2、在main.js配置文件引入import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { preLoad: 1.3,...

2018-08-17 09:56:25 6952 1

原创 js获取url后的参数

前端页面传参主要是通过url实现:https://www.baidu.com?id=45&user=Jack该链接,传递了id和user两个参数,那么我们需要获取到这两个参数。1、封装一个全局方法export function getUrlParam(name) { let reg = new RegExp("(^|\\?|&)" + name + "=([^&a...

2018-08-17 09:41:17 6035 1

原创 js操作localstorage

localstorage是web前端常用的本地存储服务,它相对于cookie,有几个优势:①数据存储量大②不会携带给后台,避免传输没用的数据③操作简便1、首先,封装一个全局方法,以便各个地方调用export function handleLocalStorage(method, key, value) { switch (method) { case 'get' ...

2018-08-17 09:28:54 21293

原创 js时间format

在数据库中,时间大多以时间戳格式存储,前端需要将之转换为对应的时间格式一、手动转换1、获取当前时间let nowTime = new Date();2、获取当前时间戳let nowTimeStamp = new Date().getTime();3、将时间戳转换为标准时间格式let time = new Date(timeStamp);//例如:let tim...

2018-08-17 09:13:22 7774

原创 IOS网页title无法动态更改

动态更改title的常用代码如下:document.title = "标题";这句代码在IOS上,QQ内置的浏览器里并没有效果。原因是IOS加载一次title,就不在监听title的变化。我采用 iframe 来更改title。export function changeTitle(title) { document.title = title; let iframe = ...

2018-08-16 18:24:39 7145

原创 vue按需加载

vue-cli构建的vue项目,在打包的时候,会把所有vue模板打包成一个app.js包,在项目页面比较多的时候,这个文件会非常的大。用户第一次访问,要加载vendor.js依赖包和app.js两个比较大的文件,响应非常慢。那么,就要把app.js拆分开来,打包成多个文件,访问哪个模板路由,就加载哪一个。不需要一次把所有模板页面全部加载。解决办法:在router/index.js文件中...

2018-08-15 14:31:31 6339 1

原创 判断浏览器类型,微信,QQ

在移动端网页开发中,我们经常需要判断浏览器类型,是在微信内置浏览器,还是QQ内置浏览器,或者是其他浏览器打开。function is_weixn_qq(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { re...

2018-08-15 12:17:52 4721

原创 toggle事件jquery

jquery在1.9版本之后,移除了toggle()方法,连续循环点击事件。添加toggle()方法,在jquery引入之后,添加如下代码:$.fn.toggle = function( fn, fn2 ) { var args = arguments,guid = fn.guid || $.guid++,i=0, toggle = function( event ) {...

2018-08-15 12:12:35 5269

原创 css图片模糊效果

效果图:封面图为背景,进行模糊处理设置好背景样式,定位在底层,模糊css样式如下:background-image: url("http://qiniu.jnwtv.com/PC2016082914250584788070.jpg");background-position: center;background-size: cover;filter: blur(12px);-...

2018-08-15 11:46:10 7774

原创 vue使用jquery

vue开发模式是操作数据,进行模板渲染。而jQuery开发模式是操作dom元素,进行数据填充。这是两种截然不同的开发模式,所以建议在vue开发中,不要使用jQuery。如果非用不可,使用步骤如下:1、安装jQuerynpm i jquery -S2、修改jQuery配置,打开build/webpack.base.confmodule.exports = { ... alia...

2018-08-15 11:34:48 4667

原创 vue mock数据,模拟后台接口

在前端开发过程中,有后台配合是很必要的。但是如果自己测试开发,或者后台很忙,没时间,那么我们需要自己提供或修改接口。下面提供两种方式,第二种更简单,个人推荐第二种。一、mock文件1、安装,开发环境npm i mockjs -D2、在src目录下新建mock目录,结构如下:3、index.js内容如下:const Mock = require('mockjs');...

2018-08-15 11:20:24 37411

原创 vuex数据持久化

1、安装npm i vuex -S2、在src目录下,新建store/index.js文件import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)export default new Vuex.Store({ state: { user: "" }, // mutations更改...

2018-08-15 11:00:31 6962

原创 vue组件通信

父子组件之间,需要进行数据传输父 ——> 子 props传递参数; 子——> 父 emit方法传递数据父组件:<template> <div> <child :propsName="propsData" @vote="voteId"></child>

2018-08-15 09:28:10 4468 1

原创 vue图片上传

图片上传是以表单的形式提交,vue上传图片步骤如下:1、绑定input框上传事件change<input type="file" @change="uploadFile($event)" multiple="multiple" />2、change事件触发methodsmethods:{ uploadFile:function(event){ t...

2018-08-14 17:21:38 8718

原创 vue去掉#,history模式

一、vue项目携带一个#会对开发造成一定的影响:1、微信三方登录回调地址,有#号时,接收不到code参数2、微信H5支付的回调地址,不允许有#3、App分享,处理特殊字符时,可能会对#进行编译4、有点影响美观现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大的障碍。话不多说,开始去掉#吧。二、去#的原理vue把#当做自己的根目录,静态资源,比如图片。去掉...

2018-08-14 17:11:15 26904 3

原创 vue i18n国际化

1、安装i18n插件,配合使用饿了么UI框架http://element-cn.eleme.io/#/zh-CN/npm install vue-i18n -Snpm install element-ui -S饿了么UI的组件语言也会一同更改,如图(英文状态):2、在src目录下,创建多语言目录i18nlangs目录下为语言配置文件,languages目录下为语言js...

2018-08-14 16:05:10 6089 1

原创 vue浏览器返回监听

分享页面时,希望点击浏览器回退按钮,回到项目首页,增加访问量。需要监听浏览器的回退按钮,并阻止其默认事件。具体步骤如下:1、挂载完成后,判断浏览器是否支持popstatemounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, d...

2018-08-14 14:54:40 42244 5

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除