hzh2031015的博客

原创 前端点击事件和input框失焦事件冲突，先后执行顺序

点击事件和input失焦事件同时触发的先后执行顺序

原创 【无标题】关于前端的matomo

关于埋点监控

原创 前端深拷贝

前端深拷贝最直白的

原创 van-datetime-picker的日期在显示中格式修改

日期加0

原创 mac系统前端vscode配置

第一步打开终端，我们要下载node中文下载地址： https://nodejs.org/zh-cn/download/就是这个直接下载就好这里说明，一直继续安装就行如果下载有问题,那你就去别的地方看看吧第二步要检查是否成功安装了 Node.js，可以在控制台中输入 node -v，回车后如果出现了 Node.js 的版本号，则表明安装成功了。由于现在的 Node.js 都集成了 npm，所以在安装好 Node.js 的同时，npm 也就安装好了，同样可以在控制台输入npm -v，如果出现

原创 银行或者手机号四位数后面添加空格最简单的方法

在网上查询到很多方法，卓个试了一遍，发现就这个最简单在输入的时候直接做了只输入数字的方式并且在4位数字之后直接输入空格我们的需求是16个数字，这里加了3个空格，所以长度限制是19如果还有更好的办法可以分享啊～ <input type="tel" oninput="this.value=this.value.replace(/\D/g, '').replace(/....(?!$)/g, '$& ');"

原创 js输入框复制文案方法

点击一个照片或者复制文案实现复制的数据<div @click="copy(this.aaaa)">{{this.aaaa}}</div> copy(text) { let _input = document.createElement("input"); // 直接构建input _input.value = text; // 设置内容 document.body.appendChild(_input); // 添加临时实例 _input.sele

原创 js前端的input输入框英文自动转为大写字母方法

在写项目时，产品要求特殊输入框需要自动将小写英文字母转为大写字母在input框的方法中有一个oninput的事件名字oninput 事件在用户输入时触发。 该事件在 或 元素的值发生改变时触发在这里说一下oninput和onchange的区别oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。在输入的时候自动转换所以我们要使用oninput事件例如οninput=“value=value.toUpperCase()”如果value不能用,看

原创 html5的标签和属性

一：html5的标签分类：1，标题标签（h1-h6）2，段落标签（p）3，链接标签（超链接a)4，图片标签（img）5，表格标签<table border="1px" cellpadding="0px" cellspacing="0px"> <tr> <th>表头一</th> <th>表头二</th> <th>表头三</th> &

原创 上线服务器nginx

什么是nginx？Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站　点（俄文：Рамблер）开发的　　它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。首先要安装1、下载Nginx下载地址：点击跳转下载2、下载之后，解压到指定的目录，就可以看到以下的目录

原创 elementui默认样式修改的问题

