qq_45701130的博客

原创 Vue2数据双向绑定的原理

双向绑定在于数据变化更新视图，视图变化更新数据，因为视图更新数据可以通过事件监听来控制，着重点就是数据变化如何更新视图。

原创 vue2和vue3的区别详解

所以在新旧DOM对比时就会发现input类的新旧虚拟DOM是相同的，其实他们的真实DOM应该是不同的，但是此时还是会使用原来的真实DOM节点，此时就会发生错误。（1）如果新的虚拟DOM在旧的虚拟DOM中找到相同的key，就会比较虚拟DOM的内容，如果内容一致的话就会复用原来的真实DOM节点，如果不同就会创建新的真实DOM来替换掉原来的真实DOM。key是虚拟DOM的唯一标识。当数据发生变化时，会根据新的数据产生新的虚拟DOM，然后新的虚拟DOM会和旧的虚拟DOM进行对比。..................

原创 vue双向绑定checked属性&&JavaScript原生实现全选反选功能

功能要求：1、点击全选，其他相关的复选框都会被选中2、取消全选，相关复选框都变成不选中3、所有相关复选框都被选中后，全选框被选中4、只要有一个相关复选框没有被选中，全选框就不被选中一、vue双向绑定checked属性实现二、JavaScript实现全选和反选.........

原创 Uncaught InvalidStateError: Failed to set the ‘value‘ property on ‘HTMLInputElement‘

如果对手动修改value属性时就会报此错误。出于安全考虑，file的value是只读属性，只能由用户来选择要上传的文件，不能由程序代码来设置。

原创 VSCode插件开发核心文件package.json字段解析及核心属性解析

学习vscode插件开发，学会package.json和extension.ts文件后，就可以轻松的进行VSCode插件开发啦！二、activationEvents属性插件的激活事件数组，在什么情况下插件会被激活，当激活事件发生时，插件将被激活。每当打开解析为特定语言的文件时，就会触发激活事件2、onCommand每次调用命令时，就会触发激活事件还需要在contributes进行配置3、onDebug在启动调试会话之前，会触发激活事件4、workspaceContains每当打开文件夹并且

原创 十分钟实现自己动手写一个vscode插件，实现插件自由！

1、安装Visual Studio Code2、安装Node.js3、安装Git4、安装生产插件代码的工具：Yeoman和VSCode Extension generator二、创建工程1、在cmd命令行中执行以下命令，自动生成一个工程的基本代码2、选择项解释：3、目录说明4、结果展示1、在package.json中添加相关代码2、在extension.js文件中添加相关代码3、外部文件wordCounter.js文件...............

原创 JavaScript中函数参数到底是值传递还是引用传递？

前言：JavaScript中函数参数到底是值传递还是引用传递呢？答案是值传递，但令人疑惑的是，为什么当传递的参数为一个对象时，在函数局部作用域修改对象会影响全局的对象呢，这难道不是按引用传递吗？1、首先，先来看一个基本类型的变量作为参数传递的例子function test(num) { num = 10; return num;}var count = 5;let res = test(count);console.log(res); //10console.log(count

原创 JavaScript设计模式——订阅者-发布者模式简单实现

一、什么是发布者-订阅者模式订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。基本思想就是内部保存了一个对象存储订阅的函数，调用者通过名字来触发函数，订阅多个就按照队列的形式触发。二、发布者-订阅者模式实现//发布订阅模式class EventEmitter { constructor() { //事件对象，用来存放订阅的名字和事件 this.events

原创 如何解决TypeError: this.getOptions is not a function at Object.loader及webpack对应loader版本问题

前言：在使用webpack时总是出现类似TypeError: this.getOptions is not a function at Object.loader的错误，查找相关资料，是说webpack和要安装的loader版本不匹配的问题，但是都没有说如何找到webpack对应的loader版本。如何找到webpack对应的loader版本？1、进入gitHubhttps://github.com/webpack/webpack/2、在Tags中选择不同的版本...

原创 React中JSX&元素渲染&组件和Props

一、JSX简介JSX，是JavaScript的语法扩展，表示在JavaScript中写HTML的代码，可以很好的描述UI应该呈现出它应有交互的本质形式。1、JSX是一个表达式在编译之后，JSX表达式会被转为普通的JavaScript函数调用，并得到其返回值。所以，我们可以在if语句、for循环的代码块中使用JSX，可以将JSX赋值给变量，可以把JSX当做参数传入。2、JSX特定属性1、可以通过引号，将属性值指定为字符串字面量const element = <div tabIndex="1

原创 JavaScript中操作字符串的方法

在看下面这些方法之前，我们需要知道字符串一旦被创建了就不可变，所以我们以下操作都不会改变原字符串。1、concat（）拼接字符串var str = "abc";var res = str.concat("de");//"abcde"2、slice（start，end）删除字符串，参数为删除字符的起止位置var str = "abc";var res = str.slice(1);//"bc"3、substring(start,end)删除字符串，参数为删除字符的起止位置var st

