Yhuanbo-CSDN博客

转载 cookie、sessionStorage，localStorage区别

HTML5 Web 存储（localStorage和sessionStorage）本文链接：HTML5 Web 存储（localStorage和sessionStorage）_sleepwalker_1992的专栏-CSDN博客HTML5 Web 存储（webStorage）是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。localStoragelocalStorage生命周期是永久，除非主动

2022-02-05 13:10:59 491

转载浅谈JS重绘与回流

1、什么是重绘、回流重绘(repaint)：当元素样式的改变不影响页面布局时，比如元素的颜色，浏览器将对元素进行的更新，称之为重绘。常见的重绘操作有：1，改变元素颜色2，改变元素背景色 ……回流(reflow)：也叫做重排。当元素的尺寸或者位置发生了变化，就需要重新计算渲染树，这就是回流，比如元素的宽高、位置，浏览器会重新渲染页面，称为回流，又叫重排（layout）。回流是影响浏览器性能的关键因素。因为一个元素的回流，可能会导致了其所有子元素以及紧随其后的节点、或祖先节点元素，或部分

2022-01-23 11:45:14 621

转载 10 个你应该知道的强大的JavaScript代码片段

JavaScript 现在非常流行，尤其是在 Web 开发中。随着新的 ECMAScript 版本，JavaScript 语法有了很大的改进。因此，JavaScript语言现在具有许多强大且有趣的功能，我们可以作为开发人员在代码中使用它们。另一件好事是，如今大多数主要浏览器都对新的 JavaScript 功能提供了良好的支持。无论您是哪种类型的开发人员，至少具备 JavaScript 的基本知识都是一个很好的优势。如今，开发人员使用不同的代码片段来解决程序中的问题并创建他们需要的功能。无论他们使用哪种编

2022-01-22 13:38:52 297

转载 Vue 超清晰思维导图，带你详细梳理知识点

Vue思维导图目录MVC与MVVM的区别Vue基本代码结构Vue指令Vue组件class和style动态绑定computed计算属性EventBusfilter过滤器方法Vue是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）MVC 与MVVM的区别MVC是后端的分层开发概念；MVVM是前端视图层的概念，主要关注于视图层分离。MVVM把前端的

2022-01-17 11:18:51 1009 1

转载 js防抖和节流区别及实现方式

概念：函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。1、函数防抖(debounce)实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调

2022-01-14 09:51:38 3527

转载 vue中子父组件传值使用$emit，$on，$off

子组件可以使用 $emit,让父组件监听到自定义事件。vm.$emit( event, arg ); //触发当前实例上的事件,arg是传递给父组件的参数vm.$on( event, fn );//监听event事件后运行 fnvue也实现了观察者模式，提供了订阅消息，发布消息，注销消息等方法 $on(type, fn) 订阅消息方法 type:消息名称， fn:消息回调函数，参数是由$emit方法传递的 $emit(type, ...args) 发布消息方法 type:消息名称 .

2022-01-10 09:50:31 1216

转载 vue中的$bus使用

