- 博客(165)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 es6语法重新整理
let 声明拥有块级作用域block （没有变量提升现象）不会成为 window 属性暂时性死区 (局部内声明过的变量也不能再次声明)不能重复定义const 声明const 声明的是常量声明的变量必须立即初始化栈区的值不变，但是堆区的值可变 新的数据结构数据结构 setSet对象；是值的集合，可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。NaN和undefined都可以被存储在Set 中， N
2022-02-09 15:25:12
627
原创 获取文档元素节点方法 querySelector querySelectorAll
querySelectorAll 是找出所有匹配的节点后，返回对应的元素节点数组.querySelector 是找到一个后立刻返回找到的第一个节点对象，如果没有则返回null.返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果下面是几个简单的Demo样例，方便后面可以清晰的get到关键点：找出body标签下的第一个divdocument.body.querySelectorAll("div")[0]找出所有标签document.querySelectorAll(.
2022-01-12 11:02:12
913
原创 es6 数组、字符串 新增高级方法
数组新增高级方法 filter 过滤器 map 映射 reduce 汇总 some() every()Set Map 数据结构Set：let arr = ["你好","你好","你好1","你好2","你好3","你好1","你好2"];let newArr = new Set(arr);newArr.add() 添加newArr.delete() 删除 t/fnewArr.has() 是否存在 t/fnewArr.size 数组长度newArr.clear() 清空数
2021-12-28 16:45:28
461
原创 vue3 使用 - 本地调试查看远程线上环境代码
这里写自定义目录标题功能快捷键笔记网站：合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入功能快捷键撤销：Ctrl/Command + Z重做：Ctrl/Command + Y加粗：Ctrl/Command + B斜体：Ctrl/Co
2021-12-20 15:25:25
387
原创 vue 绑定 keyup.enter 绑定回车键盘事件 enter键防止页面刷新
关于vue中的@keyup.enter键盘事件无法生效的解决办法。
2021-12-10 10:18:02
1654
原创 Node.js 讲解
Node.js 讲解再谈客户端JavaScript有如下几个问题：ü 什么是JavaScript？ü JavaScript的运行环境是？ü 浏览器中的JavaScript 可以做什么？ü 浏览器中的JavaScript 不可以做什么？ü JavaScript只可以运行在浏览器中吗？ü 编程语言的能力取决于什么？(1).什么是JavaScript？Javascript是一门运行在...
2021-12-08 16:45:56
75
原创 JS移动端浏览器取消右划后退的几种方法
方法一：var mo=function(e){ e.preventDefault();}/***禁止滑动***/function stop(){ //禁止页面滑动 document.addEventListener("touchmove",mo,false);}stop()方法二：屏蔽浏览器的后退事件。 //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('pop
2021-12-08 10:16:45
497
原创 vue之$event获取当前元素的节点
<p @click = “clickfun($event)”>点击</p>methods: {clickfun(e) {// e.target 是你当前点击的元素// e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.currentTarget.firstElementChild.
2021-11-23 09:29:36
468
原创 vue axios-mock-adapter 模拟接口，以及通过 mockjs 模拟数据 增删改查 持续更新中
用通过「axios-mock-adapter」插件来模拟前端请求数据。1、安装npm i -D axios axios-mock-adapter打开目录，在「main.js」中引入「axios」，我们用它来请求资源。import axios from 'axios' // 同时设置全局 $axios 对象，这样就不用多次引用 axios 了 Vue.prototype.$axios = axios2、在 src 目录下新建 mock 目录，然后新建 index.js 和 servic
2021-11-01 16:42:28
570
原创 vue 中引入js文件json数据 在组件中使用 避免打包 详细教程
vue中如果需要引入外部js文件，避免被打包我们可以放到public文件下：在 public 下新建文件夹 json 中有 xmlList.js 文件此时xmlList就不会被打包编译。在组件中使用数据在html文件中引入<script src="json/xmlList.js"></script>xmlList.jslet xmlList = [ {"name":"姓名一","url":"www.abc.com"}, {"name":"姓名二","url":
2021-07-28 21:51:31
2111
原创 Vue 项目里痛点及问题解决办法
Vue 项目里戳中你痛点的问题及解决办法（更新）https://juejin.cn/post/6844903632815521799
2021-07-25 21:19:11
220
原创 axios的封装和api接口的统一管理
回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步ax
2021-07-22 10:55:23
643
原创 window10系统，几分钟不操作就自动黑屏处于睡眠状态
最近装了建设银行客户端一直隔一分钟就黑屏，网上试了很多方法，注册表都修改过了，一直没得到解决，今天捣鼓了一下困扰了许多天的问题得到了解决，下面分享一下给有需要的小伙伴，如果喜欢请给个点赞支持。桌面——》右键 个性化，菜单左侧点击锁屏界面——》拖到最下面有个“屏幕保护程序设置”。在屏幕保护程序设置里面设置时间长一点。大功告成！...
2021-07-21 12:43:52
853
原创 Vue 3全新的Web开发构建工具 —— Vite
为祖国的复习而读书！—— 非凡主力Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。Vite具有以下特点： 快速的冷启动 即时热模块更新（HMR，Hot Module Replacement） 真正按需编译 Vite是在推出Vue 3的时候开发的，
2021-07-19 09:23:21
434
原创 JS移动端浏览器取消右划后退的几种方法
方法一：var mo=function(e){ e.preventDefault();}/***禁止滑动***/function stop(){ //禁止页面滑动 document.addEventListener("touchmove",mo,false);}stop()方法二：屏蔽浏览器的后退事件。 //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('p.
2021-07-04 09:42:01
1168
原创 vue 路由之间传值 （编程式导航）
//params形式：参数不显示在地址栏this.$router.push({ name: 'details', params: { userId: this.num }})//获取console.log(this.$route.params.userId);//query形式：参数显示在地址栏this.$router.push({ path: 'deta
2021-06-19 13:39:24
197
原创 数组去重 Set 和 Array
将Set数据结构转换为数组，通常有以下两种方法const arr = [1,1, 2,2,3, 4 ]const s = new Set(arr);// 方法一 用方括号直接包裹用“…”扩展后的Set数据结构const newArr = [ …s ];console.log(newArr); // [ 1, 2, 3, 4 ];// 方法二 用Array.from()转换Set数据结构const newArr = Array.from(s);console.log(newArr); // [
2021-06-17 18:06:35
1538
2
原创 JS移动端浏览器取消右划后退的几种方法
在开发过程中，发现我们公司所使用的APP有点BUG，在APP中打开网页、H5应用之后，处于首页时，轻微的右划触发了后退事件，导致直接退出网页或者H5应用的页面，这样使得很多需要交互的手势没办法使用。本来这个右划后退事件是不应该出现在第一页的，这个BUG也应该由APP得开发来解决，不过当时这个APP是外包做的，如果更改这些比较麻烦，因此解决问题的任务就由我来了。 在使用某些JS插件（fullpage
2020-09-09 21:17:13
12201
原创 vue项目中使用swiper插件
先说说在vue中如何引用swiper1.npm命令安装swipernpm install swiper --save-dev2.在需要用到swiper插件的组件中引入swiper<script>import Swiper from "swiper";</script><style lang="scss" scoped>@import "../....
2020-04-28 22:12:02
7883
1
原创 vue 一级路由二级路由 父子路由高亮
一级路由<template> <div id="app"> <div> <router-link to="/Home">Home</router-link>| <router-link to="/about">About</router-link> </div&g...
2020-04-26 23:43:41
1372
原创 配置淘宝镜像
1.使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:npm install -g cnpm --registry=https://registry.npm.taobao.org2.把npm的register给永久设置过来就好了，这样使用cnpm或者npm就没差别了。（可选可不选）npm config set registry https://regist...
2020-04-25 18:24:13
1294
原创 元素 居中 弹出框
实现元素垂直居中的方法很多，相信大家都能说出几种。相对于PC端，移动端的方法会更多点，平时在网上收集了一些，在此贴出来分享给大家，仅供参考。方法1:table-cellhtml结构<div class="box box1"> <span>垂直居中</span></div>CSS.box1{ display: ta...
2020-04-24 22:17:22
176
原创 webpack 入门教程详细教程
webpack中文网：https://www.webpackjs.com/一、webpack是什么？ 4.xwebpack是一个现代javascript应用程序的静态模块打包器（module bundler）。webpack简单的说一个模块打包器。二、为什么要使用webpack？webpack能解决什么问题？现在很多的网页都可以看做是功能丰富的应用，他们拥有着复杂的java...
2020-04-17 10:23:57
589
原创 PS - 除去水印，文字
第一步：框选文字部分第二步：选择 - 色彩范围 - 吸管 - 吸取文字颜色 - 颜色容差 （调大）第三步：选择 - 修改 - 扩展 （2像素）第四步：内容识别 （shift + f5）完美去文字...
2020-04-13 23:15:58
596
原创 Vant 的 rem 引用
引入：npm i lib-flexible -Snpm i postcss-pxtorem -Dmain.jsimport "lib-flexible/flexible";项目根目录下创建：postcss.config.js//postcss.config.jsmodule.exports = { plugins: { auto...
2020-04-11 00:57:41
237
原创 移动端点击300ms 延时 FastClick
在vue中使用 // 安装 npm install fastclick -S // 引入 main.js 中 import FastClick from 'fastclick' // 使用 FastClick.attach(document.body);
2020-04-10 10:44:14
131
原创 学习 API 接口
前言前后端的分离，在和后端对接之前，前端开发人员调试的时候，总是面对没有真实数据的尴尬地位。虽然有mock.js可以模拟数据，但是始终只是在本地进行模拟。而豆瓣提供的这些公开的接口，相信可以满足大部分前端的开发。具体api1、豆瓣热映接口：https://api.douban.com/v2/movie/in_theaters参数：start : 数据的开始项count：单页条数ci...
2020-04-09 10:11:05
1589
原创 vue keep-alive 保留切换后的状态，上一个状态，之前状态，tab切换
keep-aliveProps：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 ...
2020-04-06 17:48:25
1703
原创 module.exports 与 exports，export 与 export default 关系和区别
首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。CommonJS模块规范Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属...
2020-04-06 10:39:30
184
原创 fs 模块
node fs 文件系统1、浏览器js 不允许操作文件。2、服务端node通过fs核心模块文件系统来操作。（增，删，改，查）fs 重点操作文件操作：读取、写入、删除、判断存在性，文件信息目录操作：创建、删除、读取fs 操作都有两个版本：同步版本 （接力赛跑）异步版本 （比赛跑）1、读取文件格式：readFile（异步）readFileSync （同步）readFile(...
2020-03-31 17:42:23
202
原创 vue 全局组件和局部组件
组件分类：全局组件 局部组件 全局组件在任何地方都可以使用 局部组件只能在当前实例里用全局组件Vue.component("组件名称",{ data(){ return { msg:"123" } }, methods:{ fn()...
2020-03-30 21:17:39
279
原创 vue-cli 3.0 中 vue.config.js 配置文件
vue.config.js配置文件在使用vue-cli3创建项目后，因为webpack的配置均被隐藏了，当你需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来配置新的配置。const url = require('url');const queryString = require('querystring');const path = require...
2020-03-28 13:23:53
5154
1
原创 mock.js 教程
一、Mock.js的功能：①基于数据模板生成数据②基于HTML模板生成数据③拦截并模拟ajax请求二、Mock.js的安装：① 下载mock.js文件<script type="text/javascript" src="http://mockjs.com/bower_components/mockjs/dist/mock.js"></script>② np...
2020-03-27 23:12:05
1453
原创 Generator + co
GeneratorGenerator 函数是一个普通函数。区别：function关键字与函数名之间有一个星号。（ES6 没有规定，function关键字与函数名之间的星号，写在哪个位置都能通过。）函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指...
2020-03-25 04:35:35
662
原创 面向对象 OOP es6 Class 类
面向对象编程 （Object Oriented Programming）单例设计模式单例模式解决的问题高级单例模式基于单例模式实现模块化开发工厂模式单例设计模式1、表现形式 （对象）var obj = { xxx:xxx};2、作用把描述同一件事务的属性和特性进行 分组，归类（存储在一个堆内存空间中）。因此避免了全局变量之间的冲突和污染var pa...
2020-02-06 22:43:20
209
原创 vue v-model 单选 复选 下拉 表单
v-model表单控件在实际业务较为常见，比如单选、多选、下拉、输入框等，用它们可以完成数据的录入，校验，提交等。例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。使用v-model 后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性的值。使用v-model...
2020-01-12 09:01:04
436
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人