␆␡␂␇-CSDN博客

原创事件委托

事件委托：事件委托也叫事件代理，事件委托就是利用事件冒泡，只制定一个事件处理程序，就可以管理某一类型的所有事件<body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li&

2021-05-21 00:21:19 177

概念：把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数而且返回结果的新函数的技术。容易理解的概念：Currying概念其实很简单，只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数（主要是利用闭包实现的）。特点：①接收单一参数，将更多的参数通过回调函数来搞定；②返回一个新函数，用于处理所有的想要传入的参数；③需要利用call/apply与arguments对象收集参数；④返回的这个函数正是用来处理收集起来的参数。作用：能进行部

2021-05-21 00:20:32 137

原创 window.onload和DOMContentLoaded的区别

何时触发这两个事件？1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。区别：1、onload事件是DOM事件，onDOMContentLoaded是HTML5事件。2、onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会。3、当加载的脚本内容并不包含立即执行DOM操作时，使用onDOMContentLoa

2021-05-20 21:23:37 1908

原创对象和面向对象

对象：属性和方法的集合叫做对象（万物皆对象）。面向对象：面向对象是把整个需求按照特点、功能划分，将这些存在共性的部分封装成类（类实例化后才是对象），创建了对象不是为了完成某一个步骤，而是描述某个事物在解决问题的步骤中的行为面向对象三大主要特征：封装封装就是隐藏对象的属性和实现细节，仅对外公开接口，控制在程序中属性的读和修改的访问级别，将抽象得到的数据和行为（或功能）相结合，形成一个有机的整体，也就是将数据与操作数据的源代码进行有机的结合，形成“类”，其中数据和函数都是类的成员。封

2021-05-20 21:13:51 600

原创 iframe的优缺点有哪些？

优点：1. iframe能够原封不动的把嵌入的网页展现出来；2. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。缺点：1. 会产生很多页面不易管理；2. iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能

2021-05-20 20:46:28 231

原创 js数组扁平化

