- 博客(127)
- 收藏
- 关注
RSS订阅原创 js实现局部全屏效果
全屏 API全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。Document 中的方法Document.exitFullscreen()用于请求从全屏模式切换到窗口模式，会返回一个 Promise，会在全屏模式完全关闭的时候被置为 resolved 状态。Element 中的方法Element.
2021-11-23 17:25:53
1597
转载 Vue-router 中hash模式和history模式
Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history";hash模式和history模式的不同对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目
2021-07-19 10:00:52
247
原创 vue动态组件
交互中，程序运行会有不同的结果，需要根据不同的结果展示不同的组件，用if，elseif会比较繁琐当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题is attribute示例代码html：<component :is="isWhitchDialogComp"></component>js：import DefaultDialog from './dialog/default-dialog'import ConfilctDialo
2021-03-01 16:33:33
129
原创 vue搜索高亮显示
效果展示：js部分：import Vue from 'vue'function hightLight (el, binding) { const match = binding.value const reg = new RegExp(match, 'g') const txt = binding.arg let str = '' if (txt) { str = txt.replace(reg, `<span style="color:red">${mat
2020-11-09 09:50:49
679
原创 JS数组的几种开发技巧（去重、过滤、随机排列、排序）
1、随机排列function shuffle(arr) { var i, j, temp for (i = arr.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)) temp = arr[i] arr[i] = arr[j] arr[j] = temp } return arr}2. 唯一值在开发者，我们经常需要过滤重复的值，这里提供几种方式来过滤数组的重复值。
2020-08-07 14:45:42
857
原创 消除不同的浏览器在默认样式上不同表现reset.css
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}body,input,textarea,button,select,pre,xmp,tt,code,kbd
2020-06-08 16:41:46
165
原创 详解JS取出两个数组中的不同或相同元素
1、取出两个数组的不同元素var arr1 = [0, 1, 2, 3, 4, 5] var arr2 = [0, 4, 6, 1, 3, 9] function getArrDifference (arr1, arr2) { return arr1.concat(arr2).filter(function (v, i, arr) { return arr.indexOf(v) === arr.lastIndexOf(v) }) } console.log(getArrDif
2020-06-02 10:14:02
1597
原创 浅谈Javascript中try catch 的用法
demo：<!DOCTYPE html><html><head><meta charset="utf-8"><title>power by Adam</title></head><body><p>try 语句块中的函数未定义：</p><p id="demo"></p><script>try { adddlert("hell
2020-05-28 18:12:18
1707
原创 CSS3更改原生滚动条的样式
话不多说直接上代码：/*滚动条样式*/ .scrollbar::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .scrollbar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px r
2020-05-28 16:35:49
544
原创 vue项目中使用百度统计
统计有多少人访问了自己的网站（wap端pc web端都适用），或者更细的统计网站每个页面的访问量，可以使用百度统计百度统计传送门按提示注册登录即可登录后–>管理–>新增网站，配置好后会出现如下的 自有网站列表在要统计的网站 右侧，点击“获取代码”拷贝要统计网站的代码统计vue项目中的每个页面的访问量var _hmt = _hmt || [];window._hmt = _hmt; // 修改为window 全局变量 (function () { var hm
2020-05-27 17:32:10
479
原创 封装公共的节流函数和防抖函数
代码如下：// 节流函数export const throttle = function (fn, gapTime = 2000) { let _lastTime = null return function () { let _nowTime = +new Date() // 当前时间戳 if (!_lastTime || _nowTime - _lastTime > gapTime) { fn.apply(this, arguments) _la
2020-05-26 16:07:19
354
原创 js 时间戳转换成几分钟前，几小时前，几天前（亲测有效）
思路：1：将当前的时间转换为毫秒数（nowNew）2：将时间戳转换为标准时间再转换为毫秒数 （millisecond）3：将两者相减然后进行判断代码如下：HTML部分：<span>{{formatMsgTime(时间戳)}}</span>JS部分：formatMsgTime (timespan) { var dateTime = new Date(timespan) // 将传进来的字符串或者毫秒转为标准时间 var year = dateTime.getF
2020-05-26 15:29:13
4080
转载 vue-3d-model：一个展示三维模型的 Vue 组件
vue-3d-modelvue.js 3D model viewer component, based on threejs, inspired by model-tag一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。ExampleDEMOInstallusing npmnpm install vue-3d-model --saveOr using script tag for global use<scri...
2020-05-22 10:55:25
7545
5
原创 使用sorttable进行排序
<template> <div class="hello"> <ul ref="sortTable"> <li v-for="(v) in sortTable" :key="v" class="li">{{v}}</li> </ul> </div></template><script>import Sortable from 'sortablejs'export de
2020-05-19 16:07:37
568
转载 谷歌云实例如何使用 SSH 密钥登录
1、首先，使用 SSH 客户端连接工具，生成公私钥（详细步骤这里不做说明）2、进入谷歌云平台，打开实例的「元数据」菜单3、单击「SSH 密钥」页签，选择「修改」4、单击添加，输入本机公钥，保存连接5、ssh -i ~/.ssh/id_rsa [email protected]...
2020-05-19 11:30:02
2568
转载 如何解决 vscode 中的 terminal 乱码
适用场景1、系统安装并使用 oh-my-zsh；2、使用 zsh 主题 「agnoster 」，并安装了所需的扩展字体「for powerline 」；问题描述当使用 control + shift + ~ 或菜单「Terminal > New Terminal」打开 TERMINAL 控制台后，路径提示显示如下乱码：解决进入 vscode 设置页，搜索栏输入 terminal font，修改 Font Family 的值为系统中安装的扩展字体，如下图：设置后，即时生效。...
2020-05-19 11:26:42
2672
原创 贷款计算器
效果图<!DOCTYPE HTML><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>贷款计算器,利率计算器,利息计算器</title> &
2020-05-08 18:05:09
337
原创 vue搜索关键字使文本高亮
思路：通过正则RegExp进行全局匹配，将符合条件的元素通过replace替换成为HTML代码片段封装成自定义指令在main.js里引入增加可复用性import Vue from 'vue'function hightLight (el, binding) { const match = binding.value const reg = new RegExp(match, 'g'...
2020-05-06 14:50:28
1109
原创 结合element面包屑组件创建动态路由
$route.matched1、一个数组，包含当前路由的所有嵌套路径片段的路由记录2、 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组<template> <div id="example-container"> <el-breadcrumb separator-cla...
2020-05-06 09:53:28
317
原创 Git命令
1、设置name和email 最好是GitHub的用户名和邮件git config --global user.name “yourname”git config --global user.email “youremail”2、查看git配置git config --list3、创建git管理目录$ mkdir learngit进入当前目录$ cd learngit查看当前目录...
2020-04-14 17:20:07
90
转载 vue修饰符
Vue提供了一些修饰符，这些修饰符在使用起来非常方便，比如阻止默认事件、冒泡等。.lazy：v-modeil不用多说，输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：<input type="text" v-model.lazy="value">.trim：输入框过滤首尾的空格：<input type="text" v-mode...
2020-03-31 10:29:08
137
1
转载 vue封装公共方法处理js计算科学记数法精度问题
单独建一个文件（calculation.js）来放这个公共的方法，一般我喜欢放在utils里，calculation.js 代码：var countDecimals = function(num) { var len = 0; try { num = Number(num); var str = num.toString().toUpperCas...
2020-01-09 09:34:02
526
原创 纯css绘制波浪动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-11-28 19:53:32
357
转载 原生js绘制流程图
<!DOCTYPE html><html lang="en" onselectstart='return false'> <head> <meta charset="UTF-8"> <title>Document</title> <style type="tex...
2019-11-28 09:22:05
3042
10
原创 js处理拖拽事件与点击事件并存
解决思路：1.记录下鼠标按下mousedown和鼠标抬起mouseup的时候当前的pageX和pageY2.通过开方将两个位置坐标进行对比，当值等于0或者小于7的时候证明当前是点击事件，反之则是拖拽事件3.关于原本的点击事件函数里的逻辑，现在写到判断语句里就可以了案例附上：<!DOCTYPE html><html><head> <meta...
2019-11-28 09:19:39
2907
1
原创 前端性能优化的方法
1、减少请求最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源，这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。CDNs（内容分发网络）把资源放在离用户地理位置更近的地方对解决这个问题能起到很大作用，但是比起获取请求，大量的请求对页面加载时间的影响更为严重，而且最近的发现表明，CDNs对移动端用户的性能影响越来越低。2、整合资源对开发者来说，将...
2019-08-05 21:18:46
529
转载 webpack的四个核心概念
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：入口(entry)输出(output)loader插件(plugins)一、入口[entry]入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些...
2019-08-05 13:54:03
357
原创 对js闭包。面向对象、继承的理解
1）闭包理解：个人理解：闭包就是能够读取其他函数内部变量的函数；使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念闭包有三个特性：1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收闭包常见用途：创建...
2019-08-05 09:54:17
139
原创 简述webpack的编译原理
转自https://www.cnblogs.com/leyan/p/8670549.htmlwebpack 的编译原理自从接触了react，vue 这两个框架，都会用到webpack这个打包工具。面试的时候，经常被问到知道webpack的编译原理吗？ 可以简单的介绍一下。每每这个时候都被问的哑口无言，平时用的时候挺顺手，真正说点之乎者也出来，还是有点难度的。一、 webpack 的作用...
2019-08-01 20:44:59
696
原创 Vue-cli中post请求发送Json格式数据
这里就不详细说明了，举个例子var param = new URLSearchParams(); param.append("productId",this.$route.params.id) this.axios({ url:"http://39.106.44.63:10086/loadAllProduct", m...
2019-08-01 20:41:41
9390
原创 Vue-cli打包后css样式出不来的解决办法
因为用vue做的大部分项目都是移动端，关于css样式不出来的解决办法针对rem布局：我们App.vue里肯定设置了如下样式<template> <div id="app"> <!-- 组件缓存 --> <keep-alive> <router-view></router-view> <...
2019-07-31 13:56:46
5935
1
原创 vue从入门到放弃——（8） 组件高级（父子组件和solt槽口）
组件高级父子组件语法：components：{ ‘parent’: { template:’<div></div>’, components:{ ‘child’: { template:’<div></div>’ } } }}父子组件的作用域1.组件相当于完整的vue实例2.组件与vue实例间作用域...
2019-07-03 20:36:54
364
原创 vue从入门到放弃——（7） 组件的基本使用
什么是组件组件的概念：组件即自定义控件，是Vue.js最强大的功能之一组件的用途：组件能够封装可重用代码，扩展HTML标签功能组件的本质：自定义标签组件的分类全局组件作用域：不同作用域内均可使用局部组件作用域：只在定义该组件的作用域内可以使用注意：Vue组件只有全局组件和局部组件两种全局组件语法：Vue.component(‘name’, { tem...
2019-07-02 21:34:19
256
原创 vue从入门到放弃——（6）交互与实例的生命周期
前端和后端的概念任何一个应用程序都有前端和后端前端：客户端，就是浏览器（pc端 手机端）后端：服务器（性能很好的电脑）是提供计算服务的设备。服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。前后端交互原理[外链图片转存失败(img-RrwDsZFq-156207...
2019-07-02 21:31:09
554
原创 vue从入门到放弃——（5）watch与计算属性以及方法的区别-基础练习
Vue基础练习$event事件对象【扩展】事件对象语法：<div @click=“fn(美元符号+event)”>中，$event为事件对象作用：记录事件相关的信息注：函数传参必须写$event<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2019-06-29 09:08:49
292
原创 vue从入门到放弃——（4）虚拟 dom 与 diff 算法
虚拟 dom 与 diff 算法什么是虚拟DOM所谓的虚拟 dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render（渲染）方法将其渲染成真实的DOM的节点。为什么使用虚拟DOM使用JQuery的时候，会大量操作DOM，那么DOM元素的变化自然会引起页面的回流或者重绘，页面的DOM重绘自然会导致页面性能下降，那么如何尽可能的去减少DO...
2019-06-27 17:25:18
180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人