好开心33-优快云博客

原创 js中this的指向（彻底理解js中this的指向，不必硬背）

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题例子1：按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的，下面的代码就可以

2025-03-03 08:30:31 822

原创 05、Vuex的使用

数据由vuex统一管理。其它组件都去使用vuex中的数据。只要有其中一个组件去修改了这个共享的数据，其它组件会同步更新。一定要注意：全局事件总线和vuex插件的区别：(1) 全局事件总线关注点：组件和组件之间数据如何传递，一个绑定$on，一个触发$emit。数据实际上还是在局部的组件当中，并没有真正的让数据共享。只是数据传来传去。(2) vuex插件的关注点：共享数据本身就在vuex上。其中任何一个组件去操作这个数据，其它组件都会同步更新。是真正意义的数据共享。

2024-12-30 10:58:34 822

原创 axios的使用

说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。异步网络请求。Ajax能够让页面无刷新的请求数据。实现ajax的方式有多种，如jQuery封装的ajax，原生的，以及axios。

2024-12-20 18:40:44 1332

原创 04、Vue与Ajax

(1) 在a页面中想获取b页面中的资源，如果a页面和b页面所处的协议、域名、端口不同（只要有一个不同），所进行的访问行动都是跨域的。(2) 哪些跨域行为是允许的？① 直接在浏览器地址栏上输入地址进行访问② 超链接③ ④ ⑤ ⑥ ......(3) 哪些跨域行为是不允许的？① AJAX请求是不允许的。

2024-12-20 18:40:03 1052

原创 3.15、消息订阅与发布

引入了一个pubsub对象，通过调用该对象的subscribe进行消息订阅，调用publish进行消息发布。使用pubsub-js库完成消息订阅与发布。该库可以在任意前端框架中实现消息的订阅与发布。

2024-12-19 10:45:41 409

原创 3.14、全局事件总线

原理：给项目中所有的组件找一个共享的vc对象。把这个共享的对象vc叫做全局事件总线。所有的事件都可以绑定到这个共享对象上。所有组件都通过这个全局事件总线对象来传递数据。这种方式可以完美的完成兄弟组件之间传递数据。(2) 共享对象上有$on、$off、$emit等方法。(1) 能够让所有的vc共享。

2024-12-19 10:45:02 584

原创 3.13、组件自定义事件

第一步：提供事件源（这个事件源是一个组件）第二步：给组件绑定事件 v-on:事件名或者 @事件名第三步：编写回调函数，将回调函数和事件进行绑定第四步：等待事件的触发，只要事件触发，则执行回调函数。对于组件自定义事件来说，要想让事件发生，需要去执行一段代码。这段代码负责去触发这个事件，让这个事件发生。这段代码在哪里写？事件绑定在A组件上，则触发这个事件的代码要在A组件当中编写。//·····App组件// ·····methods: {

2024-12-18 14:29:13 564

原创 3.9、mixins配置（混入）

通过代码发现，无论是在son.vue中，还是girl.vue中，实现点击获取信息的代码是一样的，逻辑也是一样的。这样的代码就可以进行复用，用mixins配置进行混入，以上演示的是方法methods的混入，实际上混入时没有限制，之前所学的配置项都可以混入。1、如果在组件本身的方法名，跟mixins.js的方法名重复了，则会产生冲突吗。对于生命周期钩子函数来说，都有的话，采用叠加，先执行混入的，再执行自己的。不会冲突，如果冲突了，会执行组件自身的，不会执行混入的。点击按钮，分别获取对应的组件信息。

2024-12-18 14:26:52 399

原创 3.7、props配置

props配置项，让组件接收外部传过来的数据一般是父组件给子组件传递，props配置在子组件内接收父组件传递的数据,也可以让父元素接受到子元素的数据父组件===》子组件传递数据用的比较多子组件==> 父组件传递数据用的比较少。

2024-12-17 11:12:07 470

原创 3.6、Vue脚手架

Vue的脚手架（Vue CLI: Command Line Interface）是Vue官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成html css js代码，并且可以将这些代码自动发布到它自带的服务器上，为我们Vue的开发提供了一条龙服务。Vue CLI注意：Vue CLI 4.x需要Node.js v8.9及以上版本，推荐v10以上。

