- 博客(65)
- 资源 (11)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 uni-app的http请求的全局配置及拦截器配置
// 此vm参数为页面的实例，可以通过它引用vuex中的变量module.exports = (vm) => { // 初始化请求配置 uni.$u.http.setConfig((config) => { /* config 为默认全局配置*/ config.baseURL = 'https://api.shop.eduwork.cn' /* 根域名 */ // config.header = { // 'Content-Type': 'application/x-ww
2022-03-05 20:00:00
9334
2
原创 vue3中实现树形结构数据的嵌套删除和批量修改
递归算法实现数据扁平化处理 function filterData(data) { data.forEach(item=>{ if(!item.children) { newList.push(item.cid) return false } else { newLi
2022-03-05 14:07:16
1598
原创 vue3利用proxy和Reflect实现响应式的原理
用d来代理dataconst d = new Proxy(data,{ //有人读取p的某个属性时调用 get(target,propName){ console.log(`有人读取了d身上的${propName}属性`) return target[propName] }, //有人修改d的某个属性、或给d追加某个属性时调用 set(target,propName,value){ console.log(`有人修改了
2022-02-18 21:56:32
317
原创 Vue中axios的全局封装
axios封装import axios from 'axios'import Qs from 'qs'import VueCookies from 'vue-cookies';// const {set, get, isKey } = VueCookies// const AUTH_TOKEN = 1const axiosInstance = axios.create({ baseURL: '域名', headers: { // 'Authorization':
2022-02-15 08:42:42
528
原创 vue-router总结
vue-router的理解、对SPA应用的理解、什么是路由、路由分类、基本使用、几个注意点、嵌套路由（多级路由）、路由的query参数、命名路由、路由的props配置、<router-link>的replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器的两种工作模式、
2022-01-26 08:49:20
163
原创 Vue学习笔记（更新中）
MVVM模型、模板语法、 数据绑定、 Vue中的数据代理、data与el的2种写法、事件的基本使用、Vue中的事件修饰符、键盘事件、计算属性computed、监视属性watch、条件渲染、v-for指令、Vue监视数据的原理、过滤器、常用指令、Vue生命周期、Vue中使用组件的三大步骤、关于VueComponent、ref属性、配置项props、Vue插件、 scoped样式、less
2022-01-19 16:33:55
811
原创 Vue中的MVVM模型及数据代理
MVVM模型1.M：模型(Model)：data中的数据2.V：视图(View)：模板代码3.VM：视图模型(ViewModel)：Vue实例Vue中：1.data中所有的属性，最后都出现在了vm身上2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用数据代理：通过一个对象代理另一个对象中属性的操作(读/写)let number = 18;let person = { name: 'YY', sex: '男'}Object.defineProp
2022-01-15 09:04:53
115
原创 Vue:el与data的两种写法
data与el的2种写法1.el的两种写法(1)new Vue时候配置el属性(2)先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值【可以对其进行一些操作】2.data的两种写法(1)对象式(2)函数式如何选择：学到组件时，data必须使用函数式，否则会报错3.一个重要原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了 <div id="root"> <h1>你好，{{na
2022-01-13 19:14:09
278
原创 Vue的数据绑定
Vue中有2种数据绑定的方式：1.单向绑定(v-bind)：数据只能从data流向页面2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data【双向绑定一般都应用在表单类元素上(如：input、select等)】v-model:value 可以简写为v-model，因为v-model默认收集的就是value值 <div id="root"> <!-- 单向数据绑定：<input type="text" v-bind:valu
2022-01-13 19:01:59
457
原创 ES6——Symbol（理解和使用）
1. 概念：symbol 是一种基本数据类型 （primitive data type）。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法：“new Symbol()”。2. 使用2.1 你可以在调用Symbol()函数时传入一个可选的字符串参数，相当于给你创建的Symbol实例一个描述信息：(仅仅是对于这个Symbol的描述，
2022-01-11 08:30:00
1216
原创 ES5方法对各种接口的整体封装
const API = { user: { /** * @description 验证手机号码 * @data * @returns <AxiosPromise> */ verifyPhone: function(data) { return axios.post('/user/verifyPhone.php', data); },
2022-01-10 11:41:32
397
原创 Base64加密实战
首先先引入Base64.js文件https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.jsbase64对于空格等特殊符号的加解码更加完善，不会像原生js中的加解码会在解码时出现一些小问题。/** * 登录状态 */function loginStatus() { const checkbox = document.querySelector('.check input'); const password = documen
2022-01-04 15:52:26
806
1
原创 百度地图API的使用
首先先注册百度地图开放平台开发者账户申请地址http://lbsyun.baidu.com/apiconsole/key其次在应用管理里我的应用下进行创建应用这里应用类型作为前端人员选择浏览器端，Referer白名单可以写*，表示访问无限制接下来就可以参考javascriptAPI文档来进行使用了申请地址：https://lbsyun.baidu.com/index.php?title=jspopularGL注意在页面中引用时，要使用自己的密钥（AK）<script type="te
2022-01-04 14:42:39
1433
1
原创 axios较常用的全局配置
axios.defaults.baseURL = '域名';if (localStorage.phone) axios.defaults.headers.common['phone'] = JSON.parse(localStorage.phone);//请求头全局配置if (localStorage.token) axios.defaults.headers.common['token'] = JSON.parse(localStorage.token);//请求头全局配置// axios.defa
2022-01-04 13:41:40
2411
原创 js错误处理及调试
错误类型：Error 基类型，是所有的类型的⽗类，其它的类型都继承⾃它。⼀般由浏览器抛出，这个基类主要是⽤于开发⼈员抛出⾃定义的错误类型EvalError表⽰全局函数eva()的使⽤⽅式与定义的不同时抛出，但是实际上并不能产⽣这个错误，所以遇到的可能性接近0RangeError(范围)错误类型⼀般在数值超出相应的范围时发⽣ReferenceError(引⽤)错误类型⼀般发⽣在未定义，或不存在时产⽣SyntaxError(语法)指的是语法错误导致的报错信息TypeError(类型)U
2021-12-26 23:55:48
322
1
原创 Promise封装AJAX
/** * promise封装AJAX */function sendAJAX(request, url, data, responseType) { return new Promise((resolve, reject) => { // var formData = ''; // Object.entries(data); // for (let k in data) { // formData += k + '
2021-12-25 08:45:03
339
原创 浏览器检测
检测浏览器浏览器名称：除了IE10及以下是Microsoft Internet Explorer，谷歌、火狐、Edge、IE11都是Netscapeconsole.log(navigator.appName) //返回浏览器名称浏览器的代码名：都是Mozillaconsole.log(navigator.appCodeName); //返回浏览器的代码名所在的系统：Win32console.log(navigator.platform) //返回所在的系统⽤户代理字符串：谷歌【Mozi
2021-12-20 20:19:29
533
原创 this的指向
1.普通函数 this 指向 windowfunction fn(){ console.log(this)}2.定时器函数 this 指向 windowsetInterval(function(){ console.log(this);},1000)3.立即执行函数 this 指向 window(function(){ console.log(this);})()4.对象的方法 this 指向 对象var o = { say:function(){
2021-12-19 21:53:20
59
原创 axios初识
axios初识1. axios.get(url)返回的是一个promise对象，若成功则PromiseState为fulfilled，若失败PromiseState为rejected，而PromiseResult则为获得的数据2.axios.get(url).then(value=>{}).catch(reason=>{})相当于是axios.get(url).then(value=>{},reason=>{});3.then()中的参数可以为一个一般value来表示成功的数
2021-12-18 17:02:58
1895
原创 javaScript闭包
闭包的概念：闭包是指有权访问另一个函数作用域中变量的函数闭包的主要作用：延伸了变量的作用范围例1：function fn(){ var n = 1; function fun(){ console.log(n) } fun(); `//此时fun函数内部可以访问到fn函数里面的局部变量`}也可以写成function fn(){ var n = 1; (function(){console.log(n)})();}或者function fn(){ va
2021-12-17 18:45:20
892
原创 js利用构造函数封装轮播图
html <div> <ul> <li><img src="images/1.webp" alt=""></li> <li><img src="images/2.webp" alt=""></li> <li><img src="images/3.webp" alt=""></li>
2021-12-16 14:01:57
1090
原创 JavaScript字符串方法总结
所有字符串方法都会返回新字符串。它们不会修改原始字符串 **四个与正则关联的字符串方法** var ex = /(y|[0-9])+/ig; var newEx = /\||_/ig; var str = 'yy-yy-_-|2000|-'; ex.test(str); //match() 以数组形式返回匹配到的字符串 console.log(str.match(ex)); //repla
2021-12-07 09:03:57
83
原创 正则：用户名验证
html <input type="text" name="" id=""><span>请输入用户名</span>javascript //量词是设定某个模式出现的次数 var reg = /^[a-zA-Z0-9_-]$/; //这个模式用户只能输入英文字母 数字 下划线 短横线 但是有边界符和[] 这就限定了只能多选1 var rg = /^[a-zA-Z0-9_-]{6,16}$/; /
2021-12-02 15:42:08
942
原创 js实现按钮禁用倒计时
<button type="button">测试</button> var btn = document.querySelector('button'); var timer = null; btn.onclick = (function() { this.disabled = true; var n = 10; timer = setInterval(f...
2021-11-30 15:37:40
1252
原创 js递归求斐波那契数列
利用递归函数求斐波那契数列(兔子序列)： 1、1、2、3、5、8、13、21... function FibonacciSequence(n) { if (n == 1 || n == 2) { return 1; } else { return FibonacciSequence(n - 1) + FibonacciSequence(n - 2); }
2021-11-30 15:32:09
942
原创 递归的小理解
1.递归求阶乘 //求阶乘 function factorial(n) { if (n == 1) { return 1; } return n * factorial(n - 1); } factorial(4);第一次调用：n=3，进入函数factorial，先进行判断，此时 4 != 1，则返回 4 * factorial(3)第二次调用：
2021-11-27 12:00:46
229
原创 js轮播图的普遍问题
**轮播图里遇到的两个普遍问题：1.n的数据类型不匹配**这里this.title的数据类型为字符串型，此时赋值给n，这里的n也为字符串型，而全局定义的n的数据类型为数字型如果定时器里面写的是n=n+1或n=+1,则是加法的隐式转换，还是字符串型，所以会匹配不上n值，如果定时器里面写的是n++或++n,则通过自增运算将其转换成了数字型，所以不会存在匹配不上的问题【如果是这样写的，将i值赋给li的index属性则没有该问题，这里的i是数字型】2.定时器启动后，第一次点左边按钮需要点两次，右边按
2021-11-24 10:11:53
1561
1
原创 意外之喜：伪元素结构轻松实现上下点击的联动效果
::after和::before是虚拟元素，不会影响真正元素的所在文档的位置原理：::after和::before不是真正的节点，所以我们取不到他们，也不发设置点击等用户事件。::after和::before虽然是不能设置事件，但还会捕获用户事件，并把事件“冒泡”到伪元素所在的元素上。之所以“冒泡”二字加了引号，是因为他不是真的冒泡，更准确的说::after和::before帮所在元素去捕获去事件，事件的srcElement对象是伪元素所在的元素，而不是伪元素本身。html .
2021-11-20 09:34:05
103
原创 jquery实现动态元素的添加与删除
重点：1.自定义属性解决动态生成元素的删除2.利用事件委派删除动态生成的元素改变对应checkbox状态3.注意this的指向问题 //已选择路线的添加 //游玩路线 $('.travel-form>div>div>p input').on('click', function() { var choice = $('<a href="javascript:;"></a>'); choice.attr('.
2021-11-20 09:18:42
700
原创 JS扁平风格日历插件的使用方法
1.首先下载flatpickr.css和flatpickr.js文件，其次引入页面中下载地址：http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201608213894.html2.html代码： <!-- 设置入住时间范围（data-allow-input允许用户手动输入） --> <p>入住时间
2021-11-20 09:04:56
723
原创 jquery对象拷贝
对象拷贝语法：$.extend([deep],target,object1,[objectN]) 1.deep:如果设为true为深拷贝，默认为false 浅拷贝 2.target:要拷贝的目标对象 3.object:待拷贝到第一个对象的对象 4.objectN:待拷贝到第N个对象的对象 (5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象) (6.深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址，会申...
2021-11-05 19:43:52
379
原创 jQuery：增减商品数量及修改商品总价分析
增减商品数量分析：1.核心思路：首先声明一个变量，当我们点击+号(increment)，就让这个值++，然后赋给文本框2.注意1：只能增加本商品的数量，就是当前+号的兄弟文本框(count)的值3.修改表单的值是val()方法4.注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。 要获取表单的值修改商品总价分析：1.核心思路：每次点击+号或者-号，根据文本框的值乘以当前商品的价格 就是商品的小计2.注意1：只能增加本商品的总价，就是当前商品的总价模块3.修改普通元素的内容是
2021-11-04 14:19:23
1355
1
原创 事件监听与传统事件的区别
被老师问到了关于两者的区别，但是脑子中却很模糊，于是整理了以下文档：1.传统注册事件：后面的事件会覆盖前面的事件事件监听注册事件：addEventListener可以对同一个元素绑定多个事件（里面的事件类型是字符串 ，必定加引号 ，而且不带on），执行顺序从上到下依次执行2.传统解绑方式使用的是指针指向null，举例：element.οnclick=null事件监听采用removeEventListener来删除事件，注意事项：如果addEventListener添加的是一个匿名函数，则remove
2021-11-02 14:32:57
794
原创 jquery.hover解决csss鼠标悬停时无法选择上一个兄弟元素的办法
$(document).ready(function() { $("a.banner-bg").mouseover(function() { $("button").css("z-index", "0"); }); $("a.banner-bg").mouseout(function() { $("button").css("z-index", "-1"); }); });（此时button是a.banner-bg的上一个兄.
2021-10-17 13:18:37
590
原创 调整示例文本大写和显示器大写而产生桌面图标重叠混乱（可能是win10的小bug）
首先创建一个txt文本文件，其次在里面写入以下代码：Windows Registry Editor Version 5.00[HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetrics]“IconSpacing”="-1125"“IconVerticalSpacing”="-1125"然后将此文件已.reg的格式另存到桌面上，再双击此注册表文件，最后重启电脑即可实现桌面图标恢复...
2021-10-14 09:11:45
3337
表单设计De Wu.rp
2020-03-12
关于Ubuntu中Could not get lock /var/lib/dpkg/lock解决方案（亲测）
2020-03-10
Vue中销毁组件后，由定时器加载的自定义事件仍然有效是什么情况？
2022-01-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人