$bus是什么？关于$bus 我们把它叫做事件总线，它Vuex很像，但是它不是用来管理状态的，是管理事件总线的。主要是解决无关系组件之间的交互问题。组件中使用可以通过this.bus.bus.bus.emit(‘aaa’)发送事件函数可以通过this.bus.bus.bus.on(‘aaa’)接受事件函数在一个组件中发送methods:{ foo(){ this.$bus.$emit('aaa',this.aaa)//发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数

2022-01-08 15:34:03 569

转载 jsonp方法跨域的过程

说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿

2022-01-07 09:38:55 568

转载 es6 async+await使用

【1】这里主要看一下await命令的作用：函数执行的时候，一旦遇到await就会先返回，等到异步操作结束，再接着执行函数体内后面的语句。await +（promise命令/原始类型的值），而async 函数返回一个promise对象可以作为await命令的参数，·1. 创建一个async()函数：2. async函数返回一个Promise对象，我们可以调用then()方法添加一个回调函数：3. 现在给出一个例子这里的执行结果是：从结果可以看出，是按照顺序执行的，验证了await命令的

2022-01-03 10:28:00 367

转载 vue3 setup使用（详细）

官网vue3-setup总结：1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）2、setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）4、与模板一起使用：需要返回一

2021-12-31 16:17:29 1033

转载 vue-router的两种模式区别以及使用注意事项

Vue Router 是Vue官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router 默认 hash 模式，还有一种是history模式hash模式hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。 window.onhashchange = function(event){ console.log(event); }打印出来的结果如下：可以看到

2021-12-30 10:48:20 208

原创 vuex核心概念

什么是vuexvuex 是一个专门为 vue.js 设计的集中式状态管理架构。什么是状态？可以理解为在 data 中的属性需要共享给其他 vue 组件使用的部分[数据]，就叫做状态。简单的说就是 data 中需要共用的属性。(就是一种向各个组件可以传参的方式)当我们的应用遇到多个组件共享状态（数据）时，就可以用到 Vuex 了。官方解释核心概念1. State:State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 state 中进行存储。2. Mutation[同步

2021-12-22 19:22:02 586

原创 VUE中的组件

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率组件命名短横线：<my-component >驼峰式：<MyComponent> 注：如果是驼峰式，在引用时必须将其展开:my-component基本用法：全局注册 [父、根组件]<div id="app"><my-component></my-component> </div&gt

2021-11-24 19:58:38 534

原创 vue的常用指令

1. v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。<div id="app"> <input type="text" v-model="msg"/> <p v-once>你输入：{{msg}}</p></div><script type="text/javascript"> let app = new Vue({ el:"#app",

2021-11-12 19:22:09 839

原创 vue的生命周期

什么是生命周期Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。vue的八个生命周期1. beforeCreate 创建之前实例、组件通过 new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate 钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的 dom，一般不做操作2.

2021-11-08 19:14:43 981

原创 vue常用的四个选项

一、filter 过滤器过滤就是一个数据经过了这个过滤之后出来另一样东西，可以从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。语法 1: {{ message | filterA | filterB }}message 是作为参数传给 filterA 函数，而 filterA 函数的返回值作为参数传给 filterB 函数，最终结果显示是由 filterB 返回的。<div id="app"> {{num | filterA | filterB}}&lt

2021-11-05 19:26:20 266

原创 vue之入门基础

vue简介目前很火的一个 JavaScript MVVM 库，它是以数据驱动和组件化的思想构建的。无需手动操作 DOM。它通过一些特殊的 HTML 语法，将 DOM 和数据绑定起来。一旦你创建了绑定，DOM 将和数据保持同步，每当变更了数据，DOM 也会相应地更新。MVVM简介MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开.从 View 侧看，ViewModel 中的 DO

2021-11-03 20:04:51 629 1

原创 ES6--set和map

setSet 对象允许存储任何类型的唯一值，无论是原始值或者是对象引用。Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：+0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；undefined 与 undefined 是恒等的，所以不重复；NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。利用set()方法值的唯一性可以进行数组的去重let arr = [1,2,3,3,3,4,5,2,2,];let arrSign = n

2021-11-01 19:03:19 156

原创 ES6中的类

一、关于类/class:类是一种对象的模板，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。class Person{ //构造类 constructor(name,age){ console.log(`构造函数执行了, ${name}, ${age}`); // 构造方法(函数), 调用new，自动执行 } } console.log(typeof Person);

2021-10-29 19:54:12 135

原创 ES6--promise

promise简介Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果从语法上说，Promise 是一个对象，从它可以获取异步操作的消息有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）基本语法let promise = new Promise(function(resolve,reject){

2021-10-28 18:57:06 153

原创 ES6中的模块化

ES6 的模块化分为导出（export）与导入（import）两个模块。一、export在 ES6 中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用 export 来对其进行暴露（输出）。对一个变量进行模块化创建一个 test.js 文件，来对这一个变量进行输出export let myName="laowang";然后可以创建一个 index.js 文件，以 import 的形式将这个变量进行引入impo

2021-10-27 16:07:23 172

原创 ES6--数组新增功能及方法

Array.fromArray.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。所谓类数组对象，最基本的要求就是具有 length 属性的对象将类数组对象转换为真正数组：let arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','Mary'], 'length': 4}let arr = Array.from(arrayLike)console.log(arr) // ['tom','6

2021-10-26 16:00:34 242

原创 ES6--对象的简洁语法及新增对象

一、对象属性的简洁表示法对象属性:当对象的属性与属性值重名的时候，属性值可以忽略let name = "strive";let age = 18;let json = { name, age,}console.log(json)除了属性简写，方法也可以简写。ES5 中对象方法的写法let name = "strive";let age = 18;let json = { name, age, showA:function(){ return this.name;

2021-10-25 19:00:33 301

原创 ES6--数组循环

ES6中新增的数组循环方法forEach | map | filter | some() | every() | reduce() | reduceRight() | for…of…forEacharr.forEach(function(val,index,arr){ console.log(this,val,index,arr)},123); //改变this指向，是什么数据类型，this就是什么需要三个参数第一个参数：循环出来的值 val第二个参数：循环出来的值的索引 index

2021-10-19 16:19:54 2344 2

原创 ES6--模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。普通字符串console.log(`好好学习 \n 天天向上`)多行字符串在编辑器中的换行，浏览器也会解析console.log(`好好学习天天向上`)字符串中嵌入变量let name = "Bob", time = "today";`Hello ${name}, how are you ${time}?`

2021-10-13 18:53:38 561

转载 ES6-rest参数

文章目录rest参数一.rest参数二.扩展运算符三.扩展运算符的应用四.严格模式五.name属性参考文档rest参数一.rest参数rest参数(形式为"…变量名"),用于获取函数的多余参数,这样就不需要使用arguments(参数)对象了.rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中.function add(...a){ let sum = 0; for(var val of a){ sum += val; } retur

2021-09-01 10:49:05 2150

原创 ES6中的箭头函数

在ES6中允许使用箭头 (=>) 定义函数声明一个箭头函数 let fn = (a,b)=>{ return a+b; } //调用函数 let result = fn(1,2);console.log(result) //输出3函数中的this指向的是window function getName(){ console.log(this.name) //this == window } let getName2 = () =>{

2021-08-30 15:34:06 167

原创 ES6中的解构赋值

解构赋值ES6中允许按照一定模式从数组和对象中提取值，对变量进行赋值，这就被称为解构赋值数组的解构赋值先声明一个数组const F4 = ["小沈阳","刘能","赵四","宋小宝"];let [xiao,liu,zhao,song] = F4;console.log(xiao,liu,zhao,song) //输出结果: 小沈阳刘能赵四宋小宝let [变量名] = 数组变量名可以随意取，每一个变量就代表数组中相对应的元素对象的解构赋值先声明一个对象const zhao =

2021-08-30 14:45:54 114

转载 JavaScript中var、let和const的区别

一、前言在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过 function 关键字，而在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class ，本文主要讨论 var 、 let 和 const 之间的区别。二、var如果使用关键字 var 声明一个变量，那么这个变量就属于当前的函数作用域，如果声明是发生在任何函数外的顶层声明，那么这个变量就属于全局作用域。举例说明：var a = 1; //此处声

2021-08-30 14:04:14 79

空空如也

空空如也