2024-12-17 11:09:45 1236

原创 3.1、组件的使用

一个网页通常包括三部分：结构（HTML）、样式（CSS）、交互（JavaScript）① 组件：实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用。② 模块：一个大的js文件按照模块化拆分规则进行拆分，生成多个js文件，每一个js文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用。③ 任何一个组件中都可以包含这些资源：HTML CSS JS 图片声音视频等。从这个角度也可以说明组件是可以包括模块的。

2024-12-16 11:28:38 765

原创 2.17、vue的生命周期

所谓的生命周期是指：一个事物从出生到最终的死亡，整个经历的过程叫做生命周期。例如人的生命周期：(1) 出生：打疫苗(2) 3岁了：上幼儿园(3) 6岁了：上小学(4) 12岁了：上初中(5) ......(6) 58岁了：退休(7) ......(8) 临终：遗嘱(9) 死亡：火化可以看到，在这个上有很多不同的时间节点，在上去。Vue的生命周期指的是：vm对象从创建到最终销毁的整个过程。(1) 虚拟DOM在内存中就绪时：去调用一个a函数。

2024-12-16 11:23:45 1186

原创 2.16、添加响应式数据

修改data后，页面自动改变/刷新。这就是响应式。就像我们在使用excel的时候，修改一个单元格中的数据，其它单元格的数据会联动更新，这也是响应式。

2024-12-16 11:22:25 548

原创 2.12、收集表单数据 2.13、过滤器

过滤器filters适用于简单的逻辑处理，例如：对一些数据进行格式化显示。②　局部配置：在构建Vue实例的配置项中使用filters进行局部配置。从服务器端返回了一个商品的价格price，这个price的值可能是这几种情况：''、null、undefined、60.5。①　全局配置：在构建任何Vue实例之前使用Vue.filter(‘过滤器名称’, callback)进行配置。过滤器也可以接收额外的参数，但过滤器的第一个参数永远接收的都是前一个过滤器的返回值。如果不是，则页面上显示真实的数字即可。

2024-12-14 08:52:17 524

原创 2.10、列表操作

2.10.3、列表过滤computed属性实现。2.11.2、列表排序。

2024-12-14 08:44:29 431

原创 2.8、条件&循环渲染

你也可以使用 v-else 为 v-if 添加一个“else 区块”，当然，v-else元素也是必须紧跟在一个 v-if 或一个 v-else-if元素后面。key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下。顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if元素后面。

2024-12-13 09:03:42 1299

原创 2.7、class与style绑定

适用于样式名字和个数都确定，但是要动态决定用或者不用。适用于绑定的样式名字不确定，并且个数也不确定。适用于样式的名字不确定，需要动态指定。

2024-12-12 11:04:44 359

原创 2.6、侦听属性的变化

