- 博客(53)
- 收藏
- 关注
RSS订阅
原创 目录大全
组件通信vue的生命周期八个钩子函数vuexvue-router深拷贝的三种方法和手写深拷贝js数据类型数据类型判断数组方法 (es4,es5,es6)arguments原型和原型链this指向和Call、apply、bindthis指向问题和new的过程作用域、作用域链、自由变量、变量提升var let const 区别js中的闭包js中事件委托keep-alive...
2021-06-01 19:22:16
137
原创 节流防抖函数
函数节流(throttle)函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。如何实现其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环； html, body { height: 500%; // 让
2021-06-17 21:49:31
143
转载 vue的双向数据绑定
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，
2021-06-16 19:12:19
380
原创 ifram 优点、缺点
首先说一下iframe有什么作用：iframe元素会创建包含另一个文档的内联框架。提示:可以将提示文字放在之间，来提示某些不支持iframe的浏览器优点:iframe能够原封不动的把嵌入的网页展现出来。如果有多个网页引用iframe，那么你只需要修改frame的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的复用性。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来.
2021-06-14 21:18:53
128
原创 项目中如何修改element-ui的默认样式(去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/)
我们在vue中引入第三方组件库时,组件中style样式中的scoped会成为我们修改样式的阻碍,要想修改css样式,并且不影响全局样式,有三种解决方法：方法一:在修改css样式style标签里,把它的scoped属性去掉,然后在这个标签的内容里面写需要修改的element-ui默认css样式(element-ui中标签设置样式都是前面加.的):<style> .my{ margin: 20px; } .my .el-input__inner{ border-radius: 1
2021-06-11 07:41:20
679
1
原创 elemeng-ui 中el-form 表单如何校验
表单有一个rules属性,它的值是一个数组,里边每一项是一个对象包含着每一条校验规则:trigger:‘blur’ 是指当表单失去焦点时开始校验；message是当校验失败时的提示信息；rules的值也可以是变量,在data中进行赋值：举例是：<el-form-item label="年龄" prop="age" :rules="[ { required: true, message: '年龄不能为空', trigger: 'blur'},
2021-06-08 07:38:12
1033
原创 Vue项目使用Nginx服务器配置(路由history模式白屏如何处理）
第一步:先下载Nginx;第二步:将下载之后的Nginx压缩包解压到指定文件(Nginx项目目录如下,解压的路径不能是含有中文的):第三步:把解压后的目录整体拖进vscode,找到conf文件中的nginx.conf文件,修改里面的配置：找到 location / {} 选项,在里面写：...
2021-06-07 21:50:06
188
原创 下载安装Nginx
前言Nginx 是一个高性能的 HTTP 和反向代理 Web 服务器，同时也提供了 IMAP/POP3/SMTP 服务。Nginx 是由伊戈尔·赛索耶夫为俄罗斯访问量第二的 Rambler.ru 站点开发的，，因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在 BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上 Nginx 的并发能力在同类型的网页服务器中表现较好，
2021-06-07 11:49:32
986
原创 webpack打包优化
第一步: 先配置路由懒加载：在配置路由时,可以使用路由懒加载,当切换到这个路由时才会加载这个页面。我们可以在路由规则中配置如下:{ path: '/', // 路由 name: 'Home', // 路由名称 component: () => import("@/views/Home.vue") // 使用这种方式来实现路由懒加载 }第二步: 关闭生产环境下的SourceMap映射文件:我们关闭这个之后,在打包时就不会生成后缀名
2021-06-06 20:02:24
307
原创 vant-ui 按需引入
vant-ui 按需引入安装vant-ui插件#先安装vant-uicnpm install vant-ui --save # 再安装按需引入的插件cnpm i babel-plugin-import -D通过 npm 安装npm i vant -S通过 yarn 安装yarn add vant导入我们先来说一下以前的导入方式 (全局导入)这种导入方式直接在 main.js 文件下引入 以下两个文件就可以了import Vant from ‘vant’；import ‘v
2021-06-03 15:26:36
458
原创 vue-router 鉴权 守卫
概述角色：超级管理员、主题管理员、数据服务管理员权限：超级管理员：所有页面主题管理员：基础公共页面+主题设置页数据服务管理员：基础公共页面+数据服务设置页+数据服务审批页需求：角色菜单来自后端，当用户未通过页面菜单，直接从地址栏访问非权限范围内的url时，拦截用户访问并重定向到首页。实际系统中还有几种管理员，此处略去，以精简描述。原本想用动态路由的思路去做，按权限加载对应路由表，但是由于权限可以交叉（比如一个人可以同时是主题管理员和数据服务管理员），导致权限路由表还是得去做判断组合。于是
2021-06-03 11:31:33
96
转载 axios拦截，api统一管理
axios的封装 cnpm install axios --save // 安装axios复制代码创建目录一般会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法// 在http.js中引入axiosimport axios from 'axios'; //
2021-06-03 10:59:22
119
原创 移动端项目(去哪儿)项目开发流程
确定项目技术栈技术栈： Vue、 vue-cli、 vue-router、 Vuex、 axios、 vant、 rem、 scss、 webpack、描述： vue.js、 vue脚手架、 vue路由、 vue状态管理工具、 异步请求数据、移动端框架、自适应布局、css扩展语言、 打包工具搭建项目yarn,npm(cnpm)包管理工具
2021-06-03 09:50:29
145
转载 多环境变量配置
package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 staging通过 npm run build 打包正式 , 执行 production"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-cli
2021-06-02 20:47:05
214
转载 transition
transition①transition：包裹需要过渡的元素/组件,transition只会把过渡的效果应用到其包裹的内容上,而不会额外渲染DOM元素,也不会出现在可被检查的组件层级中。②transition元素的属性:(1)name -string，用于自动生成CSS过度类名。例如：name=“fade” 将自动扩展为 .fade-enter ，.fade-enter-active，等。默认类名为 “v”。(2)appear -boolean，是否在初始渲染时使用过度。默认false(3)c
2021-06-02 07:40:10
162
原创 keep-alive
keep-alive的概念keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。作用在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性参数Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则
2021-06-01 18:57:56
881
原创 js中事件委托
什么是事件委托：就是利用冒泡的原理，将事件加到 父元素 或 祖先元素上，触发执行效果。事件委托优点：1.减少内存消耗，减少事件绑定2.给动态添加的元素绑定事件事件委托的缺点:1.部分事件如 focus、blur 等无冒泡机制，所以无法委托。2.事件委托有对子元素的查找过程，委托层级过深，可能会被某一层阻止掉3.频繁触发的事件，不适合事件委托实现方式：一、可用addEventListener(); //所有主流浏览器，除了IE8及更早IE版本。1.语法：element.addEve
2021-05-30 20:30:54
152
转载 js中的闭包
闭包的含义特性：函数嵌套函数函数内部可以引用函数外部的参数和变量参数和变量不会被垃圾回收机制回收使用闭包的注意点：1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（privat
2021-05-30 18:37:06
65
原创 var let const 区别
var 与 let 的联系与区别同：都是用来声明变量异：var 全局声明，let 局部声明仅在声明的块级作用域内有效<script type="text/javascript">{var a = 1;let b = 2; console.log("a0="+a);console.log("b0="+b);} console.log("a="+a);console.log("b="+b); </script>如代码所示最后一个console.log报错，原因
2021-05-28 18:51:19
62
原创 作用域、作用域链、自由变量、变量提升
作用域作用域是可访问变量的集合。在 JavaScript 中, 对象和函数同样也是变量。在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。JavaScript 函数作用域: 作用域在函数内修改。局部作用域变量在函数内声明，变量为局部作用域。局部变量：只能在函数内部访问。// 此处不能调用 carName 变量function myFunction() { var carName = "Volvo"; // 函数内可调用 carName 变量}因
2021-05-27 21:53:13
81
原创 this指向问题和new的过程
new 的过程若执行 new Foo()，过程如下：1） 第一步：创建对象 obj；2） 第二步：原型赋值3） 第三步：Foo函数执行，this指向obj对象，给obj添加属性。4） 第四步：判断构造函数是否返回对象数据类型，如果返回，则返回那个对象，如果没有返回则返回obj对象 let a = new fn('张三', 20); function Foo(name, age) { this.name = name; this.age = age; // retu
2021-05-27 16:27:34
101
转载 this指向和Call、apply、bind
总结1.浏览器里，在全局范围内的this 指向window对象；2.在函数中，this永远指向最后调用他的那个对象；3.构造函数中，this指向new出来的那个新的对象；4.Call、apply、bind中的this被强绑定在指定的那个对象上；5.箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；6.apply、call、bind都是js给函数内置的一些
2021-05-26 19:08:49
146
原创 原型和原型链
1. prototype每个函数都有一个prototype属性，被称为显示原型function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(person2.name) //kavin2._ pro
2021-05-26 18:55:16
51
原创 arguments
argument中的形参、实参以及参数的值传递和引用传值形参：函数定义的参数。实参：函数调用时实际传递参数。参数匹配是从左向右进行匹配的，如果实参个数小于形参，后面的参数对应赋值undefined。实参的个数如果多于形参的个数，可以通过argument访问。参数的值传递和引用传值↓↓↓1）引用传递的参数，是传递引用对象的地址。函数内部修改会影响传递参数引用对象2）值传递的是一个值类型的副本，函数内部不会影响外部传递的参数变量...
2021-05-25 20:45:01
89
原创 数组方法 (es4,es5,es6)
常用数组push()： 原素组变let arr = [1,2,3,4,5]console.log(arr.push(5)) // 6console.log(arr) // [1,2,3,4,5,5]pop()： 原数组变，返回删除的元素let arr = [1,2,3,4,5]console.log(arr.pop()) // 5console.log(arr) //[1,2,3,4]shift()： 原数组变，返回删除的元素let arr = [1,2,3,4,5]
2021-05-25 19:39:53
110
原创 数据类型判断
JS数据类型判断的方法主要有四种方法：typeOf、instanceOf、constructor、Object.prototype.toString.call()1.typeOf返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、symbol、object、undefined、function等7种数据类型，但不能判断null、array等 typeof '123' // string typeof 1 // number
2021-05-24 18:59:24
59
原创 js数据类型
js的数据类型js中数据类型分为两大类：基本数据类型和引用数据类型值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。引用数据类型：对象(Object)、数组(Array)、函数(Function)。基本数据类型和引用数据类型的区别基本数据类型存储在栈内存中，引用数据类型存储在堆内存中；数据存储时，基本数据类型在变量中存的是值，引用
2021-05-24 18:54:21
100
转载 深拷贝的三种方法和手写深拷贝
在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。1、当我们对数据进行操作的时候，会发生两种情况基本数据类型var a = 3;var b = a;b = 5;console.log(a); // 3console.log(b); // 5可以看到的是对于基本类型来说，我们将一个基本类型的值赋予 a 变量，接着将 a 的值赋予变量 b ；然后我们修改 b ；可
2021-05-23 19:40:11
344
原创 vue-router
路由的两种模式1、hash模式在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。2、history模式history采用HTML5的新特性；且提供了两个新方法：pushState()和
2021-05-23 19:31:34
89
原创 vuex
Vuex是什么vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护有五个属性分别是： state状态、getters计算器、mutations改变状态、actions异步操作、module模型state属性： 存放状态，例如你要存放的数据const store = new Vuex.Store({ state: { msg: '数据' }})如果想要组件中使用，可以使用以下
2021-05-21 20:44:27
79
原创 vue的生命周期八个钩子函数
vue生命周期简介生命周期认我们在控制整个vue时更容易形成更好的逻辑，可以分为四个阶段：创建阶段，挂载阶段，更新阶段，销毁阶段分别有：创建阶段：beforeCreate() 只有一些实例本身的事件和生命周期函数 var vm = new Vue({ el: '#app', data: { message: '今天是周一！！！' }, beforeCreate(){ console.group('beforeCreate 创建前状态=
2021-05-20 19:32:18
522
1
原创 vue的组件通信
可分为父传子、子传父、兄弟组件之间的通信父传子父组件给子组件传值，可以在父组件的子标签中添加自定义属性名 绑定需要传递的参数，最后在子组件中通过props来接收这个参数props的用法有三种//第一种props:['call'] //第二种props:{ call:String //可以指定类型，如数组、字符串···}//第三种props:{ call:{ type:String, //类型 default:'Baby' //默认的值 }}子传父通过$e
2021-05-19 20:28:04
73
原创 优购商城项目 详细步骤流程
写项目之前必须要有接口文档 准备工作接口文档是必不可少的参考文档我们还可以参考 小程序的开发文档、阿里巴巴字体 iconfont 、mdn…项目的搭建搭建项目目录的结构 相当于分模块的去放我们需要的文件 使项目的结构可以清晰明了然后就是分析页面 搭建项目基本项目的页面{ "pages": [ //项目页面的路由信息 "pages/index/index", "pages/category/index", ]}引入项目中需要的字体图标库 并且可以保证全局引入 这样才
2021-05-17 21:47:30
348
原创 小程序发布流程
发布流程有三部分1、上传代码2、提交审核3、发布版本1、上传代码输入版本号，项目备注,点击上传上传成后有提示，上传成功到这里我们开发代码这块就完工了，剩下的就是去微信小程序平台发布了。2、提交审核进入微信小程序的官网进入【版本管理】找到开发版本，点击‘提交审核’首次提交审核，会弹出如下提示，点击前往填写填写小程序基本资料点击填写填写基本信息添加开发者 、点击编辑点击添加成员输入微信号，设置权限，点击确认添加，手机扫描二维码，确认添加。添加成功、添加体
2021-05-17 10:40:13
116
原创 小程序支付流程
支付 <view class="order_pay_wrap" bindtap="handleOrderPay" > 支付({{totalNum}}) </view> async handleOrderPay() { try { // 1 判断缓存中有没有token const token = wx.getStorageSync("token");没有用户就跳转 // 2 判断 if
2021-05-16 19:36:55
91
原创 小程序授权登陆流程
// 1 获取用户信息const { encryptedData, rawData, iv, signature } = e.detail;// 2 获取小程序登录成功后的code const loginParams={ encryptedData, rawData, iv, signature ,code};3 发送请求 获取用户的tokenconst {token}=await request({url:"/users/wxlogin",data:loginParams,method
2021-05-16 19:30:39
91
原创 小程序获取收货地址流程
页面中的请求地址事件 <view class="address_btn" wx:if="{{!address.userName}}" > <button bindtap="handleChooseAddress" type="primary" plain >获取收货地址</button> </view>JS页面实现 async handleChooseAddress() { try { // 1 获取 权限状态
2021-05-14 18:57:22
119
原创 小程序如何写收藏、分享、客服功能
收藏获取缓存中的商品收藏的数组 (本地存储里收藏的数据)页面onShow的时候 加载缓存中的商品收藏的数据判断当前商品是不是被收藏 点击商品收藏按钮判断该商品是否存在于缓存数组中已经存在 就把该商品删除没有存在 把商品添加到收藏数组中 存入到缓存中即可分享 <view>分享</view> <button open-type="share></button>客服 <view>客服</view> <
2021-05-14 17:09:57
73
原创 常用的数组方法
es4数组方法findIndex()返回传入一个测试条件中函数符合条件的数组第一个元素的位置 为数组中的每个元素都调用一次函数执行若数组中元素在测试条件时返回true时，findIndex()返回符合条件的元素的索引位置，后边的值不会再调佣执行函数，若没有符合条件的元素符合-1reducr()接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算成一个值。可以作为一个高价函数，用于函数的composeresuce()对于空数组是不会执行回调函数的indexOf()可返回
2021-05-14 15:23:57
118
转载 如何使用Promise封装wx.request()
目录结构在根目录下创建http目录及api.js文件fetch.js以及http.js文件；在根目录下创建env目录,创建index.js配置并导出多个开发环境module.exports={ //开发环境 Dev:{ "BaseUrl":"https://www.develep.com" }, //测试环境 Test:{ "BaseUrl":"https://www.test.com" }, //生产环境 Prod:{ "BaseUrl":
2021-05-13 21:49:32
262
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人