- 博客(43)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 el-image隐藏组件el-image-viewer点击次序预览图片
最近工作项目中有个需求，非要点击“预览”文字进行图片组的大图预览，想着技术栈中刚好有elementui，可以借用el-image的预览功能。但…实在有些许鸡肋，功能的自由感太低了，只能点击图片并永远只从第一张图开始预览，这确实难以满足实际工作需求。后来查阅资料得知el-image的预览功能在源码中其实是一个拓展组件完成的，于是我去源码里摸摸，发现还真有el-image-viewer这个独立组件，只不过官方文档中未将其拎出介绍。代码不复杂，毕竟样式和功能不多，也就放大缩小前进后退关闭等，主要看到props属
2020-12-04 00:29:21
2491
原创 前端面试死角—JavaScript执行机制
掌握JavaScript是前端开发者目前的必备技能，但代码敲得飞起却对它的执行机制一问三不知。了解JavaScript的执行机制对你的编码能力和代码理解将提高一个层次。1. JavaScript执行机制？很多人第一反应：单线程、自上而下。都没错，javascript是一门单线程语言，虽然在HTML5中提出了Web-Worker的概念，但它单线程的核心仍未改变。也可以说，javascript的“多线程”操作都是建立在单线程机制之上的。先简单看个场景：console.log("场景开始")setTim
2020-07-19 16:46:07
439
原创 快速理解与区分防抖和节流(debounce & throttle)
从事前端工作的小伙伴肯定都听说过防抖和节流，在工作中，它们常常应用于触发次数频繁的事件，例如(resize、input、scroll、mouse事件…)，因为如果不采取节制，这些高频事件会频繁地执行响应函数，有时会影响性能或体验感。那么什么是节流和防抖？它们的共同作用是控制高频事件执行响应函数的次数。假定一个场景，响应input事件输出input框的值，我们先来看看正常情况：var inputCon = document.getElementsByTagName("input")[0]var text
2020-07-05 03:05:07
430
原创 通俗易懂理解undefined和null的区别
对本人而言，undefined和null这两个特殊值可谓纠结了我好长一段前端路程，大体意思能明白，但却很少去深究实质区别，最近又特地学习了一番前来分享。六大基本类型(es6版)中，Undefined和Null占其中两位。大体上看，undefined和null都代表空值，实质却有所区别：undefined： 表示该变量未定义或未赋值，是一种代表变量初始化的状态值。例如已经定义了a变量，但没有赋值，获取a变量将返回undefined；又例，当某函数已定义并要求传入形参，但调用函数时未传入实参，则函数形参.
2020-05-21 23:23:51
525
原创 css3之before、after伪类以及简单实现购物车图标
“伪类”可以说是css中的特效元素，按本人亲身经历来看，在不是很系统的自学过程中常常会忽略伪类。这里带大家快速了解:before和:after伪类和简单上手购物车图标的demo。定义：:before和:after伪类的作用就是在指定的元素的内容之前或之后插入一个元素。重点：插入的该元素有自带content属性，可直接指定元素内容，也可以赋空值""。其实在我的上一篇关于实现爱心图案的文章中就已经用到了伪类，就是那样的一种使用方式。除此之外，最常用的用法之一就是利用:after伪类清除浮动：.div {
2020-05-17 00:27:16
810
原创 html+css实现爱心制作，通俗易懂
今天刚好是母亲节，祝全天下的母亲节日快乐幸福~前端工程师怎么能不懂骚操作？制作爱心有很多方法可以实现，今天介绍本人认为目前最简单的方法，仅依靠html+css。一、先看看html结构，仅需一个容器和爱心元素，容器主要作用为相对定位，方便子元素爱心进行绝对定位调整。<div class="heartCon"> <div class="heart"></div></div>二、进行css部分。刚说到heartCon给个相对定位先，然后就是爱心元素.
2020-05-10 12:30:55
10069
1
原创 简要了解和快速上手vue的过渡动画
此博文仅凭本人实践及理解，讲解vue的过渡动画知识要点，方便大家快速上手。更系统全面的学习请移步官网：vue-router过渡一、第一步必须为元素添加上<transition></transition>包裹，这是vue封装的过渡动画组件，相当于设置过渡的声明。深入点讲，当声明了这个组件，将为该元素自动添加上过渡生命周期的六个class，下面会讲到。<transit...
2020-05-01 21:49:26
341
原创 vue切换路由页面左右滑动过渡动画效果，傻瓜式实现
此博文默认你已掌握入门的路由过渡知识，若有无法理解之处请自行补充相关知识或浏览我的下一篇博文…Vue已广泛运用于移动开发，页面间切换的路由过渡效果有很多方法实现，这里讲的是较简单粗暴的方法，便于理解实现原理。1. 为需要路由过渡的部分添加<transition></transition>，声明过渡。<transition :name="transitionNam...
2020-05-01 18:26:45
7521
3
原创 vue之组件间v-model通信
假如要使原生元素例如input输入框与实例数据双向绑定，我们都知道可以直接使用v-model指令。那如果是两个自定义组件间通信该如何使用v-model？首先要清楚v-model的原理：<input-con v-model="inputVal"></input-con>等价于<input-con :value="inputVal" @input="inputV...
2020-04-12 20:07:32
1724
原创 vue彻底理解.sync修饰符实现prop进行父子组件“双向绑定”
假如现在要实现上面的简单计数器，数字是父组件通过prop传入的，希望在子组件按钮上控制递增。似乎很简单，在按钮上绑定个click事件让prop值递增不就好了嘛？首先需要清楚三件事：1.prop是单向数据流；2.vue并不希望和支持我们直接修改传入的prop值，这样打破了prop单向数据流的机制，会造成数据混乱；3.所以，prop值需要实时更新传入，相当于我们要实现双向数据绑定；那么，既...
2020-04-11 19:33:31
663
原创 清空数组的三种方法，简单直观
清空数组这的方法其实很简单，常见的有三种：1. 给数组的length设置为0arr.length = 0前提是该语言中数组的length是可写可读。2. 直接赋值为空数组arr = []3. 使用splice方法arr.splice(0, arr.length)splice(index,number,item0,item1...,itemx)方法可以操作数组删除/替换/增加数...
2020-04-07 00:22:45
36422
原创 vue使用axios创建请求接口实例和发送异步请求
在vue3.0面世后作者就即时宣布将不再对vue-resource更新了，这也就意味着它逐渐被放弃，axios取而代之。axios同样是异步请求数据，但是基于promise实现。一. 项目安装在项目中终端输入指令：npm install axios --save在需要请求数据的文件中引入axios：import axios from "axios"二. 使用方式方法一：当请求...
2020-04-04 23:42:51
1535
原创 vue之动态添加class(active)的方法大全
过来人常说“要想学vue，必先忘记js”，这是因为vue控制dom节点的思维方式和js不大相同。vue项目中如何点击元素动态添加active-class？今天来分享多种解决方式。一. v-for循环情况下动态添加：1.v-for循环元素，绑定key2.在data中创建标识isActive=0，这是为了初始化第一个标题为active3.监听单击事件触发方法，传入点击元素的index改变标识...
2020-03-29 19:22:42
30466
2
原创 css元素水平和垂直同时居中的四种方法
“如何实现任何元素的水平垂直居中？”前端面试常常会被问到这个似乎挺不起眼没技术含量的问题，有的朋友也就支支吾吾模模糊糊地回答面试官。这里分享四种实现元素水平垂直居中的方法，简单明朗一学就上手。1. margin或padding配合调整由俭入奢，第一种方法是最基础也是比较局限的，就是用margin和padding配合调整，按已知的大小去控制间距：.parent { width: 20...
2020-03-28 22:42:01
725
原创 vue之子路由创建及使用
vue可以通过设置子路由灵活地响应切换页面内的部分组件。方法很简单：1.vuecli3.0以上在‘/router/index.js’文件里，为指定的父路由添加children属性，存放子路由。注意，记得redirect重定向父路由的初始路径。const routes = [ { path: "/order", name: "order", component: or...
2020-03-28 21:30:33
652
原创 vue之修改单页面背景颜色
vue的特点在于组件化，可以轻便开发单页面应用，但弊端就是它没能像原生操控各自的body节点，因为所有的页面都拥有同一个body。这就难受了，如果希望设置单个页面的背景颜色而又不影响其他页面，那怎么办？beforeCreate() { document.querySelector('body').setAttribute('style','background-color:rgb(245,24...
2020-03-28 20:44:24
2818
1
原创 JS之apply()和call()的区别
一直没怎么去深入了解js的apply()和call()的知识，最近空闲就在做demo，总结了一些：- 相同特点1. apply()和call()都是用于改变this指向，也就是改变作用对象。2. 调用的函数立即执行。- 不同点apply(obj,array)只能接受两个参数，一个是改变指向的对象，另一个是要传递的参数的数组；而call(obj,a,b,c,..)可以接受很多个参数，第一个...
2020-03-28 18:25:39
148
原创 Js原生实现无缝滑动轮播图(完整功能)
实现轮播图是前端学习的一门必修课，也是用来训练js能力。今天我用原生js写了个轮播图，包含无缝衔接、指示器、左右控制器等功能，跟大家分享。先看看效果图：1. 设计html+css部分结构很简单，图片部分用ul作容器(本人习惯ul，你们也可以div)，flex布局让里面的li排成一排，因为我们要做的是滑动效果而不是简单显隐。注意，要在最后另外多一个li存放第一张图，这是为了后面实现无缝轮播。 ...
2020-03-24 11:53:24
10161
7
原创 css3之实现网红正方体相册弹开动画
这里讲解实现抖音网红的正方体相册的动画制作(大正方体包裹小正方体，鼠标点击大正方体弹开展现小正方体)。先上效果图：1. 基础结构老规矩，先写好基础结构。这里关于3D动画制作原理及正方体简单旋转制作的知识还不清楚的话可以参考我上一篇文章。首先父元素cube用来接收3D动画的视觉属性；然后box子元素包裹正方体内容并规定动画形式为3D；然后写进大正方体的6个面div和小正方体元素inner-b...
2020-03-17 17:52:23
649
原创 css3之实现简单的正方体转动动画
实现正方体转动有很多方式，但开发中最实在的还是用css3开发，内容涉及过渡、转换，有兴趣可学习使自己更强！- 第一步：创建结构<div class="cube"> <div class="box"> <div class="child-th1">1</div> <div class="child-th2"&...
2020-03-10 19:45:42
1050
原创 vue之better-scroll插件快速上手及实战demo
什么是Better-Scrollbetter-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它是基于iscroll开发实现的，它的所有API基本都兼容iscroll，且作出扩展。详细的介绍可以阅读官方文档：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#那既然一样使用于滚动场景，better-scro...
2020-03-03 18:02:29
635
原创 vue-awesome-swiper最新版轮播图实战demo及参数详解
vue-awesome-swiper是vue项目插件之一，用于开发轮播功能。它基于swiper轮播插件，由前辈所开发而出，奉上源仓库：https://github.com/surmon-china/vue-awesome-swiper一、安装可以通过CDN或NPM(CNPM)安装。CDN有些繁琐，通常我们习惯npm(cnpm)下载安装：npm install vue-awesome-swip...
2020-02-29 20:20:16
4293
1
原创 ES6之class关键字定义构造函数
我们都知道es6是javascript的一种新语法标准。对于创建构造函数，它提供了一个class关键字。在es6之前，我们会直接定义一个构造函数，然后new一个：var myCon = function(target){ this.target = target;}var con = new myCon('Jsxj');但es6推出class语法糖后，它将构造函数封装并声明成一个对...
2020-02-28 17:33:36
535
原创 @vue/cli4(包括3)项目axios请求获取本地json文件数据
在前端开发过程中，当后台服务器开发数据还没完善，无法与我们交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。vuecli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件，vuecli3、4没有static文件夹了，那咋办？有人说我创一个static文件夹在下面继续写json文件不就行了。但结果会报错，请求404找...
2020-02-27 22:11:42
7428
11
原创 ES6之spread运算符、rest操作符及解构赋值操作
es6推广的原因在于它更加轻盈方便，spread运算符、rest操作符以及解构赋值知识都是es6的新语法，接下来看看它们都分别是什么。- spread运算符spread运算符常常用于数组的解析与构造：var arr1 = ['a','b','c'];var arr2 = ['aa','bb','cc'];//构造数组var arradd = [...arr1, ...arr2];c...
2020-02-27 17:30:00
1147
1
原创 ES6之认识和使用箭头函数
箭头函数是es6推出的更为简洁、方便的函数书写语法，通常用于创建无需复用的匿名函数的情况。- 箭头函数书写形式以前，我们写函数会这样：const hello = function() { const name = "Jsxj"; return name;}而有了es6的箭头函数后，可以这样写：const hello = () => { const name = "J...
2020-02-26 19:13:04
179
原创 ES6之探索与比较var、let、const关键字
var、let、const三个关键字作用基本相同都是为了声明变量，但也存在区别，无论用法还是作用域都有差异。- var 关键字var关键字是在es6之前就推出的，用于声明变量。它的作用域为全局，也就是不区分代码块：var Array = [];var i;for (i = 0; i < 3; i++) { numArray.push(i);}console.log(i); ...
2020-02-25 18:31:44
144
原创 vue实现导航标题栏随页面滚动渐隐渐显效果
项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的，下面作一个用vue实现此功能的代码分享。1. 为导航栏元素style属性用v-bind绑定data数据"opacityStyle"。<div class="header" :style="opacityStyle"> 景点详情 //内容我就简约了，实际开发以需求为准</div>2. data中定义o...
2020-02-24 00:51:39
2357
原创 vue各类组件间传值方法(父子、兄弟、页级)
熟悉vue各类关系的组件之间传值方法会令开发更加得心应手，下面将对父子、兄弟、页级组件之间的传值作浅谈。一、父子关系组件- 父向子组件传值父组件向子组件传值通常是利用props属性。首先，在子组件里定义一个props值用来接收父组件数据；然后调用子组件并v-bind绑定这个props值 = 父组件的data值。父组件代码：<template> <div class=...
2020-02-22 20:12:04
2490
原创 css小技巧之flex布局下子元素单行长文本显示省略号
一、单行长文本显示省略号先讲讲常规情况下长文本不跨行显示省略号的代码：overflow: hidden; //不允许内容超出盒子white-space: nowrap; //不允许文本跨行text-overflow: ellipsis; //文本超出部分以“...”省略号表示overflow：对超出的内容进行处理white-space ：对文本格式进行规定text-ove...
2020-02-19 17:00:40
3290
1
原创 css小技巧之padding-bottom+overflow:hidden+height:0撑开图片加载空间
前端开发免不了有图片、视频等一些模块需要大力度渲染，当网速较慢时这些模块的渲染时间相对较长，导致页面其他元素位置可能发生细微抖动，这对产品的用户体验是有所影响的。这时用个小技巧便可以解决问题。height:0: 盒子高度。我们都知道 盒子高度=内容高度+上下内边距，这里我们指定目前盒子高度为0，为下文操作做铺垫。padding-bottom: 盒子的底部内边距。开发中常见的写法是百分比(也可以...
2020-02-18 14:48:50
2282
1
原创 常用基础样式reset.css和border.css 说明及分享
1. reset.css不同浏览器对部分相同标签往往有不同的显示效果，区别不大吧却又多少会影响开发，那么就需要写代码时对基本样式进行设置，使不同浏览器下显示效果相同。这时候，reset.css便派上用场了。reset.css代码：（可收藏，直接引入）*{word-wrap:break-word}html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd...
2020-02-16 00:26:00
332
原创 vue2.0之 render: h => h(App)
vue2.0版本问世后，相对1.0版本有了较大的变动，不仅仅存在于物理结构上，适用并使用es6语法也是亮点之一。项目创建完成的入口文件：new Vue({ //el:"#app", vue1.0写法 router, store, //components:{App}, //vue1.0写法 render: h => h(App) //vue2.0写法}).$mo...
2020-02-15 23:16:12
259
原创 Vue中v-if和v-show区别与用法解析
一、v-if和v-show的异同点1.相同点 ：v-if和v-show都可以动态控制DOM元素的显示隐藏。2.不同点：v-if是动态地向DOM树中添加或删除DOM元素节点；v-show是通过向DOM元素设置样式display属性值控制显示隐藏。我们通过一个简单的demo对比观察下：<body> <div id="app"> <div v...
2020-02-13 18:41:51
10451
1
原创 vue自定义组件添加使用原生事件
自定义组件(Components)是vue的重要知识块之一，使用中不少人会发现一个问题：为什么我在组件里绑定click事件不起作用？这里先看看原因吧。在自定义组件中直接绑定原生事件vue可是"不待见"的，它会认为你没有定义这个事件，所以没有任何反应。哪些是原生事件？例如click单击、mouseover鼠标移入、mouseout鼠标移出、keyup键盘按下抬起、keydown键盘按下…等等一系列...
2020-02-12 20:15:29
2291
原创 Vue实例生命周期函数（钩子函数）详解
一、钩子函数在了解vue生命周期函数之前，我们先看看啥叫"钩子函数"？百度一下是这样一段官方解释：“钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。”简单理解，就是一些在系统消息触发时被系统自动调用的函数，像一个"钩子"，将我们想要处...
2020-02-11 22:42:04
1010
原创 vue开发使用vue-cli4.x创建项目详解
- 前言vue-cli4.x新版本安装教程可以看看我之前的文章。版本更新后在创建项目上有所不同，这里做详细的步骤教程以及选项解释。- 创建项目vue create 项目名- 选择配置先无视第一项（我的个人配置，后面会讲到）；一般有两项：default：默认配置（只有babel和eslint）Manually select features：手动配置一般做项目默认配置是不够的，我...
2020-02-09 20:12:10
4458
原创 vue-cli2.9.6及其他版本升级至vue-cli4.x最新版
- 前言目前网上关于vue-cli的文字/视频教程多数停留在2.9.6或3.x版本，但毕竟IT行业学新的总不会错。官方推出的版本从3.0开始也做了较大的变动，这里简单做个升级教程。- 卸载旧版本卸载命令：npm uninstall -g vue-cli这里有坑，如果明明卸载了却仍出现报错类似提示没有卸载干净，可能是当时安装旧版本时你还使用了yarn导致有残留，用yarn uninstall...
2020-02-09 18:17:19
3684
1
原创 vue-router重定向redirect和别名alias的用法区分
vue-router是vue框架的重要且常用的插件之一，用于单页面应用的路径打包管理。项目中常会用到redirect和alias以做“页面假动作”跳转。重定向redirect顾名思义，这个属性用于重定向页面跳转路径。简单说就是设置了一个路由，它有自己的路径，但重定向跳转至另一个路由。export default new Router({ routes: [ { pat...
2020-02-02 17:27:26
1405
2
原创 JS中关于普通数组和对象数组升序降序及sort()、reverse()用法详解
在项目中会常常遇到给数组、对象排序的问题，这里做个详解供大家参考~一、sort()函数sort()是JavaScript内部提供的函数，用于对数组进行排序。它有两种形态用法：1、sort()：不加任何参数的情况下，函数默认根据字符编码顺序自动进行升序排列。var arr = [23,35,25,46,12];arr.sort(); //结果为[12,23,25,35,46]似乎没什么...
2020-01-19 17:14:46
3077
cityList.vue
2020-03-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人