(1) 以上比较大小的案例可以用computed完成，并且比watch还要简单。所以要遵守一个原则：computed和watch都能够完成的，优先选择computed。(2) 如果要开启异步任务，只能选择watch。因为computed依靠return。watch不需要依赖return。比较大小的案例：延迟3s出现结果watch: {// 监视num1num1: {// 需求2:3s后出现比较结果// 此时使用箭头函数，箭头函数没有this，会向上找到num1，num1是vm的属性，

2024-12-12 11:02:30 544

原创 2.5、计算属性

使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性。Vue的原有属性: data对象当中的属性可以叫做Vue的原有属性。全新的属性: 表示生成了一个新的属性，和data中的属性无关了，新的属性也有自己的属性名和属性值。

2024-12-11 11:28:59 476

原创 2.4、事件处理

第一步：获取按键的键值：event.keyCode第二步：通过Vue的全局配置对象config来进行按键修饰符的自定义。语法规则：Vue.config.keyCodes.按键修饰符的名字 = 键值-- 3、自定义按键修饰符 -->huiche键：

2024-12-11 11:27:30 968

原创 2.2、MVVM及数据代理

vue通过监听者observer来监听data中的数据，这个getter和setter就是监听者里面的方法，getter就是监听者获取data中数据的，setter则是监听当数据发生变化的时候执行操作的，当修改属性的时候，setter被调用，在setter方法中就会让订阅者执行重新解析模板的操作，从而改变了页面。创建Vue实例vm，vm身上会有_data属性，_data通过劫持data配置项，再通过defineProperty的getter和setter，得到的响应式的数据。当View发生改动之后，

2024-12-10 11:42:27 936

原创 2.1、模版语法

2024-12-09 15:13:35 830

原创 01、vue2初体验

4、data数据插入到模版语句中，可以用{{}},这是Vue框架自己搞的一个语法，叫插值语法（或叫胡子语法），可以从data根据key获取value，并且将value插入到对应的位置，注意{{}}语法是固定语法，不可以添加其他内容，例如空格{ { }}先不去了解Vue框架的发展历史，Vue框架的特点，Vue的作者，这些对于我们开发来说，没有什么特别的作用，我们先学会基本使用，然后再去详细了解它的特点，就会发现，原来如此。一旦接管到容器之后，即使后面有相同的容器，Vue也是不管的。

2024-12-09 10:59:25 1089

原创 ES6-14面试题

类语法，模块化，箭头函数，函数参数默认值，模板字符串，解构赋值，延展操作符，对象属性简写， Promise， Let与Const，还有其他····一个是成功的回调，一个是失败的回调，对于promise结果我们可以用.then,.catch，还可以结合async，await可以处理。const定义变量不可修改，对于复杂数据类型来说，不修改地址值，可以修改堆里面的值的内容。箭头函数有简写方式，一个参数，小括号可以省略，函数体就一句，大括号可以省略。暴露 export：分别暴露，统一暴露，默认暴露。

2024-12-02 15:18:28 591

原创 09.ES13 10.ES14

ES13允许在类中通过static关键字定义一系列静态代码块，这些代码块只会在类被创造的时候执行一次。一个类可以定义任意多的静态代码块，这些代码块会和穿插在它们之间的静态成员变量一起按照定义的顺序在类初始化的时候执行一次。我们还可以使用super关键字来访问父类的属性。

2024-11-30 13:22:09 2270

原创 07.ES11 08.ES12

所以，你可以安心的使用 globalThis，不必担心它的运行环境。标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。判断前面的值有没有传入，如果传了继续读取后面的属性，如果没有传，那就返回undefined，也不会报错，免去了做层层判断。他们两个最大的区别就是 ' '和 0，?的左侧为 ' '或者为 0 的时候，依然会返回左侧的值；调用 allsettled 方法，返回的结果始终是成功的，返回的是promise结果值。

2024-11-30 13:15:53 1071

原创 05.ES9 06.ES10

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符。ES8 中学习的Object.entries 将对象转为二维数组，与Object.fromEntries互为逆运算。1：rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。JS正则表达式可以返回一个匹配的对象, 一个包含匹配字符串的类数组。, 在打开捕获括号后立即命名。将二维数组，转为对象，一般常用来将map对象，转为对象。

2024-11-29 20:14:05 529

原创 03.ES7 04.ES8

async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve(已定型成功或失败)的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数。在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同。propertiesObject(可选 )：也是一个对象，用于对新创建的对象进行初始化。padStart()、padEnd()方法可以使得字符串达到固定长度，有两个参数，字符串目标长度和填充内容。

2024-11-29 20:10:03 910

原创 02.ES6（2）

Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。

2024-11-28 09:32:22 1331

原创 02.ES6

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。

2024-11-27 13:35:23 1120

原创 js高级05-懒加载预加载

懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2024-11-26 11:42:38 930

原创 js高级04-深浅拷贝、防抖节流

举例：比如我们在玩LOL游戏时，当需要回城时，我们触发回城按钮，进入到回城状态进会有一个等待的时间，如果在这个等待时间内有重复去执行回城按钮，这时回城状态并不会做出其他响应，而是等时间到了后才会完成回城。每一级的数据都会拷贝，拷贝后，两个对象拥有不同的地址，当拷贝出来的对象发生改变时，原对象内容不会改变，两者互不影响。浅拷贝只拷贝引用（地址值），当拷贝的新对象发生改变时，原对象也会发生相同的改变，也就是说，浅拷贝会影响原来的元素。引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里。

2024-11-26 11:38:58 812

空空如也

空空如也