- 博客(158)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue-router导航钩子执行顺序
vue-router的导航守卫实际和组件的生命周期都是同一类型的钩子函数，在一个特定时间内会触发。导航守卫有三个类型，分别是全局的钩子（针对整个路由器实例），单个路由对象的钩子和组件内的钩子。全局导航钩子const router = new VueRouter({ routes})//全局前置守卫router.beforeEach((to, from, next) => { console.log('beforeEach') next()})/...
2022-04-24 16:51:54
1266
1
原创 说说你对this的理解
在Javascript中，this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。全局的this ——> 指向的是window函数中的this ——> 指向的是函数所在的对象对象中的this——> 指向其本身...
2022-04-13 10:21:55
732
翻译 vue 自定义过滤器
1.全局过滤器// 在main.js中Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})2.局部过滤器<script>export default {filters: { capitalize: function (v
2022-03-29 16:14:25
232
翻译 vue 自定义指令
1. 注册全局指令// 在main.js中Vue.directive('focus', { inserted: function (el) { el.focus(); }})2.注册局部指令<script>export default { directives: { focus: { inserted: function (el) { el.focus(); }, }, },}
2022-03-29 11:32:10
70
翻译 一个页面从输入URL到页面加载显示完成，这个过程都发生了什么？
分为4个步骤：1.当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。2. 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步—应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的.
2022-03-25 17:24:08
420
翻译 HTTP的状态码有哪些
200 （OK） 客户端请求成功400 （Bad Request）客户端请求有语法错误，不能被服务器所理解403 （Forbidden）服务器收到请求，但是拒绝提供服务404 （Not Found）请求资源不存在，输入了错误的url500 （Internal Server Error）服务器发生不可预期的错误503 （Server Unavailable）服务器当前不能处理客户端的请求，一段时间后可能恢复正常...
2022-03-24 18:27:00
100
翻译 js正则表达式大全
1.邮箱正则var reg=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/;2.手机号正则var reg=/^1(3|4|5|6|7|8|9)\d{9}$/;
2022-03-23 17:52:35
245
翻译 解决vue项目中ESLint语法报错
1.分号和双引号报错在项目根目录下新建文件.prettierrc，内容如下：{ "semi":false, // 分号删除 "singleQuote":true // 单引号替换双引号}2.方法后面的括号报错在 .eslintrc.js文件rules里面添加此项，意禁用此项报错 rules: { 'space-before-function-paren':0 }...
2021-08-19 16:43:25
977
原创 视频按钮动画
<!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-UA-Compatible" content="ie=edge"> <title>D.
2021-02-26 11:17:36
155
原创 animation实现视频按钮外扩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> body { .
2021-02-02 14:19:26
97
翻译 事件
1.DOM事件流“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首 先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶 段，可以在这个阶段对事件做出响应。以前面简单的 HTML 页面为例，单击<div>元素会按照图13-3所 示顺序触发事件。2.DOM2 级事件处理程序“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEve..
2021-01-19 15:43:02
95
翻译 数组去重
var arr = [1, -5, -4, 0, -4, 7, 7, 3]; function unique(arr) { var arr1 = []; // 新建一个数组来存放arr中的值 for (var i = 0, len = arr.length; i < len; i++) { if (arr1.indexOf(arr[i]) === -1) { ...
2021-01-08 14:16:46
83
翻译 css伪元素使用背景图片
.layui-icon:before { content: ""; width: 27px; height: 27px; display: block; background: url("./2.png") no-repeat center; background-size: 27px 27px; }
2021-01-07 16:21:13
3010
转载 ES6转换成ES5
babel在线转换工具1、建立工程目录 src:使用ES6语法编写的JS文件； dist:使用Babel转换成ES5的文件，在项目引用的时候引用的是这个文件夹里边的JS文件2、初始化项目 npm init -y -y是指表示全部默认，不需要一个一个敲回车3、全局安装Babel-cli npm install -g babel-cli4、本地安装babel-preset-es2015 和 babel-clinpm install --save-d...
2020-10-16 16:52:56
2058
转载 bluebird.js - 让所有浏览器都支持 ES6 Promise 对象
最近一个项目使用的axios首先说下axios虽说是支持ie8+，不过其原理是基于promise之上实现的所以会有不兼容ie的问题 也就是trident内核的全不行。ie浏览器下一只报错，数据也加载不出来。网上百度说使用polyfill.js解决，但是我引入后还是要报promise未定义错误。后台看到一篇博客说可以使用bluebird.js解决。果然我直接在页面映入bluebird.js问题就解决了。bluebird.js下载地址:https://cdn.jsdelivr.net/b
2020-10-16 14:30:41
808
翻译 jsonp 跨域
JSONP只支持GET请求下面以一个案例来进行说明jsonp的实现假如请求的url：http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandlerajax请求代码： jQuery(document).ready(function(){ $.ajax({ type: "get", async: false,
2020-09-27 10:13:45
77
翻译 引入字体 .ttf 格式
1.下载所需要的字体，以 Poppins-Regular.ttf 为例2. 创建 fonts 文件夹，里面包含以下文件3. font.css 内容如下@font-face { font-family: 'Poppins-Regular'; /*重命名字体名 */ src: url('Poppins-Regular.ttf'); /*引入字体*/ font-weight: normal; font-style: normal; ...
2020-08-14 14:05:00
2201
翻译 css not()
input:not([type=checkbox]){ font-size: 16px; width: 100%; height: 48px; padding: 5px 35px 5px 12px; border-radius: 2px; border: 0; color: #282828;}
2020-06-29 14:55:28
440
转载 jquery中使用datepicker限制开始日期小于结束日期
//这是开始日期的操作$("#endTime").datepicker({ //此处写自定义的参数操作 如showOtherMonths: true, selectOtherMonths: true, onSelect: function (dateText, inst) { //$("#begTime").datepicker("option ", "maxDate", new Date.
2020-06-25 11:46:24
869
转载 个人vue.config.js文件
const path = require('path')const debug = process.env.NODE_ENV !== 'production'//const VueConf = require('./src/assets/js/libs/vue_config_class')//const vueConf = new VueConf(process.argv)module.exports = { publicPath: '/', // 根域上下文目录 outpu.
2020-06-24 09:42:18
191
原创 vue-cli3 手动创建项目流程
1. 创建项目vue create hello-world2. 操作流程如图注：创建项目的过程中，由于网络的原因，node-sass 有可能会下载不下来，项目就无法运行，需要手动下载一下 执行cnpm install -D sass-loader node-sass 。然后再执行 npm run serve...
2020-06-11 17:27:32
715
转载 vue-cli3 加载 Sass Loader 报错的解决方案
报错截图 如下：原因是vue-cli版本更新造成的，把vue.config.js文件中的data改为prependData即可：修改如下：module.exports = { productionSourceMap: false, css: { sourceMap: true, loaderOptions: { sass: { prependData: `@import "@/assets/styles/variable.scss";.
2020-06-11 17:18:23
5122
翻译 vue-cli3安装scss
手动安装如果在创建项目没有选择CSS 预处理器，我们也可以手动安装sass-loader node-sass来集成scss。npm install -D sass-loader node-sass或cnpm install -D sass-loader node-sass安装成功以后，在 package.json 里面devDependencies 可以看到，如下使用方式<style lang="scss" scoped>@import "@/asse..
2020-06-08 16:17:53
7213
2
转载 配置并查看码云用户信息
1.配置用户姓名和邮箱：git config --global user.name "test"git config --global user.email "[email protected]"2.查看配置信息查看系统config：git config --system --list查看当前用户（global）配置：git config --global--list查看当前仓库配置信息：git config --local...
2020-06-08 11:52:47
1761
转载 js对url进行编码和解码（三种方式区别）
*** 只有 0-9[a-Z] $ - _ . + ! * ' ( ) , 以及某些保留字，才能不经过编码直接用于 URL。***例如：搜索的中文关键字，复制网址之后再粘贴就会发现该URL已经被转码。1)escape 和 unescape原理：对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。编码:eg:escape('http://www.baidu.com?name=zhang@xiao@jie&order=你好')res:"http%3A//w
2020-05-28 11:33:15
305
翻译 js控制input框只能输入数字和一位小数点且小数点后面最多两位小数
html代码<input type="text" onkeyup="clearNoNum(this)">js代码 function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符 obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的 .
2020-05-12 09:30:53
2655
翻译 css实现文字渐变
效果图如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
2020-04-23 17:24:24
7421
翻译 JS计算精度丢失
各大编程语言也都封装了自己的精确计算库，Js我选择使用math.js安装方式1.包管理器安装math.jsnpm install mathjs2.cdnhttps://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.2/math.min.js3.math.js 加、减、乘、除 使用方式// 0.1＋0.2math.form...
2020-04-07 15:18:19
240
翻译 判断是否微信登陆
// 封装一个函数function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; }}// 使用方...
2020-04-01 11:17:15
310
翻译 判断是否移动端（平板或手机）
判断是否移动端function isMobile(){ if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)...
2020-04-01 11:05:48
905
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人