- 博客(49)
- 收藏
- 关注
RSS订阅原创 双向绑定
双向绑定当我们的数据发生变化之后，我们的视图会同步的更新；当我们的视图更新，我们的数据也会同步的更新在Vue中，我们是通过v-model来实现双向绑定，v-model毕竟只是一种语法糖，不用v-model我们也可以实现它的功能，参考以下链接理解v-model<template> <div id="App"> //双向绑定 <input type="text" v-model="message"> //单向数据流 <input
2021-04-18 16:15:36
147
原创 可选链式操作符
可选链式操作符可选链式操作符允许读取被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性let nestedProp = obj.first?.second;//等价于let temp = obj.first;let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);像上面这行代码解读为如果obj.first存在，则取obj.first中的second，如果不存在，则返
2021-04-14 10:19:40
512
原创 数组去重的三种实现方法
方法一使用forEach和indexOf方法检测 let arr=[1,2,3,4,5,2,2,1,2] function unique(arr) { //声明一个空数组 const result=[] //遍历原数组 arr.forEach(item=>{ //检测result数组中是否包含这个元素 if(result.indexOf(item)===-1){ //若没有该元素，则插入到result中
2021-04-13 18:12:58
196
原创 手写封装js数组一些相关的API函数
map返回一个新的数组，数组中的元素为原始数组调用函数处理后的值 function map(arr, callback) { //声明一个空数组 let result = [] //遍历数组 for (let i = 0; i < arr.length; i++) { //执行回调 result.push(callback(arr[i],i)) } //返回结果 return result } const
2021-04-13 17:49:19
163
原创 节流与防抖
防抖所谓防抖，就是指触发事件后在n秒内，函数只能执行一次，如果在这段时间内再次触发函数，则会重新计算函数执行时间简单来说，就是你一直点鼠标的话，这个函数就会一直不触发，当你不点的时候，它就会在n秒后开始执行函数（要注意的是，这n秒内不能点鼠标，如果点了之后，它就会重新计算函数的执行时间）...
2021-04-13 15:54:24
84
原创 手写实现call()&apply()&bind()
1、API说明call()语法：call(fn,obj,…args)功能：执行fn，使this为obj，并将后面的n个参数传给fn（功能等同于函数对象的call方法）apply()语法：apply(fn,obj,…args)功能：执行fn，使this为obj，并将后面的n个参数传给fn（功能等同于函数对象的apply方法）bind()语法：bind(fn,obj,…args)功能：给fn绑定this为obj，并指定参数为后边的n个参数（功能等同于函数对象的bind方法）...
2021-04-06 23:46:03
76
原创 Vue请求后端接口导出excel表格
项目中遇到一个需求，用户下载文件，会从后端那里请求接口获得数据并下载导出excel表格后端小哥给我返回的是二进制数据流，需要前端自己去处理这些数据如下图，请求接口返回的数据都是乱码这里我们可以在axios的请求里添加，这样返回的二进制数据就会被读取为Blob的数据，responseType: ‘blob’fetchGet1(url, params) { return axios({ url, method: 'get', params,
2021-03-16 23:19:32
3151
1
原创 Webpack笔记（三）：CSS、HTML、JS相关处理
当你每次修改了文件之后，就需要重新再打包一次，这样重复的操作显得很冗余，于是，就有了下边的devServer（开发服务器）devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）配置如下module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: {
2021-01-28 23:38:31
130
1
原创 Webpack笔记（四）：eslint
1、js语法检查eslinteslint是撰写JS的一个规范，它会检查你的js代码有没有格式错误或者语法错误，使你的js代码更加规范化eslint的使用需要eslint-loader和一个eslint的库推荐使用爱彼迎的代码检查风格下载一些必要的东西npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D下载完之后，我们需要在package.json中新增一个"eslintConfig"对象，配置
2021-01-28 23:15:48
148
原创 Webpack笔记（二）：打包资源
1、打包样式资源因为样式并不能被webpack识别，所以我们回顾上一篇的内容，要想识别CSS，就要使用Loader，要想使用Loader，首先，我们需要先定义一个webpack.config.js的文件webpack.config.js 是webpack的配置文件作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）然后，webpack默认采用commonJS模块化方式，基本配置如下//resolve是用来拼接绝对路径的方法const { resolve } =
2021-01-27 13:28:52
97
原创 用Vue实现动态全选按钮功能
使用了计算属性computed的特点来实现动态全选按钮的功能，代码如下<template> <div class="box"> <div class="allselect" @click="allSelect()"> <img :src="isAllSelect ? selectUrl : notSelectUrl" alt="" /> <div>全选</div> </div>
2021-01-21 23:30:50
673
1
原创 当为Vue中的data赋值computed计算属性后，出现undefined的原因
今天遇到一个问题，当我给data数据初始化一个computed计算属性时，在页面上竟然没有显示，放代码<template> <div class="container"> <div>num1:{{num1}}</div> <div>num2:{{num2}}</div> <div>data中的数据{{sum}}</div> </div></template&g
2021-01-19 23:03:03
7837
3
原创 如何使用CSS改变png图片的颜色
有一个需求，就是当鼠标移到图片上的时候，改变图片的颜色变成这样，红色是大背景颜色，主要想改变的是箭头的颜色，然后箭头是一个png格式的图片，那么当鼠标移上去的时候，怎么改变图片的颜色呢？使用CSS的一个属性filterfilter:brightness(50%);brightness()可以调整图片的亮度和暗度具体可以查看MDN介绍...
2021-01-14 15:41:47
1418
原创 axios的proxy代理配置解析
proxy实际上是一种前端开发中方便开发用的东西，它在本地可以跨域访问其他的网站，但是当页面打包之后，proxy就会失效我是在vue.config.js中设置proxy的，代码如下 proxy: { //匹配到的路径 "/api": { target: "XXXXXXXXX", //目标主机地址 changeOrigin: true,//是否启动代理 pathRewrite: { //重写路径 "^/api
2021-01-12 19:04:02
8210
原创 Webpack笔记（一）：初体验
1、 Webpack是什么？Webpack是一个前端资源加载/打包工具，简单来说，就是将一些浏览器不认识的语法转换成浏览器能识别的语法比如说，将ES6转换成平时常见的JS代码，将Less转换成css代码等等1.1 Webpack的五个核心概念1.1.1 Entry入口（Entry）指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图1.1.2 Output输出（Output）指示Webpack打包后的资源bundles输出到哪里去，以及如何命名1.1.3 LoaderLo
2021-01-07 16:40:02
209
原创 js踩坑Uncaught SyntaxError: Unexpected token ＜错误
今天写代码的时候，把接口的函数改了一下，然后重新打包放到服务器上，就出现了下图的错误看了一下控制台的输出，只有一行划红线（是在打包之后的index.html报错）。项目是用vue+element UI写的，本身就没有在HTML页面（.html）写代码，怎么就说我报错了呢然后谷歌了一下午，最后找到解决办法了，尽管原因还不是很了解，但是我的做法就是清缓存，清完就啥事都没有了，也不报错，有哪位大神可以解释一下...
2021-01-05 18:26:37
1520
1
原创 理解在vue自定义组件中使用v-model
今天在看视频的时候，看到有人将一个input封装成一个自定义组件，然后他写的代码是这样的//父组件<k-input v-model="model.username"></k-input>//子组件<input type="text" :value="inputValue" @input="onInput">//子组件export default { data () { return { }; }, props:{ inp
2020-12-31 15:47:20
207
原创 Number类型数值转换
Number（）函数基于如下规则执行转换布尔值，true转换为1，false转换为0数值，直接返回null，返回0undefined，返回NaN字符串1、如果字符串包含数值字符，包括数值字符前面带加、减号的情况，则转换为一个十进制数值。举个例子，Number(1’)返回1，Number（‘123’）返回123，Number(‘011’)返回11（忽略前面的0）2、如果字符串含有有效的浮点值格式如"1.1"，则会转换为相应的浮点值（同样忽略前面的0）3、如果字符串包含有效的十六进
2020-12-24 22:43:25
1095
原创 Array.forEach（）解析
Array.forEach()为每一个数组元素调用一个函数1、概要array.forEach(function(item,index,array),thisValue)2、参数function（必选）：在数组的元素上执行的函数，它带有三个参数1、item（必选）：元素2、index（可选）：元素索引3、arr（可选）：数组本身thisValue（可选）：执行回调时用作this 的对象3、返回值该方法无返回值4、示例var a=[1,2,3];a.forEach(
2020-12-22 22:15:41
405
原创 box-sizing的一些草率理解
初来乍到，笔者在CSS的世界中遇到了box-sizing这东西，刚开始感觉这东西好像没啥用，什么content-box和border-box，感觉没啥区别。等到自己按照UI稿布局的时候，需要用到margin、padding、border的时候，这哥们的作用才发挥出来了。。我们都知道DOM元素都有一个盒模型吧，像这东西.content{ <!--标准盒模型的情况--> height: 100px; width: 100px; border: 2px
2020-12-16 22:33:46
113
原创 Array.find（）解析
Array.find()返回数组中满足提供的测试函数的第一个元素的值，若没有满足测试函数的元素，则返回undefined1、概要array.find(function(currentValue, index, arr),thisValue){ // 如果返回 true，则返回 item 并停止迭代 // 对于假值（falsy）的情况，则返回 undefined}2、参数function（必选）：在数组的元素上执行的函数，它带有三个参数1、currentValue（必选）：元素
2020-12-16 21:56:35
19514
原创 Array.splice（）解析
Array.splice()插入、删除或替换数组元素1、概要array.splice(start,deleteCount,value,...)array.splice()会改变原数组2、参数1、start（必选）：开始插入和（或）删除处的数组元素的序号2、deleteCount（可选）：要删除的元素个数，从start开始，并包含start处的元素。2.1、如果指定为0，表示插入元素，而不用删除任何元素。2.2、如果deleteCount被省略了，则start之后数组的所有元素都会
2020-12-14 23:01:34
965
1
原创 Array.slice（）解析
Array.slice()返回数组被截取的一部分1、概要array.slice(start,end)2、参数1、start：开始截取的数组下标（必选），如果为负数，则表示从数组的尾部开始计算。也就是说，-1代表最后一个元素，-2代表倒数第二个元素，以此类推2、end：结束截取的后一个（注意这里，是后一个）数组下标（可选），如果没有指定，则截取从start到数组尾部的所有元素。如果为负数，则表示从数组的尾部开始计算3、返回值一个新数组，包含array中从start到end之间的所有元
2020-12-14 22:23:46
294
原创 Array.map（）解析
Array.map（）从数组元素中计算元素1、概要array.map(function)array.map(function(array[i]，i，array)，o)2、参数function(array[i]，i，array)：必选，array的每一个元素都会调用的函数，其中1、array[i]：数组元素（必选）2、i：数组下标（可选）3、array：数组对象（可选）o：可选，function调用时的可选this值3、返回值一个新数组，由函数function计算出的元素组成
2020-12-14 22:08:50
368
原创 事件委托
什么是事件委托事件委托就是把原本需要绑定在子元素上的响应事件委托给父元素，让父元素来执行。简单来说就是你一个父元素里边可能会有多个子元素，如下 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>有这样一个需求，你需要为每个li元素
2020-12-11 14:34:54
136
原创 Transitions的动画功能
Transitions功能的使用方法Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能用法如下：transition：property duration timing-functionproperty表示对哪个属性进行平滑过渡duration表示在多久时间内完成属性值的平滑过渡timing-function表示通过什么方法进行平滑过渡举例：<style> div { background-colo
2020-12-10 23:34:58
232
原创 多个值参与&&与运算符、||或运算符的结果解析
或运算符（ | | ）之前遇到过这样的函数function a(){ return value1 || value2 || value3}查了一下资料或运算符 || 做了如下的事情：从左到右依次计算操作数处理每一个操作数时，都将其转化为布尔值。如果结果是 true，就停止计算，返回这个操作数的初始值如果所有的操作数都被计算过（也就是，转换结果都是 false），则返回最后一个操作数换句话说，就是返回第一个遇到的真值，如果不存在真值，则返回最后一个值举例：alert(1 || 0
2020-12-10 17:09:58
695
原创 Vue组件通信：子传父的简易理解
子传父最常用的方法是使用$emit父组件<template> <div id="App"> <div>父组件</div> <child @childClick="parentClick"></child> <div>{{parentMessage}}</div> </div></template><script>import Chi
2020-12-07 22:46:05
324
原创 如何用原生JS代码实现v-model功能
原生JS代码<input type="text" id="username" value=""><h1></h1><script> let inputDom=document.querySelector("#username") inputDom.oninput=function(){ document.querySelector("h1").innerHTML=inputDom.value }</script>
2020-12-02 16:14:26
1290
原创 Vue组件通信：父传子的简易理解
在Vue的组件中，数据总会在父子组件中来回传递，今天来简单理解一下Vue组件的父传子通信在这里我使用了三个组件，层层调用//Detail.vue GoodList的父组件<template> <!--recommends是Detail.vue中通过向服务器发送请求传来的数据--> <goods-list :goods="recommends"></goods-list></template>//GoodList.vue
2020-12-02 12:12:57
223
原创 leetcode--二叉树的镜像
请完成一个函数，输入一个二叉树，该函数输出它的镜像。例如输入： 4 / \ 2 7 / \ / \1 3 6 9镜像输出： 4 / \ 7 2 / \ / \9 6 3 1思路交换两个节点的位置，然后递归调用所有节点代码/** * Definition for a binary tree node. * function TreeNode(val) { * this.val =
2020-11-28 14:06:11
92
1
原创 leetcode--链表中倒数第k个节点
题目输入一个链表，输出该链表中倒数第k个节点。为了符合大多数人的习惯，本题从1开始计数，即链表的尾节点是倒数第1个节点。例如，一个链表有6个节点，从头节点开始，它们的值依次是1、2、3、4、5、6。这个链表的倒数第3个节点是值为4的节点。给定一个链表: 1->2->3->4->5, 和 k = 2.返回链表 4->5.思路建立两个指针，快指针和慢指针，快指针和慢指针之间的间隔指定为k值，保持他们的间隔为k即可/** * Definition for sing
2020-11-21 14:32:29
107
原创 leetcode--数组中重复的数字
1、第一种方法代码（返回Number类型）/** * @param {number[]} nums * @return {number} */var findRepeatNumber = function(nums) { var arr=[]; for(let i=0;i<nums.length;i++){ if(arr.indexOf(nums[i])===-1){ arr.push(nums[i]) }else{
2020-11-20 07:56:07
57
原创 leetcode--二维数组中的查找
思路：在右上角开始遍历数组，如果当前元素值比target大，说明当前元素的下边的所有元素都一定大于目标值；如果当前元素比target小，说明当前元素的左边的所有元素都一定小于目标值var findNumberIn2DArray = function(matrix, target) { let arr1Length=matrix.length //数组为空时返回false if(!arr1Length) return false let arr2Length=matrix
2020-11-20 07:55:24
63
原创 leetcode--替换空格
1、第一种方法使用split+join方法1.1 String split（）将一个字符串切分为一个由字符串组成的数组概要string.split（delimiter,limit）参数delimiter：string切分处的字符串或正则表达式limit:这个可选的整数指定已返回数组的最大长度。如果指定，则最多返回数量为这个数字的子串。如果没有指定，则将切分整个字符串，无论结果数组有多长返回一个由字符串组成的数组，通过在由delimiter界定的边界处切分string为子串创建。返回数组中
2020-11-20 07:54:46
75
原创 leetcode--从尾到头打印列表
1、第一种方法使用了栈的原理/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } *//** * @param {ListNode} head * @return {number[]} */var reversePrint = function(head) { let arr1=[] w
2020-11-20 07:54:16
57
原创 leetcode--用两个栈实现队列
用两个栈实现一个队列。队列的声明如下，请实现它的两个函数 appendTail 和 deleteHead ，分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素，deleteHead 操作返回 -1 )var CQueue = function() { this.arr1=[] this.arr2=[]};/** * @param {number} value * @return {void} */CQueue.prototype.append
2020-11-20 07:53:40
127
原创 leetcode--斐波那契数列
写一个函数，输入 n ，求斐波那契（Fibonacci）数列的第 n 项。斐波那契数列的定义如下：F(0) = 0, F(1) = 1 F(N) = F(N - 1) + F(N - 2), 其中 N > 1.斐波那契数列由 0 和 1 开始，之后的斐波那契数就是由之前的两数相加而得出。答案需要取模 1e9+7（1000000007），如计算初始结果为：1000000008，请返回 1。方法一（使用数组存储）分析：将已经计算好的数值存储到数组中，等下次需要使用的时候直接从数组中取出。代码
2020-11-20 07:52:58
97
原创 leetcode--旋转数组的最小数字
把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个递增排序的数组的一个旋转，输出旋转数组的最小元素。例如，数组 [3,4,5,1,2] 为 [1,2,3,4,5] 的一个旋转，该数组的最小值为1。示例 1：输入：[3,4,5,1,2]输出：1示例 2：输入：[2,2,2,0,1]输出：0方法一：分析：先让数组排序，然后再取第一个元素Array.sort()对数组元素进行排序概要array.sort()array.sort(orderfunc)
2020-11-20 07:52:14
143
原创 leetcode--二进制中1的个数
请实现一个函数，输入一个整数，输出该数二进制表示中 1 的个数。例如，把 9 表示成二进制是 1001，有 2 位是 1。因此，如果输入 9，则该函数输出 2。示例 1：输入：00000000000000000000000000001011输出：3解释：输入的二进制串 00000000000000000000000000001011 中，共有三位为 '1'。示例 2：输入：00000000000000000000000010000000输出：1解释：输入的二进制串 0000000
2020-11-20 07:51:26
90
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人