原创 JavaScript将扁平数据转换为树形结构

将一组扁平数据转换为树形的层级结构<script> // 将扁平数据转换为树形结构 function test(arr) { // 将对象id和temp数组的下标对应起来 // 这样可以根据id准确找到某个对象 let temp = []; for (let key of arr) { temp[key.id] = key; } //保存树形结构 let res

原创 实现一个上中下布局，上下盒子高度固定、位置固定，中间元素自适应

面试题目：实现一个上中下布局，上下元素高度固定，且固定在屏幕的顶部和底部，中间元素自适应填满剩余空间。HTML代码<div class="header">顶部</div><div class="middle">中间</div><div class="footer">底部</div>CSS代码<style type="text/css"> * { margin: 0; p

原创 JavaScript中的事件循环以及Promise和async/await的执行顺序

前言：今天面试被问到事件循环，简单的回答了什么是事件循环之后，面试官给我了一段代码让我分析，我分析的四分五裂的，太尴尬了，赶快学习一下。什么是事件循环？JavaScript中的任务可以分为同步任务和异步任务，同步任务是立即执行的任务，会被推入到主线程，异步任务会被推入到异步任务队列，等待主线程上的任务完成之后，会到异步任务中找到相应的任务推入主线程来执行。异步任务中也有一个执行顺序？在异步任务中也有宏任务和微任务之分，在异步任务中执行宏任务时，遇到微任务会把微任务推入到微任务队列，等到当前宏任务完成

原创 Windows中将Nginx添加为服务

前言：在使用LeafLet写离线地图时，需要将Nginx作为LeafLet的代理，实现内网访问外网地图瓦片，下面是将Nginx添加为Windows服务。1、下载安装Nginx官网：http://nginx.org/en/download.html注意：我是将Nginx安装到了D盘，所以后面的文件修改时注意自己的路径问题。2、添加服务nginx-service.xml、cmd-restart-nginx.bat、cmd-start-nginx.bat、cmd-stop-nginx.batngin

原创 在Vue中修改组件库的样式-deep深度选择器

前言：在项目开发的过程中，我们会将Vue项目和element-ui进行结合使用，但是如果element-ui的样式有时不符合我们的需求时，这时就需要修改它的样式，此时就需要用到深度选择器。解决方案：1、style为css时，使用 >>>2、style为css的预处理器（less,sass,scss）时，可以使用 /deep/和 ::v-deep<style lang="css"> >>> .active{

原创 攻克十大经典排序算法【代码详细注释】

前言最近在学习算法知识，算法是必须要掌握的东西，而排序算法是最经典的算法知识，重要性就不必多说啦~还在学习中，对学到的知识进行简单的记录，如果有什么问题欢迎大佬指正。一、冒泡排序冒泡排序是最出名的算法之一，从序列的一端开始往另一端冒泡，依次比较相邻两个元素的大小。//冒泡排序，从小到大public void bubblesort(int[] arr) { //外层for循环表示比较的轮次 for(int i=0;i<arr.length-1;i++) { //从第一个元素开始，依次

原创 JavaScript中数组常用的19种方法总结

1、length获取数组长度var arr = [1,2,3,4,5];arr.length;//52、toString()返回由数组中每个值的字符串形式拼接成的一个以逗号分隔的字符串var arr = [1,2,3,4,5];arr.toString();//"1,2,3,4,5"3、valueOf()返回数组对象本身var arr = [1,2,3,4,5];arr.valueOf();//[1,2,3,4,5]4、join()将数组中所有元素组成字符串，并可以规定分隔符

原创 vue父子组件的执行顺序

原创 二叉树的遍历Java-前序、中序、后序、层次遍历

一、二叉树的前序遍历题目：给你二叉树的根节点 root ，返回它节点值的前序遍历。https://leetcode-cn.com/problems/binary-tree-preorder-traversal/示例1：输入：root = [1,null,2,3]输出：[1,2,3]示例2：输入：root = []输出：[] public class TreeNode { int val; TreeNode left; TreeNode right; TreeNode(

原创 557-反转字符串中的单词（Java）

题目：给定一个字符串，你需要反转字符串中每个单词的字符顺序，同时仍保留空格和单词的初始顺序。示例1：输入：“Let’s take LeetCode contest”输出：“s’teL ekat edoCteeL tsetnoc”提示：在字符串中，每个单词由单个空格分隔，并且字符串中不会有任何额外的空格。class Solution { public String reverseWords(String s) { //开辟一个新字符 StringBuffer str

原创 二叉树-合并二叉树

题目：给定两个二叉树，想象当你将它们中的一个覆盖到另一个上时，两个二叉树的一些节点便会重叠。你需要将他们合并为一个新的二叉树。合并的规则是如果两个节点重叠，那么将他们的值相加作为节点合并后的新值，否则不为 NULL 的节点将直接作为新二叉树的节点。示例1：注意：合并必须从两个树的根节点开始。解题思路：从两个树的根节点开始合并，对根节点合并之后还有对根节点的左右子树进行合并，很显然，可以使用递归来解决。public class demo { public class TreeNode {

原创 Vue单页应用(SPA)及其优缺点

单页面应用只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。单页应用跳转，就是使用路由跳转切换相关组件，仅刷新局部资源。多页面应用多个独立的页面的应用，每个页面必须重复加载js、css等相关资源，多页应用跳转，需要整页资源刷新。...

原创 链表-链表的中间节点

题目：给定一个头结点为 head 的非空单链表，返回链表的中间结点。如果有两个中间结点，则返回第二个中间结点。示例1：输入：[1,2,3,4,5]输出：此列表中的结点 3 (序列化形式：[3,4,5])返回的结点值为 3 。 (测评系统对该结点序列化表述是 [3,4,5])。注意，我们返回了一个 ListNode 类型的对象 ans，这样：ans.val = 3, ans.next.val = 4, ans.next.next.val = 5, 以及 ans.next.next.next = N

原创 前缀和算法-和为k的子数组

题目：给定一个整数数组和一个整数 k ，请找到该数组中和为 k 的连续子数组的个数。示例1：输入:nums = [1,1,1], k = 2输出: 2分析：首先想到的滑动窗口算法来解决，但是这里存在负数，指针移动存在多种可能，所以滑动窗口算法不适合该题。可以使用前缀和算法解决。前缀和：顾名思义，就是一个数组的某项下标及某项下标之前的元素的和。解题思路：因为每次计算需要获取前几次的结果进行对比，所以可以使用哈希表的方式进行存储结果。1、初始化一个哈希表、计算前缀和的变量sum、计算满足条件

原创 滑动窗口算法-和大于等于 target 的最短子数组

题目：给定一个含有 n 个正整数的数组和一个正整数 target 。找出该数组中满足其和 ≥ target 的长度最小的连续子数组 [numsl, numsl+1, …, numsr-1, numsr] ，并返回其长度。如果不存在符合条件的子数组，返回 0 。https://leetcode-cn.com/problems/2VG8Kg/解题思路：1、设置两个指针，两个指针构成一个窗口，初始时左右指针都指向数组的起始位置；2、声明一个变量统计两指针之间的数字的和；声明一个变量用来保存最小窗口个数；

原创 二分查找-给定一个 n 个元素有序的（升序）整型数组 nums 和一个目标值 target ，写一个函数搜索 nums 中的 target，如果目标值存在返回下标，否则返回 -1。

二分查找：给定一个 n 个元素有序的（升序）整型数组 nums 和一个目标值 target ，写一个函数搜索 nums 中的 target，如果目标值存在返回下标，否则返回 -1。示例1：输入：nums = [-1,0,3,5,9,12],target = 9输出：4示例2：输入：nums = [-1,0,3,5,9,12],target = 2输出：-1class Solution { public int search(int[] nums, int target) {

原创 Linux-shell编程-求一个数的阶乘

问题：编写一个shell脚本，计算n的阶乘。1、新建jiecheng.sh文件，编写程序#!/bin/bashfunction jiecheng(){ result=1 for((i=1;i<=$1;i++)) do result=$((reslut*i)) done echo $result}read -p "input:" numexpr $num + 10 &< /dev/nullif(($? == 0)) then jiecheng $num e

原创 大数据技术期末复习第七章——MapReduce练习

习题1、【单选题】下列说法错误的是____B____。A、Map函数将输入的元素转换成<key,value>形式的键值对B、Hadoop框架是用Java实现的，MapReduce应用程序则一定要用Java来写C、不同的Map任务之间不能互相通信D、MapReduce框架采用了Master/Slave架构，包括一个Master和若干个SlaveHadoop框架是用Java实现的，但是MapReduce应用程序不一定要用Java来写2【单选题】在使用MapReduce程序WordC

原创 大数据第三章HDFS编程实践-HDFS常用命令实践操作

1、显示指定的文件的详细信息hadoop fs -ls <path>2、ls命令的递归版本hadoop fs -ls -R <path>3、将指定的文件的内容输出到标准输出hadoop fs -cat <path>4、更改指定的文件的所属的组hadoop fs -chgrp [group] <path>5、改变指定的文件的权限hadoop fs -chmod [mode] <path>6、改变指定的文件的文件所有者h

原创 大数据技术第三章-分布式文件系统HDFS

1、HDFS集群采用主从结构，节点主要包括名称节点和数据节点2、对HDFS通信协议的理解错误的是：CA.名称节点和数据节点之间使用数据节点协议进行交互。B.客户端通过一个可配置的端口向名称节点主动发起TCP连接，并使用客户端协议与名称节点进行交互。C.HDFS通信协议都是构建在IoT协议基础之上的。（X）HDFS通信协议都是构建在TCP/IP基础之上的。D.客户端与数据节点的交互是通过远程过程调用（RPC）来实现的。3、采用多副本冗余存储的优势：保证数据可靠性加快数据传输速度容易检查数

原创 大数据技术期末复习习题-前两章 大数据概述及Hadoop概述

1、人类社会的数据产生方式大致经历的三个阶段：运营式系统阶段——用户原创内容阶段——感知式系统阶段。2、大数据的典型特征（4V）：数据量大数据类型繁多处理速度快价值密度低3、大数据对思维方式的影响：全样而非抽样效率而非精确相关而非因果4、大数据的计算模式：批处理计算（MapReduce、Spark等）流计算（Flink、Storm、Streams等）图计算（GraphX等）查询分析计算（Hive等）5、云计算的三种典型服务模式：基础设施即服务（IaaS）:将基

原创 运行Vue项目报错： TypeError: Cannot read property ‘upgrade‘ of undefined

npm run dev 运行Vue项目时报错： TypeError: Cannot read property ‘upgrade’ of undefined是因为在.env.development文件中未写后端请求地址，添加上自己的服务器地址即可。

原创 JavaScript基础知识总结

1、JavaScript允许对任意数据类型做比较2、NaN与所有其他值都不相等，包括自己3、JavaScript对象的键都是字符串类型4、字符串是不可变的，如果对字符串的某个索引赋值，不会有错误，但是也没有效果5、字符串的常用方法:调用这些方法不会改变原有字符串的内容，而是返回一个新的字符串toUpperCase():把一个字符串全部变为大写toLowerCase():把一个字符串全部变为小写indexOf():搜索指定字符串出现的位置substring():返回指定索引间的子串6、直接给

原创 flex弹性布局属性速查

1、行内元素也可以使用flex布局.box { display:inline-flex;}2、设置了flex布局之后，子元素的float、clear、vertical-align属性失效。3、容器的属性flex-direction属性属性决定主轴的方向属性值：row、row-reverse、column、column-reverseflex-wrap属性默认情况下，项目都排在一条线上，flex-wrap属性定义，如果一条线放不下，如何换行。属性值：nowrap(默认)不换行、

原创 Vue的计算属性和侦听器Watch

一、计算属性1、什么是计算属性？<div> {{message.split('').reverse().join('')}}</div>模板设计的初衷是用于简单计算的，在模板内放太多的逻辑会让模板难以维护，对于任何复杂的逻辑都可以使用计算属性。对于上述例子使用计算属性来处理<div id="app"> <p>{{message}}</p> <p>reversedMessage</p></div&g

原创 Python利用get、post请求爬取数据并写入Excel表格

要求：人民邮电出版社（http://www.ptpress.com.cn）主页1、获取“新书推荐模块”中设计类相关图书的基本信息（‘bookName’，‘bookId’，‘picPath’）保存到Excel中，2、并且在上一步的基础上爬取图书的价格和库存信息，保存到Excel中。一、python将数据写入Excel表格将数据写入Excel表格利用的是openpyxl，直接pip install openpyxl即可安装#创建工作簿book = Workbook()#激活worksheet

原创 JavaScript中的深拷贝和浅拷贝到底是什么

前言：深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。学习深拷贝和浅拷贝之前要先理解什么是基本类型和引用类型。一、到底什么是基本类型和引用类型？基本类型：就是值类型，即变量所对应的内存区域存储的是值。引用类型：就是地址类型，变量所对应的内存区域存储的是地址，真正的数据是在地址对应的内存区域中。二、基本类型和引用类型在赋值时内存的变化var age = 20;var age = 18;//基本类型重新赋值var arr = new Array(1,2,3,4);va

原创 ES6中Set和Map数据结构的方法有哪些

SetSet是ES6提供的新的数据结构，类似于数组，但是成员的值都是唯一的、不重复的。Set实例的操作方法 let set = new Set(); //add(value):添加某个值，返回Set结构本身 set.add(1).add(2).add(1).add(3); //1,2,3 //delete(value):删除某个值，返回一个布尔值，表示是否删除成功 set.delete(1); //has(va

原创 使用element的upload组件实现上传图片

使用element的upload组件实现图片的上传<el-upload class="upload" action="接口地址" :limit="1" :auto-upload="false" :before-remove="beforeRemove" :on-exceed="handleExceed" :on-change="commitmentFilehandleUpload" :on-error="handleFail" :f