- 博客(51)
- 收藏
- 关注
RSS订阅
原创 前端总结大全
HTML&CSS盒模型 、rem适配Position定位flex布局 、三栏布局(双飞翼布局、圣杯布局)行内元素、块级元素、空元素src和ref 、link和import 、css3和html5浏览器兼容问题JSjs三座大山原型与原型链作用域与自由变量、 闭包、this指向垃圾回收和内存泄漏js基础...
2022-01-21 13:51:02
377
原创 箭头函数与普通函数区别
箭头函数是匿名函数，不能作为构造函数，不能使用new// 箭头函数let fun = () => { console.log('我是箭头函数');})// 普通函数function fun(){ console.log('我是普通函数');}
2022-02-27 19:16:18
243
原创 async、await
前言async是同步的写法，但是异步的操作，也是异步编程的解决方案特点asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数异步async函数调用，跟普通函数的使用方式一样异步async函数返回一个promise对象async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的async/await的优点方便级联调用，即调用依次发生的场景；同步代码编写方式，更符合代码编写习惯；多个参数传递， Promise的then函数只能
2022-02-25 18:43:01
115
原创 Promise
概念promise是es6提出的一种异步编程的解决方案promise的实现（原理）：promise本质上是一个构造函数 ，它接收一个函数作为参数 该函数接收两个参数 分别是resolve和reject 他们也是函数特点Promise对象的状态不受外界影响1）pending 初始状态2）fulfilled 成功状态3）rejected 失败状态Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其 他任何操作都无法改变这个状态Promise的
2022-02-25 18:39:18
290
原创 关于vue给对象新增属性页面不会动态更新的问题
问题当我们给data里面声明的对象添加一个新属性，这个新属性是不会动态更新视图的。举个例子<template> <div> {{obj}}<br> <button @click="addProperty">动态添加新属性</button> </div></template><script>export default { data(){ return {
2022-02-21 10:42:37
1340
原创 Vue中的$nextTick()
Vue中的$nextTick()的作用在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM原理vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可以实现整合操作。应用场景1. 在created里面获取dom节点2. 改变数据之后立刻获得dom节点，进行逻辑操作例如点击按钮出现input框，并获取焦点showInp
2022-02-21 10:33:29
62
原创 vue之prop
Prop单项数据流:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。<!-- 测试单向数据流 -->父组件 <h1>{{msg}}</h1><test-single-data-flow :msg="msg"></test-single-da
2022-02-17 14:02:11
98
原创 V-for中为何要使用key
一、Key是什么？key的作用又是什么？key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点场景背后的逻辑场景1: 当我们在使用v-for时，需要给单元加上key如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如
2022-02-17 11:09:55
127
原创 vue中的slot插槽
插槽slot插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置。父组件往子组件中插入一些内容。用表示。插槽的分类：默认插槽，具名插槽，作用域插槽1. 默认插槽默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据子组件：<div> <slot></slot></div>父组件：<heads>你好</heads>
2022-02-16 15:06:51
213
原创 vue使用keep-alive缓存页面优化项目
概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性参数include 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max 数字。可以缓存多个组件实例对
2022-02-16 11:17:03
186
原创 Vue-Router
前端路由概念通过改变 URL，在不重新请求页面的情况下，更新页面视图。更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：Hash 和 history一、如何设置路由模式const router=new VueRouter({ mode:'history / hash', routes:[...]})# mode:'hash' 默认地址栏会多一个#符号：http://localhost:8080/#/login# mode:
2022-02-14 20:30:21
73
原创 vue自定义过滤器
前言过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。vue中的过滤器分为两种：全局过滤器和局部过滤器全局过滤器Vue.filter('formatePrice', (val) => { return val.toFixed(2)})// 使用{{13.44 | formatePrice}} 局部过滤器<script> export default { data() { retur
2022-02-14 19:05:01
75
原创 vue自定义组件
使用组件的好处组件是可以复用性的易于维护有封装性，易于使用大型项目中降低组件之间重复性在项目中是如何封装组件的我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功
2022-02-14 14:11:09
1400
原创 vue中的修饰符
事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后 才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!
2022-02-11 19:38:09
69
原创 mvvm和mvc
前言MVC,MVP,MVVM是三种常见的前端架构模式(Architectural Pattern),它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法，一种架构模式往往能使用多种设计模式。MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model，view相同，不同的是MV之间的纽带部分。本文主要介绍MVC与MVVM的应用与区别，因为MVP好像不是很常用。一、mvvm概念:MV
2022-02-11 19:13:28
91
原创 vue中Computed、Methods、Watch区别
computed计算属性 计算结果会缓存,只有当依赖值改变才会重新计算对于任何复杂逻辑，你都应当使用计算属性// 而是依赖于属性的,就是一个属性的封装,属性的值不变化,那么不会多次调用computed,所以性能更好计算属性默认只有getter，可以在需要的时候自己设定setter：computed: { fullName: { // getter get: function () { return t
2022-02-10 20:29:44
98
原创 vue监听和深度监听watch
前言watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-model='person.name'> <button @click='person.age++'>+</button> <p>你的名字是：{{person.name}}</p> <p>你的年龄是：{{p
2022-02-10 15:41:53
323
原创 vue组件通信
前言Vue组件通信有父传子、子传父、兄弟通信三种通信方式一、父传子在父组件的子组件标签上绑定自定义属性，挂载要传输的变量。在子组件中通过props来接受数据1 . 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量
2022-02-09 16:18:57
155
原创 Y18给你讲解vue虚拟dom,diff算法
一、vue中的虚拟dom什么是虚拟dom？虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。简单来说：本质上是js对象,这个对象就是更加轻量级的对DOM的描述为什么要创建虚拟dom?创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。二、vue中的diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象，用
2022-02-08 16:01:05
367
原创 vue双向数据绑定原理
vue双向数据绑定原理采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数
2022-02-07 20:30:08
440
原创 Vue自定义指令
前言vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局自定义指令和局部自定义指令。全局自定义指令全局注册主要是用过Vue.directive方法进行注册Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时……
2022-02-07 16:51:37
60
原创 v-if与v-show的区别
1. 相同点都可以动态控制着dom元素的显示隐藏2.区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的3.性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗4. 使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；...
2022-02-07 16:15:40
269
原创 Vue常见指令
vue常见的指令在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令，指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定v-text(相当于原生js中的innerText)解析文本两者等价<span v-text="msg"></span><span>{{msg}}</span>v-html(相当于原生js中的innerHTML)与v-text相比，v-
2022-02-07 09:21:38
316
原创 Vue的生命周期
Vue的生命周期vue实例从创建到销毁的过程，就是生命周期。vue每个组件都是独立的，每个组件都有一个属于它的生命周期。生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段：挂载阶段、更新阶段、销毁阶段。beforeCreate:创建前实例初始化之后，此时组件的选项对象还未创建，el,data并未初始化，因此无法访问methods,data,computed等上的数据和方法。data() { return { num:1 }}beforeCreate(){ con
2022-02-07 08:52:55
140
原创 Vue基础
1. 什么是Vue是一套用于构建用户界面的渐进式JavaScript框架,通过对数据的操作就可以完成对页面视图的渲染。vue特点：上手简单、灵活的组件应用 、高效的数据绑定2. Vue的创建const vue = new Vue({ el:"#app", // vue实现逻辑代码的作用域，挂载节点放在div中 data:{ // 存放变量(对象格式) num:0 }})3. 为什么组件的data必须是个函数？在使用vue脚手架(vue cli)创建的vue项目中，将data属
2022-02-07 08:43:07
398
原创 null和undefined的区别
相同点:在JavaScript中，null 和 undefined 几乎相等在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等console.log(null==undefined); //true 因为两者都默认转换成了falseconsole.log(typeof undefined); //"undefined" console.log(typeof null); //"object" console.log(
2022-01-27 10:11:02
104
原创 for···in和for···of区别
区别从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)var arr = [99,88,66,77];for(let i in arr){ console.log(i); //0,1,2,3}for(let i of arr){ consoel.log(i); //99,88,66,77}从遍历字符串的角度来说，同数组一样。从遍历对象的角度来说，for···in会遍历出来的为对象的key，但f
2022-01-27 10:03:46
52
原创 宏任务与微任务
异步不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。不会阻塞程序任务同步在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。会阻塞程序的执行前端使用异步的场景：定时任务：setTimeout，setInverval网络请求：ajax请求，动态图片加载事件绑定异步实例：<img>加载示例 console.log('start'); var
2022-01-21 15:06:35
243
原创 js数据类型以及深浅拷贝
Js数据类型基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）；引用数据类型: Object。包含Object、Array、 function、Date、RegExp。深拷贝只有当拷贝引用数据类型时，拷贝才存在浅拷贝与深拷贝之分1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用2.深拷贝： 创建一个新的对象和数组，将原对象的各项属
2022-01-21 14:50:32
246
原创 Js数组方法
1.push()给数组的末尾添加一个或多个元素,格式：数组.push(参数1，参数2…)let arr = [1,2,3]let temp = arr.push(4)console.log(arr) // 输出 1 2 3 4原数组改变console.log(temp) // 输出4，返回添加元素后数组长度2. unshift()给数组的首位添加一个或多个元素。格式：数组.unshift(参数1，参数2…)let arr = [2,3,4]let temp = arr.unshift(1
2022-01-21 14:22:50
7335
原创 Js数据类型判断
方法typeof、instanceof、constructor、Object.prototype.toString.call()1、typeof1.typeof可以检测Number,String,Boolean,Undefined,Function的数据类型，返回对应的数据类型的小写字符。2.对于利用构造函数创建的Number,String,Boolean都返回object3.检测null,Array,Date,RegExp都会返回小写的objectconsole.log(typeof 1
2022-01-21 14:03:29
47
原创 垃圾回收和内存泄漏
垃圾回收释放垃圾占用的空间，防止内存泄露。有效的使用可以使用的内存，对内存堆中已经死亡的或者长时间没有使用的对象进行清除和回收
2022-01-16 11:04:33
411
原创 闭包和this指向
闭包简单的理解就是内层函数可以访问外层函数中的变量有时候需要用到函数内的局部变量，在正常情况下是不能读取到的，这个时候就需要用到闭包闭包应用的特殊情况函数作为参数被传递函数作为返回值被返回thisthis的五个应用场景普通函数、对象方法、call apply bindclass箭头函数1. 普通函数: 普通函数this指向window**2. 对象方法:**对象方法中的this，指向当前对象3. call、apply、bind:call apply bind中
2022-01-15 21:15:35
220
原创 作用域和自由变量
作用域变量作用域：就是一个变量可以使用的范围。三种作用域 ：js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；注意: es6作用域,只适用于const,let自由变量自由变量的概念： 当前作用域没有定义的变量当前作用域没有定义的变量，但是被使用了，就会一层一层往上查找，直到找到为止；如果到全局作用域都没有找到
2022-01-14 21:10:59
65
原创 javascript原型与原型链
一、原型原型分为两种:- 显示原型和隐式原型1. prototype每个函数都有一个prototype属性，被称为显示原型2. proto每个实例对象都会有proto属性,其被称为隐式原型每一个实例对象的隐式原型proto属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。二、原型链当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的proto隐式原型
2022-01-14 19:48:08
168
原创 常见浏览器兼容性问题
前言不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎所以浏览器兼容性问题一般指：css兼容、js兼容一、css兼容...
2022-01-12 20:48:15
1330
2
原创 vue路由守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的,或者组件级的。全局守卫全局前置守卫router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach每个守卫方法接收三个参数：to: Route: 即将要进入的目标路由对象from: Route: 当前导航正要离开的路由next: Function: 钩子函数，里面定义参数，确认下一步.
2022-01-11 19:55:50
2064
原创 css3和HTML5新特性
文章目录css新特性1.选择器2.背景和边框3.文本效果4.2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)H5 新特性1. h5新增特性2. 语义化标签3. 表单类型增强4. h5 新增的表单属性5. html5 新事件css新特性1.选择器常规选择器：:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */:..
2022-01-11 16:36:09
73
原创 link与@import的区别
应用场景：<head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./A.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./B.css'); .box{ width: 100px; height: 100px;
2022-01-11 14:10:31
60
原创 src和href的区别
区别**href**: href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。**src**:src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...
2022-01-11 14:03:15
235
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人