- 博客(17)
- 收藏
- 关注
RSS订阅原创 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
6962
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
6049
1
原创 js操作localstorage
localstorage是web前端常用的本地存储服务，它相对于cookie，有几个优势：①数据存储量大②不会携带给后台，避免传输没用的数据③操作简便1、首先，封装一个全局方法，以便各个地方调用export function handleLocalStorage(method, key, value) { switch (method) { case 'get' ...
2018-08-17 09:28:54
21305
原创 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
7790
原创 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
7156
原创 vue按需加载
vue-cli构建的vue项目，在打包的时候，会把所有vue模板打包成一个app.js包，在项目页面比较多的时候，这个文件会非常的大。用户第一次访问，要加载vendor.js依赖包和app.js两个比较大的文件，响应非常慢。那么，就要把app.js拆分开来，打包成多个文件，访问哪个模板路由，就加载哪一个。不需要一次把所有模板页面全部加载。解决办法：在router/index.js文件中...
2018-08-15 14:31:31
6347
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
4741
原创 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
5286
原创 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
7792
原创 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
4685
原创 vue mock数据，模拟后台接口
在前端开发过程中，有后台配合是很必要的。但是如果自己测试开发，或者后台很忙，没时间，那么我们需要自己提供或修改接口。下面提供两种方式，第二种更简单，个人推荐第二种。一、mock文件1、安装，开发环境npm i mockjs -D2、在src目录下新建mock目录，结构如下：3、index.js内容如下：const Mock = require('mockjs');...
2018-08-15 11:20:24
37427
原创 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
6975
原创 vue组件通信
父子组件之间，需要进行数据传输父 ——> 子 props传递参数； 子——> 父 emit方法传递数据父组件：<template> <div> <child :propsName="propsData" @vote="voteId"></child>
2018-08-15 09:28:10
4490
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
8734
原创 vue去掉#，history模式
一、vue项目携带一个#会对开发造成一定的影响：1、微信三方登录回调地址，有#号时，接收不到code参数2、微信H5支付的回调地址，不允许有#3、App分享，处理特殊字符时，可能会对#进行编译4、有点影响美观现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大的障碍。话不多说，开始去掉#吧。二、去#的原理vue把#当做自己的根目录，静态资源，比如图片。去掉...
2018-08-14 17:11:15
26914
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
6099
1
原创 vue浏览器返回监听
分享页面时，希望点击浏览器回退按钮，回到项目首页，增加访问量。需要监听浏览器的回退按钮，并阻止其默认事件。具体步骤如下：1、挂载完成后，判断浏览器是否支持popstatemounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, d...
2018-08-14 14:54:40
42260
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人