101茂茂-CSDN博客

原创 keep-alive有关的生命周期有那些？

和keep-alive有关的生命周期有那些？前言：在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染 <keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。生命周期函数：在被keep-alive包含的组件/路由中，会

2022-05-09 23:37:29 1910

原创 vue生命周期总共分为几个阶段？

vue生命周期定义：Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。一共分为4大阶段8个方法,如图所示：beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，

2022-05-08 23:07:00 953

原创如何改变数组的顺序

如何改变数组的顺序，下面我们通过案例来实现一下案例目标：点击按钮，改变3个li的顺序，在上面的改变到末尾。实现效果：<template> <div id="app"> <ul> <li v-for="item in myArr" :key="item">{{ item }}</li> </ul> <button @click="btn">走一走</button>

2022-05-07 23:16:51 1376

原创 Vue中key作用, 为什么不能用索引

vue文档对key的定义：key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。:key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化无ke

2022-05-07 22:59:28 866

原创封装vue组件时的常见问题

了解封装vue组件的过程首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。问题1：vue组件是如何进行传值的？父向子

2022-05-07 22:47:40 855

原创【nodejs】利用web服务器处理静态资源

简单的web测试实现一个简单的Web服务器，能够根据HTTP请求的URL响应对应的静态资源，如果静态资源不存在则响应404。步骤：1、把所有的静态资源(.html、png、css、js等)全放在指定的目录“双开门效果”中2、收到用户的请求之后，去“双开门效果”目录下去找到对应的文件2.1、找到内容就读出来返回给用户2.2、找不到就报404目录如下：3、在上面的目录结构中，我们把所有的静态资源全放在“双开门效果”下面，然后使用server.js来启动web服务器。注意：我们在请求文件时，要

2022-04-27 15:44:19 444

原创 js中的排他思想

什么是排他思想就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除再设置当前元素。注意：1.所有元素全部清除样式（干掉其他人）2. 给当前元素设置样式（留下我自己）3. 注意顺序不能颠倒，首先干掉其他人，再设置自己下面通过一个小案例可以去运用一下它，在最终的效果中，我们可以看到，当我点击其中的按钮（比如首页），效果也会跟着实现，有兴趣的朋友可以复制过去运行试试，相信你一定可以更好地区理解、运用。最终效果：<!DOCTYPE

2022-04-26 23:22:23 3598

原创 Git下载安装和配置基础信息与命令

1. 在Windows 中下载并安装Git在开始使用Git 管理项目的版本之前，需要将它安装到计算机上。可以使用浏览器访问如下的网址，根据自己的操作系统，选择下载对应的Git 安装包：https://git-scm.com/downloads2. 配置用户信息安装完Git 之后，要做的第一件事就是设置自己的用户名和邮件地址。因为通过Git 对项目进行版本管理的时候，Git 需要使用这些基本信息，来记录是谁对项目进行了操作。使用–global参数，配置全局的用户名和邮箱，只需要配置一次即可。推荐配

2022-04-23 23:08:41 255

原创 location在开发时的常见应用

location在开发时的常见应用location对象用于获取和设置当前网页的URL地址，其常用属性和方法如表所示，在使用时，可以通过location或者window.location表示对象。示例：1.跳转到新页面location.href="http://www.baidu.com";当上述代码执行后，当前页面将会跳转到“http://www.baidu.com”这个URL地址;2.进入指定的锚点locatlon.hash="down"；当上述代码执行后，如果用户当前的URL地址

2022-04-21 21:13:50 280

原创防抖和节流的区别应用

防抖防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。防抖的应用场景用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；好处: 能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次 <input type="text" placeholder="请输入书名" /> <button>发请求呀</button&g

2022-04-20 20:45:17 119

原创 JSONP原理及执行过程

基本原理基本原理：主要就是利用了 script 标签的src不受浏览器同源策略的限制。可以把非同源的JavaScript代码请求到本地，并执行。执行过程1、前端定义一个解析函数(如: jsonpCallback = function (res) {})2、通过params的形式包装script标签的请求参数，并且声明执行函数(如callback = fn)3、后端获取到前端声明的执行函数(callback)，并以带上参数且调用执行函数的方式传递给前端4、前端在script标签返回资源的时候就

2022-04-18 23:01:43 1412

原创【JavaScript】封装自己的Ajax函数

最终要实现的封装效果封装一个名为itheima的Ajax函数，调用它可以发起GET或POST请求：// '&'拼接function parseObjectToString(obj){ let arr = [] for(let key in obj){ arr.push(`${key} = ${obj[key]}`) } return arr.join('&')}// 使用它可以发起任意类型的请求和接受响应数据// option.m

2022-04-17 21:55:41 753

原创 FormData和serialize的区别

serialize

2022-04-16 23:50:26 773

原创【JavaScript】点名案例

点名案例根据数组动态生成页面结构开始按钮点击可以点名2.1 给随机选中的学生增加样式效果2.2 只有最后一个被选中的学生保留样式效果2.3 最后选中的学生显示在选中栏中点名没结束,不能重复点名被选过的学生不能重复选中效果如下：实现步骤引入数据文件获取相关元素遍历数组: 取出每个元素放到div.cell中, 然后放到显示页面中div.content增加事件函数4.1 清理点击事件: 防止随机效果未结束, 二次点击4.2 获取次数(时间)选中的值(用于结束定时器): tim

2022-04-15 23:07:52 649

原创【JavaScript】简易小米手风琴案例

