- 博客(112)
- 收藏
- 关注
RSS订阅转载 史上最全的CSS hack方式一览
原文标题：史上最全的CSS hack方式一览原文链接： https://blog.csdn.net/freshlover/article/details/12132801原文作者： 清枫草塘 做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的...
2018-11-27 10:09:26
185
转载 JS 中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题，我们可以使用以下几种方法： “一、通...
2018-11-26 10:45:55
151
转载 当我们在浏览器中输入一个URL后，发生了什么？
写在开头：这篇文章被我归入博客性能优化类别，是因为我认为如果我们要优化网站性能、提升用户体验，首要目标就是要知道用户在本地请求并加载你的网页的过程中，到底发生了什么，在此基础上我们才能更好的优化网页。图源：知乎-张秋怡浏览器解析并查询缓存DNS查询 DNS查询顺序如下，若其中一步成功则直接跳到建立链接部分： 浏览器自身DNS 操作系统DNS ...
2018-11-23 11:32:52
651
转载 利用css隐藏元素的几种方式
面试题 请列举几种隐藏元素的方法 visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在 opacity: 0; CSS3属性，设置0可以使一个元素完全透明 position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外 display: none; 元素会变得不可见，并且不会再占...
2018-11-23 11:01:04
1358
转载 css水平垂直居中解决方法
css居中方案是一个老生常谈的问题，主要包括水平居中和垂直居中，水平居中大家用的比较多，最常用的莫过于margin:0 auto方案了，而垂直居中，很多时候会让很多新手头疼。常用居中方案（水平） margin：0 auto解决方案 （水平居中） 适用于已经知道宽度，并且其父级宽度不为0的元素水平居中。 <!-- html --> <div class="...
2018-11-22 10:14:23
156
原创 vue关于父组件调用子组件的方法
首先引用子组件就不用说了，其次<child ref="mychild"></child>是在父组件中为子组件添加一个占位，ref="mychild"是子组件在父组件中的名字，这个必须有不然找不到是哪个子组件，最后通过this.$refs.ref.method调用子组件<template> <div> child &l
2018-10-24 10:27:45
407
转载 详解 vue-cli 的打包配置文件代码
一、前言 对于webpack基础不好，node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的，有种无从下手的感觉。然而，从头看这2块，耗时太长，而且说实话得练才行，不练练手看不明白。那大多数人就采取折中的方案，修改成熟的脚手架，改成自己想要的样子。这个相对来说难度降低了不少，不过依然会有很多难点不加不明白。所以这里就以Vue的脚手架为例子，将源码加上注释，方便大家加深对项...
2018-10-15 14:28:14
620
转载 前后分离接口规范
1. 前言随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自撸起袖子就是干，导致我们在产品项目开发过程中，前后端的接口联调对接工作量占比在30%-50%...
2018-10-09 11:19:26
1370
原创 js取整数、取余数、取小数点后几位的方法
取整1.取整// 丢弃小数部分,保留整数部分parseInt(5/2) // 2 2.向上取整// 向上取整,有小数就整数部分加1Math.ceil(5/2) // 3 3.向下取整// 向下取整,丢弃小数部分Math.floor(5/2) // 2 4四舍五入// 四舍五入Math.round(5/2) // 3 取余...
2018-09-26 16:59:00
25006
转载 base64编码与图片之间相互转换
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一一、将base64转换成图片 只需要在img 标签中引入即可，注意要加上标明前缀（data:image/png;base64），否则并不知道，这串代码是干啥的如：<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbybl...
2018-09-22 13:01:04
7304
转载 VUE 路由参数变化，页面数据不刷新问题
出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是第一次进入的数据。解决方法：watch监听路由是否变化watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 if(th...
2018-09-21 15:56:32
9977
2
原创 VUE 设置全局的静态变量
新建一个文件，global.js global.BASE_URL = 'http://vue.wclimb.site/images/' global.SOCKET_DOMAIN = 'https://xx.xx.com/filesystem/upload/' 然后在main.js中引入： //引入全局的静态变量 import './global/global...
2018-09-20 13:08:34
4579
转载 js得到今天日期、本周、本月、本年起始和结束日期
得到今天、昨天、明天日期function getDate(dates) { var dd = new Date(); var n = dates || 0; dd.setDate(dd.getDate() + n); var y = dd.getFullYear(); var m = dd.getMonth() + 1; var d = dd....
2018-09-16 14:31:42
1797
转载 vue点击图片放大预览图片支持旋转等
vue图片点击放大预览v-viewer库使用提到图片放大预览，可能好多人想到的是lightbox，在vue中使用lightbox还挺麻烦,但是伸手党做习惯了，所以去github上搜索了一个，感觉效果很完美，简单实用，所以推荐给大家。https://github.com/mirari/v-viewer github地址，下面是我这块使用的效果图。1.安装配置npm instal...
2018-09-09 23:51:52
1600
转载 view组件事件额外传参的解决办法
一、最近用iview遇到这样一个需求，在使用iview的组件时，希望在其定义的某个钩子事件的处理函数中传递额外的一个参数，同时又不影响该钩子事件默认的返回值。最后在网上查找资料找到了解决办法，这里把解决方案贴出来，仅供大家参考！二、我们以iview中Input组件为例，首先根据iview中Input组件的文档可以知道,on-change事件是有默认返回值event的，我们保留event返回值的...
2018-09-09 23:03:43
580
原创 关于fileReader的一个坑
在用fileReader做图片浏览上传时， 使用base64格式 var _this = this; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { PostBatchUpload...
2018-09-09 23:01:49
9380
转载 解决iview的DatePicker时间带T带Z格式问题
在用iview的DatePicker控件的时候遇到一个问题，因为在Model里面用这个时间摘取控件是最好的。但是它传到后台的数据是带T带Z不知道什么格式的。自己写了个转换器： 脚本代码： //时区日期格式转换(TZ)function changeDate(dateA) {var dateee = new Date(dateA).toJSON();var date ...
2018-09-01 10:18:27
4135
转载 从零开始搭建VUE项目
前言： 此样板面向大型，严肃的项目，并假定您对Webpack和vue-loader有些熟悉。 请务必阅读vue-loader的常见工作流配方的文档。如果您只想尝试vue-loader或者鞭打一个快速原型，请改用webpack-simple模板。快速开始： 要使用这个模板，可以用vue-cli来支持一个项目。 建议使用npm 3+更高效的依赖关系树：$ npm ...
2018-07-26 16:32:22
400
转载 node npm cnpm vue 搭建环境过程
一、使用之前，我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）开始：...
2018-07-26 15:02:00
1920
1
转载 vue:command not found
发生在全局安装完vue-cli之后执行vue命令的时候。 原因是因为没有把vue-init挂到系统的环境变量下。 vue init是用来初始化项目的
2018-07-26 14:57:32
1002
转载 配置vscode的终端为git
vscode和 git都下载好之后配置git 为vscode的终端1、点开终端 2、左下角的齿轮，选择设置 3、设置终端未git的bash.exe “terminal.integrated.shell.windows”: “C:\Program Files\Git\bin\bash.exe”4.重启，OK...
2018-07-26 11:33:12
6675
原创 前端代码风格规范
规范目的：为了提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构。规范基本准则：符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良。页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。一、文件规范1.1 HTML部分 1.1.1 建包问题 ...
2018-07-25 09:54:45
9538
转载 Vue2.0 子组件传值给父组件
this.$emit(event,...args);/** event: 要触发的事件* args: 将要传给父组件的参数*/ Usage： 子组件内容：<template><div @click="iclick"></div></template>methods:{ iclick(){ let...
2018-07-17 12:38:46
228
原创 vue项目中使用pdf.js预览pdf文件
项目要求需要预览pdf文件，网上找了很久，大多数都是推荐pdf.js，自己起了解了一下，最后决定用pdf.js，但是发现，在vue中使用这个很少！！！！！所以我就写这一篇帮助一下vue使用pdfjs的朋友！其实 这和前端框架无关的，直接使用pdf.js原生 搜多了你就发现有几个封装pdf.js的vue组件，个人试验了其中一个，效果不是很好，所以，当然啊，用原生的是最好的啦！...
2018-07-17 12:37:25
14039
7
原创 Vue 如何在页面渲染完后去操作dom，而且只执行一次
在接口请求成功的回调里使用this.$nextTick(() =>{ // 在这里面去获取DOM})。在mounted生命周期，组件挂载成功，但还未渲染，自然获取不到相关的DOM节点。看你资料好像不是前端，举个更简单的例子，你在html中，把 console.log(document.querySelector('body'))写在body标签前面，代码执行时机先于页面渲染，...
2018-07-17 12:29:18
14653
1
原创 监听滚动事件 实现动态锚点
前几天做项目的时候，需要实现一个动态锚点的效果如果是传统项目，这个效果就非常简单。但是放到 Vue 中，就有两大难题：1. 在没有 jQuery 的 animate() 方法的情况下，如何实现平滑滚动？2. 如何监听页面滚动事件？在浏览了大量文章、进行多次尝试之后，终于解决了这些问题期间主要涉及到了 setTimeout 的递归用法，和 Vue 生命周期中的 mounted...
2018-07-17 11:31:05
5496
原创 iView Tree 自定义
效果展示代码如下 <template> <Tabs :value="TabPaneValue" class="preparesTree"> <TabPane label="同步内容" name="Sync"> <div class="tree">
2018-07-17 09:21:57
9001
3
原创 iView Table组件自定义
效果展示 代码如下resourcesColumn: [ { title: "文件名", key: "FileName", align: "left", width: 200, render: (h, params) => { var me...
2018-07-17 09:18:20
7320
转载 vue-router 2.0 常用基础知识点之router.push()
vue-router 2.0 常用基础知识点之router.push()2017年04月01日 09:31:01阅读数：82574router.push(location)http://www.jianshu.com/p/ee7ff3d1d93d除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码...
2018-07-17 09:07:33
532
原创 vue如何获取当前页面的url
如果你使用 vue-router 文档在这里 路由信息对象的属性const routes = [ {path : '/portfolio/:year/review', component : Portfolio }];这个样子获取this.$route.params.yearthis.$route.query.id 或者（未尝试） 还有一种经常用的方式当...
2018-07-17 09:05:59
40588
1
原创 vue 解决循环引用组件报错
做项目时遇到使用循环组件，因为模式一样，只有数据不一样。但是按照普通的组件调用格式来做时报错，错误信息为Unknown custom element: <pop> - did you register the component correctly? For recursive components, make sure to provide the "name" option.查...
2018-07-17 09:00:28
2518
4
转载 vue路由传参的三种基本方式
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles" @click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 ...
2018-07-16 17:23:47
1999
原创 video-player实现hls播放全过程
安装依赖npm install vue-video-player --save 引入样式// 第一个是videoJs的样式，后一个是vue-video-player的样式，因为考虑到我其他业务组件可能也会用到视频播放，所以就放在了main.js内require('video.js/dist/video-js.css')require('vue-video-player/src/c...
2018-07-16 16:30:28
7136
2
原创 vue音乐播放器插件vue-aplayer的配置及其使用
在vue的官网上看到vue-aplayer这个音乐播放器的插件，由于个人有比较喜欢音乐，所以就拿过来玩一玩，感觉还是比较实用的，界面美观。首先，我们先安装 npm install vue-aplayer --save，之后在组件中引入 import VueAplayer from 'vue-aplayer'，下面就是源码，可供参考： <template> <...
2018-07-16 16:25:10
12554
2
原创 使用 iView Upload 组件实现手动上传文件
<template> <div class="Upload"> <Upload v-if="UploadStyle == 'no'" multiple type="drag" :accept="Accept" :format="Format" :max-size="FileMaxSize" :b
2018-07-16 16:20:53
26773
8
转载 别再用JS里面的Math.random()方法生成随机数
网上常能见到的一段 JS 随机数生成算法如下，为什么用 9301, 49297, 233280 这三个数字做基数？见到这个随机数生成算法好几次了，乍看有点鸡肋本来用Math.random()就可以的事。想不清楚为什么他要用9301,49297,233280这三个数字？其中有道理吗？还是仅是随意选的三个数？但是这个组合貌似流传很广。好多小网站源码里都见到过。 var ra...
2018-07-16 16:18:27
1257
转载 清除浮动
什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。引用W3C的例子，news容器没有包围浮动的元素。...
2018-07-16 16:17:21
157
转载 iview中tree的事件运用
iview中的事件和方法如下： 案例说明：html代码 <Tree :data="data4" @on-check-change="choiceAll" ref="tree4" show-checkbox multiple></Tree>------------------------------------------------------...
2018-07-16 16:14:38
4060
1
转载 vue-router 的重定向-redirect
开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。redirect基本重定向我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。 1 2 3 4 5...
2018-07-16 16:13:19
9176
转载 使用 vue-router 跳转页面
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html 有很多朋友找我要 demo，但是博客中的这个案例被我删掉了，我只好随手写了一个超简单的 demo，希...
2018-07-16 16:11:45
793
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人