element-ui的样式会在全局使用，在个别页面要修改，有四种方法不会影响全局的样式1 在样式外新增一个样式不添加scoped<style scoped> .my .el-input__inner{ border-radius: 30px; /* 这个样式不起效果 */ }</style>2 使用deep样式穿透<style scoped> .my /deep/ .el-input__inner{ border-radius: 30px;/*

原创 ifram 优点、缺点

什么是ifram？IFrame 对象代表一个 HTML 的内联框架。在 HTML 文档中 <iframe> 每出现一次，一个 IFrame 对象就会被创建。优点：1.iframe就是将我们想要的网页原封不动的把展现出来。2.如果有多个网页引用iframe，那么你只需要修改iframe的src内容，就可以实现调用的每一个页面内容的更改，方便快捷。3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。4.如果遇到加

原创 webpack的打包优化

webpack配置打包优化 （vue.config.js）一系列配置。1，新建vue.config.js,设置静态资源路径为’./’,否则打包后项目无法运行module.exports = { publicPath: "./"}2，关闭生产环境下的SourceMap映射文件,包的大小减少80%；module.exports = { productionSourceMap: false,}3，跨域配置module.exports = { d...

原创 配置多环境变量

配置多环境变量1.首先我们需要在根目录下创建三个.env的文件，根据环境的不同，配置不同的VUE_APP_ENV.env.development.js文件：开发环境NODE_ENV='development'# must start with VUE_APP_VUE_APP_ENV = 'development'.env.staging文件：测试环境NODE_ENV='staging'# must start with VUE_APP_VUE_APP_E...

原创 axios封装和api接口请求

一，首先要封装axios要先下载axiosnpm i axios -S二，目录创建在项目的src目录中，新建一个文件夹,作为我们的网络请求模块，然后在里面新建一个api.js文件和一个http.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url三，在http.js中引入axios（使用什么组件要提前下载并且引入）import axios from 'axios'; // 引入axiosimport router from '../.

原创 vant按需引入

为什么要按需引入？在项目进行打包过程中，如果全局引入，文件过于大，优化不方便，所以对vant进行按需引入步骤1，点开vant官网>快速上手>下载vantnpm i vant -S2，按需引入下载一个插件babel-plugin-import是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。npm i babel-plugin-import -D3，在项目下创建一个.babel 添加配置{ "p...

原创 vue的动画transition

transition的属性及值1：transition-property: 指过渡属性的名称 它的默认值为all （表示所有可被动画的属性都表现出过度动画） 可指定多个property； none：没有过度动画； all：所有可被动画的属性都表现出过度动画； ident：属性名称（可以指定多个）2：transition-duration: 属性以秒或毫秒为单位指定过度动画所需的时间。 默认值为0s，表示不出现过渡动画。 可以指定多个时长。 属性值：以秒或者毫秒为单位

原创 keep-alive

vue中如何使用keep-alive1.keep-alive的概念1.1： keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。2.keep-alive的作用2.1：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性3.keep-alive的原理3.1：在 created

原创 作用域，自由变量，变量提升

作用域变量作用域：就是一个变量可以使用的范围。1，在js中有一个最外层的作用域被称为‘全局作用域’2，在js中每一个函数都是一个独立的作用域被称为‘函数作用域’，函数可以嵌套，所以作用域也可以嵌套3，在es6中新添加的一个块级作用域 ：比如（if{},for(){},while(){}…）；）自由变量自由变量就是当前作用域没有定义的变量一个变量在当前作用域被使用但是没有定义，就需要向上级作用域一层一层依次进行查找，直到找到为止，找到全局作用域，如果还找不到就报XX is no

原创 事件委托的理解

什么是事件委托？事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。事件委托的好处提高性能，减少了事件绑定，从而减少内存占用事件委托的应用场景在vue中事件委托我们经常遇到vue中v-for一个列表，列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听，从性能方面来说是不太好的。那我们可以通过把每个item的click事件委托给父元素的形式来实现。获取item元素中title值为edit的id

原创 闭包的理解

怎么理解闭包1：什么是闭包?要理解闭包，首先理解javascript特殊的变量作用域，变量的作用于无非就是两种：全局变量，局部变量。javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。我们有时候需要得到函数内的局部变量，但是在正常情况下，这是不能读取到的，这时候就需要用到闭包。在javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函

原创 let，const，var的区别

let、const、var的区别1.是否存在变量提升?1.1:var声明的变量存在变量提升，将变量提升到当前作用域的最顶端1.2：let和const不存在变量提升，他们声明的变量必须在声明后才能使用，否则就会报错2.是否存在暂时性死区2.1：let、const存在暂时性死区，只要块级作用域内部存在let命令，它所声明的变量就绑定在这个区域，不受外界的影响3.是否重复声明变量？3.1：var允许重复声明变量，let、const在同一作用域不允许重复声明变量，也不能声明同名变量4.是否存在块级作

原创 创建实例对象new的过程

原创 原型和原型链

1. prototype每个函数都有一个prototype属性，被称为显示原型2._ _proto_ _每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4. 原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找

原创 Js中的this与call/apply/bind的关系

1，JavaScript中的this与call/apply/bind的关系1，在浏览器里，在全局范围内this 指向window对象；2，在函数中，this永远指向最后调用他的那个对象；3，构造函数中，this指向new出来的那个新的对象；4，call、apply、bind中的this被强绑定在指定的那个对象上；5，箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候

原创 arguments

1、arguments特点arguments只在函数中存在。(箭头函数除外) arguments是一个伪数组。 是一个集合，存储了我们传入的所有形参。 arguments具有length，可以通过下标访问。2、arguments方法1、arguments.callee()方法这个方法可以调用方法本身3、转换为真正的数组使用展开运算符function fn (){let arr = [...arguments];// arr 就是一个数组}fn(1,2,3)

原创 js数据类型的判断

js数据类型有哪些基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）；引用数据类型: Object。（Object、Array、 function、Date、RegExp。）js数据类型判断五种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()1，type

原创 深拷贝和浅拷贝

深拷贝和浅拷贝的区别1.浅拷贝： 将原对象的引用直接赋给新对象，新对象只是原对象的一个引用，而不复制对象本身，新旧对象还是共享同一块内存2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”，新对象跟原对象不共享内存，修改新对象不会改到原对象为什么要使用深拷贝？我们希望在改变新的数组（对象）的时候，不改变原数组（对象）首先内存分为四个区域：栈区（堆栈），堆区，全局静态区，只读区（常量区和代码区）...

原创 vue-router

router路由原理路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。vue-router的两种模式hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（）， replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

原创 vuex总结

vuex总结1 什么是vuex？1.1：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，相当于是一个仓库，存放公共数据的，任何组件都可以使用存放在仓库里面的数据2.由五部分组成和在页面中的使用方法2.1：state：定义数据，使用方法是通过：this.$store.state.xxx(方法名)2.2：actions：可以包含异步操作，使用方法是通过：this.$store.dispatch.xxx(方法名)2.3：mutations：唯一可以修改state数据的场所，使用方法是

原创 vue的生命周期

vue的生命周期有八个阶段1.创建前/后：在beforeCreated阶段，vue实例的挂载元素e l 和 数 据 对 象 d a t a 都 为 u n d e f i n e d ， 还 未 初 始 化 。 在 c r e a t e d 阶 段 ， v u e 实 例 的 数 据 对 象 d a t a 有 了 ， el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在c

原创 vue的组件通讯

vue的组件通讯分三种（子传父，父传子，兄弟组件）1，父传子在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值在子组件通过props:[“自定义属性名”]来接收数据父组件代码：<template> <view class="content"> <!-- //顶部推荐分类 --> //自定义属性挂载需要传递的数据 <heade :content="headerItem"></heade>

原创 uni-app的request封装

uni-app的网络接口请求封装request.js首先创建request文件放一个request.jsmodule.exports={ request(url,method,data){ return new Promise((resolve,reject)=>{ uni.request({ //公共路径后面url拼接 url:'http://api.intewl.cn/api'+url, method:method,

原创 uni-app的自定义组件（heade）

首先在根目录下的components下创建heade.vue在父组件 index.vue下，通过封装的request来获取api接口数据<template> <view class="content"> //父组件自定义名传参 //三： <heade :content="headerItem"></heade> </view></template><scri

原创 uni-app的uni-ui引入和运行

uni-ui的下载和使用1）uni-ui 是全端兼容的基于flex布局的ui库；2）可以使用 npm 的安装使用方式，也可下载相关组件直接使用；3）uni-ui不支持使用 Vue.use() 的方式安装4）uni-ui 依赖 scss，若是 HBuilderX 中创建的 uni-app项目，需要在 HBuilderX 中安装 scss 插件；如果是使用 cli 创建的 uni-app 项目，需要在项目下npm安装node-sass 和 sass-loader1，在项目目录下打开终端

原创 项目逻辑分析包括代码

优购逻辑一，分析项目 首先创建小程序文件-----配路由创建页面-----四个主面（tabbar）-----配置（api接口，components，静态资源）创建小程序文件在公共app.js中配路由创建页面四个主面（tabbar） "tabBar": { "selectedColor": "#ff2d4a", "list": [{ "pagePath": "pages/index/index", "text": "首页", ...

原创 Uniapp（项目创建，运行）

一，下载HBuilderX软件首先需要下载HBuilderX框架下载地址： https://www.dcloud.io/hbuilderx.html二，创建uniapp项目选择uni-app，默认模板即可、创建之后的项目目录在pages里创建页面导入你项目所需要的静态资源（图片）在static文件中这时可以尝试运行文件最后运行效果...

原创 小程序发布流程

发布流程，大概分三个大步骤：上传代码 提交审核 发布版本1，上传代码到这里我们开发代码这块就完工了，剩下的就是去微信小程序平台发布了。2、提交审核进入微信小程序的官网:https://mp.weixin.qq.com2.1.进入【版本管理】找到开发版本，点击‘提交审核’首次提交审核，会弹出如下提示，点击前往填写3，填写小程序基本资料 点击填写 2，填写基本信息3,点击开发者点击编辑，添加成员添加项目成员..

原创 微信小程序支付授权

1，对button写属性<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">登录</button>//open-type出现弹窗获取用户信息//bindgetuserinfo向微信申请授权的点击事件这个事件中，有事件对象，这个事件对象中有我们需要的参数，然后我们使用小程序内封装好的方法wx.login()方法，这个方法会返回一个code，然后我们

原创 promise封装api接口

封装api接口的好处我们平常项目中基本每页都需要请求数据，而如果我们每次请求输入据都用小程序本身的request就会造成代码量过多，很难找到相应的方法。所以要封装一下，从而减少代码量，这个可以做到请求的接口和页面分离，方便维护和阅读。过程：在我们项目的根目录下新建一个http文件,然后里面新建1个js文件,文件名叫http.js，然后我们这个http.js主要使用promise封装我们的wx.request();let baseUrl = “https://xxx”; // 这个变量存放