概念：可以理解为将嵌套数组的维数减少，即让多维数组降维，转换为只有一层的数组1. 循环数组+递归实现思路：循环数组，如果数据中还有数组的话，递归调用flatten扁平函数（利用for循环扁平），用concat连接，最终返回resultfunction flatten(arr) { var result = []; for (var i = 0; i < arr.length; i++) { if (Array.isArray(arr

2021-05-20 20:41:20 96

原创数组去重

1.indexOf方法去重数组的indexOf()方法可返回某个指定的元素在数组中首次出现的位置。该方法首先定义一个空数组newArr，然后调用indexOf方法对原来的数组进行遍历判断，如果元素不在newArr中，则将其push到newArr中，最后将newArr返回即可获得去重的数组function fn(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { i

2021-05-20 20:24:59 111

原创微信小程序-基础

1 微信小程序介绍微信⼩程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤ 1. 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾； 2. 推⼴app 或公众号的成本太⾼。 3. 开发适配成本低。 4. 容易⼩规模试错，然后快速迭代。 5. 跨平台。微信⼩程序历史2016年1⽉11⽇，微信之⽗张⼩⻰时隔多年的公开亮相，解读了微信的四⼤价值观。张⼩⻰.

2021-05-06 21:59:54 195

原创 Vue源码分析

实现Observe双向数据绑定数据变动　　--->　　视图更新视图更新　　--->　　数据变动要想实现当数据变动时视图更新，首先要做的就是如何知道数据变动了，可以通过Object.defineProperty()函数监听data对象里的数据，当数据变动了就会触发set()方法。所以我们需要实现一个数据监听器Observe，来对数据对象中的所有属性进行监听，当某一属性数据发生变化时，拿到最新的数据通知绑定了该属性的订阅器，订阅器再执行相应的数据更新回调函数，从而实现视图的刷新。.

2021-05-04 23:11:12 233 1

转载 axios的封装

1.安装axiosnpm install axios; // 安装axios复制代码2.目录创建一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法。// 在http.js中引入axiosimport axios from 'axios'.

2021-05-04 22:22:42 102

原创 vuex的核心概念和运行机制

Vuex有几个核心的概念 state:提供一个响应式数据； getter:借助Vue的计算属性computed来实现缓存； mutation；更改state方法； action:触发mutation 方法； module:Vue.set 动态添加state 到响应式数据中； vuex 中核心原理：通过vue 实例，将state数据赋值给data(){return { ?state:state}} commit 实际上就是执行mutations 中的某个方法

2021-05-04 22:07:57 173

转载 vue-router钩子函数和执行顺序

全局前置守卫你可以使用router.beforeEach注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。每个守卫方法接收三个参数： to: Route: 即将要进入的目标路由对象 fr...

2021-05-04 21:59:23 527

原创 $nextTick

$nextTick(操作DOM的时候会用到)Vue在观察数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作然后，在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。所以，如果你用一个for循环来动态改变数据100次，其实它只会应用最后一次改变，如果没有这种机制，DOM就要重绘100次，这固然是个很大的开销。<div> <button @click="sh

2021-05-04 21:47:26 110

原创 vue修改数据页面不更新的原因和解决方案

对象属性的添加或删除由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。解决办法：使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上Vue.set(vm.someObject, 'b', 2)或者this.$set(this.someObject,'b',2)（这也是全局 Vue.set 方法的别名）异步更新队列Vue 异步执行 D...

2021-05-04 21:38:42 1222

原创 v-for中的key值的作用

v-for中的key值的作用总结当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。示例<!--注意：v-for循环的时候，key属性只能使

2021-05-04 21:25:44 242

原创 v-if和v-for的优先级

首先：永远不要把v-if和v-for同时用在同一个元素上。其次：当 Vue 处理指令时，v-for比v-if具有更高的优先级1.过滤一个列表中的项目 (比如v-for="user in users" v-if="user.isActive")。在这种情形下，请将users替换为一个计算属性 (比如activeUsers)，让其返回过滤后的列表。将：<ul> <li v-for="user in users" v-if="user.is...

2021-05-04 21:16:50 144

原创为何组件的data必须是一个函数

vue实例中的data属性既可以是一个对象，也可以是一个函数。为什么组件中data必须是一个函数而不是对象呢？组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，如下面这个例子：首先创建一个名字为counter的组件，data函数中返回一个外部定义的对象的值

2021-04-29 21:56:33 201

原创 vue双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现一个 Watcher，作为连接 Observer 和

2021-04-29 20:04:11 160

原创 vue生命周期

1.创建beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用created() 最早开始使用 data和methods中数据的钩子函数2.挂载beforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数3.更新beforeUpdate() 当data的数据发生改变会执行这个钩子内存更新，但是DOM节点还未更新updated() 数据更新完成以

2021-04-28 21:43:37 158

原创 v-if和v-show的区别及使用场景

1、当条件为真的时候没有区别当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换...

2021-04-28 21:40:28 309

原创 vue.js是什么？

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。...

2021-04-28 21:23:02 88

原创组件传值

vuex处理组件之间的数据交互如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。路由传参路由对象如下图所示：在跳转页面的时候，在js代码中的操作如下，在标签中使用<router-link>标签this .$router.push({ name: .

2021-04-24 18:33:58 501

原创兄弟组件通信

在src中新建一个Bus.js的文件，然后导出一个空的vue实例定义一个点击按钮，点击发送组件B里的数据在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递<template> <div class="A"> <button @click="add">A按钮</button> </div></template>&lt.

2021-04-24 17:02:30 135

原创 vue子传父

子传父子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听1.在子组件中创建一个按钮，给按钮绑定一个点击事件2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数<template> <div class="son"> <button @click="sendTOParent"

2021-04-23 19:58:49 189

原创 vue父传子

父传子子组件在props中创建一个属性，用以接收父组件传过来的值父组件中注册子组件在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋给该属性父组件<template> <div class="father"> <son :a="value"></son> </div></template><script>import son from "./son"; //引

2021-04-23 18:47:53 101

原创 async/await是什么?

async函数，就是Generator函数的语法糖，它建立在Promises上,并且与所有现有的基于Promise的API兼容1.Async-声明一个异步函数(asyncfunctionsomeName(){...})2.自动将常规函数转换成Promise，返回值也是一个Promise对象3.只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数4.异步函数内部可以使用await1.Await-暂停异步的功能执行(varresult=awai...

2021-04-18 19:30:06 88

原创 null和undefined的区别是什么？

null 表示为空，代表此处不应该有值的存在，一个对象可以使null,代表是个空对象，而null本身也是对象。undefined 表示“不存在”，JavaScript是一门动态类型语言，成员除了表示存在的空值外，还有可能根本就不存在（因为存不存在只在运行期才知道），这就是undefined的意义所在。...

2021-04-18 19:08:47 230

原创聊一聊HTTP的状态码有哪些?

1XX信息，服务器收到请求，需要请求者继续执行操作100 Continue 继续。客户端应继续其请求 101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议2XX成功，操作被成功接收并处理200OK.表示从客户端发来的请求在服务器端被正确处理 201Created请求已经被实现，而且有一个新的资源已经依据请求的需要而建立 202Accepted请求已接受，但是...

2021-04-12 20:55:24 108

原创 js常用鼠标键盘事件

一般事件事件描述 onClick 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick 鼠标双击事件 onMouseDown 鼠标上的按钮被按下了 onMouseUp 鼠标按下后，松开时激发的事件 onMouseOver 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove 鼠标移动时触发的事件 onMouseOut 当鼠标离开某对象范围时触发的事件 onKeyPress 当键盘上的

2021-04-11 20:05:14 134

原创 mouseenter、mouseleave与mouseover、mouseout的区别

mouseenter、mouseleave与mouseover、mouseout都是处理鼠标的移入移出事件二者的本质区别在于,mouseenter、mouseleave不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover、mouseout就会被它的子元素影响到,在触发子元素的时候,mouseover、mouseout会冒泡触发它的父元素 (想要阻止mouseover、mouseout的冒泡事件就用mouseenter、mouseleave)共同点：当二者都没有子元素时,二者

2021-04-09 15:55:13 432

空空如也

空空如也