首选，我们在拿到案例的时候，要了解清楚案例的实现的步骤，大致需要用到效果、样式等等。。。其次，我们还要考虑案例在运行中的所产生的bug，这就要我们好好的处理好这些细节的问题。分析：静态结构动态渲染背景样式：背景样式可以设置图片居中显示鼠标移入：当前图片的宽度变大，其它的图片的宽度变小鼠标移出：所有图片的宽度还原为原始值效果的优化：仔细解决，能说明原因最终实现的效果结构//css样式 <style> * { margin:

2022-04-12 23:37:45 766

原创【JavaScript】简易打地鼠游戏

步骤分析：获取相关元素1.1 开始按钮1.2 分数框1.3 所有的地鼠洞给开始按钮定义函数startGame2.1 隐藏开始按钮2.2 清除分数为0: 允许多次玩2.3 开启定时器: 间隔时间自定义2.3.1 获取随机整数: 0-地鼠洞长度之间2.3.2 给随机数对应的地鼠洞添加up类(显示地鼠)2.3.3 给当前地鼠洞增加一个延时器: 到时自动清除up类(隐藏地鼠)给所有的地鼠(mole)增加点击事件3.1 获取所有的地鼠3.2 给所有的地鼠绑定点击事件3.3 干掉地鼠对应

2022-04-11 23:51:05 2167

原创【JavaScript】ES5和ES6在在构造函数加类型的方式的区别

ES5和ES6在在构造函数加类型方式与实现继承的区别【浅说】JavaScript 语言中，生成实例对象的传统方法是通过构造函数,es6的class 的出现基本上可以替代了es5的构造函数和原型,使之代码结构上更加简洁。1.构造函数的写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习js的程序员感到困惑。2.ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。3.新的class写法只是让对象原型的写法更加

2022-04-10 21:54:50 678

原创【JavaScript】this与函数的四种调用模式

根据函数内部this的指向不同，可以将函数的调用模式分成4种函数调用模式方法调用模式构造函数调用模式上下文调用模式（借用方法模式）函数调用模式如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了windowfunction fn(){ console.log(this);// 指向window }fn();方法调用模式当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到当前对象const obj =.

2022-04-09 10:00:00 136

原创【JavaScript】原型链的继承

利用代码的能力实现面向对象的特性封装和继承一个对象所能访问的原型是创建这个对象时，构造函数所指向的原型，建议：修改好原始对象之后再创建实例// js的继承不要求有父子关系，它就是一种单纯的添加属性的操作 function Person(name, age) { this.name = name this.age = age } Person.prototype.eat = function() { con

2022-04-08 15:55:53 690

原创【JavaScript】理解构造函数、实例、原型三者之间的关系

原型：原型本质是一个对象，理解为 JavaScript 自动帮我们添加的,只要是构造函数，系统会默认的为构造函数关联一个对象，这个对象就称为构造函数的原型，写在原型中的成员，可以被构造函数所创建的实例调用。原型是 JavaScript 自动帮我们在定义构造函数的时候添加的。所有构造函数的实例，共享一个原型，原型上一般是挂载函数。图示理解：原型 protoJavascript 规定，每一个(构造)函数都有一个 prototype 属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的

2022-04-08 15:47:10 1769

原创【JavaScript】定义函数的三种方式

在js中，我们一般定义函数有三种方式：函数声明函数表达式构造函数Function函数声明常规的方式将函数挂载到全局的Window上fn();//函数声明可以先调用，在声明function fn(参数..){ console.log("这是函数声明") return 返回值}函数表达式将函数当成一个值来处理const fn = function() { console.log("这是函数表达式"); }fn();//函数表达式必须先声明，再调用构造函数F

2022-04-07 21:00:20 879

原创【Javascript】三种分支结构语法的总结

switch-case分支结构1.语法switch(表达式){ // 不是布尔类型：是一个确定的变量 case 值1: // 值1,值2...都是字面量表达式的结果 === 值1，需要执行的代码 break; case 值2: 表达式的结果 === 值2，需要执行的代码 break; case 值3：表达式的结果 === 值3，需要执行的代码 break; .....

2022-04-06 22:50:13 392

原创【JavaScript】三种循环结构的总结

这里是引用while循环结构循环三要素起始值条件变量的变化1.语法：while(条件 true/false){ 循环体/需要重复执行的代码;}执行步骤：1.判断条件是否成立1.1 如果成立，执行循环体代码，然后重复步骤11.2 如果不成立，结束循环，执行大括号后面的代码3.注意点（1）小括号中的语句，无论结果是什么都会转换成布尔类型来判断是否成立（2）避免写一个死循环<!DOCTYPE html><html l.

2022-04-06 22:42:16 181

原创【javascript】创建对象的几种方法

内置构造函数创建我们可以直接通过 new Object() 创建：//在js中，对象有动态特性，可以随时的给一个对象增加属性或者删除属性。var person = new Object()person.name = 'Jack'person.age = 18person.sayName = function () { console.log(this.name)}缺点：麻烦，每个属性都需要添加。对象字面量创建var person = { name: 'Jack', age

2022-04-06 22:33:21 206

原创冒泡排序的使用

冒泡排序是一种交换排序，核心是冒泡，把数组中最大的那个往上冒，冒的过程就是和他相邻的元素交换。重复比较要排序的数列，通过两两比较相邻记录的排序码。排序过程中每次从后往前冒一个最小值，且每次能确定一个数在序列中的最终位置。若发生逆序，则交换；有俩种方式进行冒泡，一种是先把小的冒泡到前边去，另一种是把大的元素冒泡到后边。实现的逻辑：比较相邻的元素。如果第一个比第二个大，就交换他们两个。对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。针对所有的元素重复以上的

2022-04-06 22:27:27 428

空空如也

空空如也