洋养杨阳-优快云博客

原创虚拟dom

概念通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM 创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大

2022-02-22 07:55:24 266 1

原创 slot插槽

插槽插槽分为匿名插槽，具名插槽，作用域插槽匿名插槽子组件内部，设置，就可以使用匿名插槽，数据将方式在插槽对应的位置，如果有多个匿名插槽，将会每个插槽都有一份数据渲染匿名插槽其实也是有名字的，为 default ，通常都是不写的// 组件（父）<Card><p>hello,world</p></Card>// 组件内部（子）<div class="cardItem"><h1>子页面

2022-02-18 07:38:05 914 1

原创 Vue中的$nextTick()

概念在下次 DOM 更新循环结束之后执行延迟回调什么时候会用到$nextTick有时候我们想要在created中获取到dom元素，就可以使用$nextTick（）created(){let that=this;that.$nextTick(function(){ //不使用this.$nextTick()方法会报错that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素});} 如果想要在修改数据后立刻得到更新后

2022-02-18 07:35:25 577 1

原创上传，头像的使用

手写input的方法1.书写上传的input的按钮<input type='file' accept="image/*" @change='change'>上传本地文件1type类型，表示的是一个上传文件的inputaccep上传的类型，代表的是图片@change在选中文件之后触发2.对应的change事件 change(e) { // 手写的input需要一个对象将本地图片转换为对应的格式来上传 let formData =

2022-02-17 20:33:02 192 2

原创 ECharts介绍

前面做项目时用到ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。官网地址：http://echarts.baidu.com/1.首先在官网选择合适的下载版本 http://echarts.baidu.com/download.html2.引入Echarts <script src=

2022-02-17 20:30:34 802 1

原创 v-for中为何要使用key

一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul> <li v-for="item in items" :key="item.id">...</li></ul>用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />那么这背后的逻辑是什么，key的作用又是什么？key是给每一个vnode的唯一id，

2022-02-16 21:15:16 925 1

原创 MVVM和MVC的区别

mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({…})

2022-02-13 23:09:58 420 3

原创 vue自定义指令的应用场景

使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&

2022-02-13 23:05:50 204 1

原创 vue的修饰符都有哪些(面试题)

.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right修饰键：.ctrl.alt.shift.meta<input @keyup.alt.67="clear"><div @click.ctrl="doSomething">Do something</div>与按键别名不同

2022-02-11 21:13:14 133 1

原创 vue组件通信----子传父(超级详细)

Vue传值简单描述父组件通过绑定自定义事件，接受子组件传递过来的参数子组件通过$emit触发父组件上的自定义事件，发送参数子传父具体实现步骤父组件通过$on监听事件，事件处理函数的参数则为接收的数据子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据sync修饰符：对一个 prop 进行双向绑定自定义事件子组件需要以某种方式，例如点击事件的方法来触发一个自定义事件将所需要传递的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

2022-02-09 21:26:31 49587 4

原创 vue组件通信----父传子(超详细)

Vue传值1.父传子简单描述父组件是通过props属性给子组件通信的数据是单向流动父—>子（子组件中修改props数据，是无效的，会有一个红色警告）实现步骤1.子组件在props中创建一个属性，用于接收父组件传过来的值；2.父组件引入子组件–>注册子组件–>引用子组件；3.在子组件标签中添加子组件props中创建的属性；4.将所要传递的值赋值给该属性。props接收的几种写法1.直接使用 props 以一维数组的方式接收props: ['childCo

2022-02-09 21:23:07 7200 3

原创什么是vuex

1.什么是vuexvuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护2.vuex由五部分组成有五个属性分别是： state、getters、mutations、actions、modulestate属性：存放状态，例如你要存放的数据getters：类似于共享属性，可以通过this.$store.getters来获取存放在state里面的数据mutations：唯一能改变state的状

2022-02-09 21:18:58 669 1

原创 vue的watch深度监听

Vue提供了一个watch方法去监听某些data内的数据变动，从而触发相应的操作，当需要在数据变化时执行异步或开销较大的操作时，watch方法是最有用的watch深度监听的正确打开方式1.借助deep: true深度监听watch: {obj: {// 数据变化时执行的逻辑代码handler(newName, oldName) {console.log(‘obj.a changed’);},// 开启深度监听deep: true}}watch监听对象，同时用deep: true

2022-02-08 21:14:56 1206 1

原创 vue中的diff算法

什么是diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom而Vue3只比较发生变化的节点当节点一旦发生改变会给一个变量效率大大提高diff算法的两个特点比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较Diff算法的步骤：用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一

2022-02-07 20:31:21 166 1

原创 v-if 和v-show 的区别

一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的三、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗例如：v-if:在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速太慢，导致数据刚开始没有值，此时我们页面也会进行渲染空数据就会报错。我们可以

2022-02-07 19:51:16 1170 1

原创浏览器回流、重绘

1. 什么是回流？页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。2. 什么是重绘？页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。3. 有什么区别？回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流4.如何避免重绘或者重排？1. 集中改变样式比如改变样式的时候，不去改变他们每个的样式，而是直接改变clas

2022-02-07 19:04:55 133 1

原创 Vue的双向数据绑定原理

答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，

2022-02-07 18:49:54 171 1

原创 vue自定义过滤器

过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。vue中的过滤器分为两种：全局过滤器和局部过滤器全局过滤器Vue.filter('formatePrice', (val) => { return val.toFixed(2)})// 使用{{13.44 | formatePrice}} 局部过滤器<script> export default { data() { return {.

2022-02-06 20:45:30 119 1

原创 es6中的class与继承

前言：传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，独树一帜也可以说难以接受！ES5中的类ES5中如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。示例：//构造函数名大写（非强制，但这么写有助于区分构造函数和普通函数）function Person(name,age) { this.name = name; this.age=age

2022-02-05 22:40:16 336 2

原创 vue生命周期

vue的生命周期vue实例从创建到销毁的过程，就是生命周期。vue每个组件都是独立的，每个组件都有一个属于它的生命周期。生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段：挂载阶段、更新阶段、销毁阶段。beforeCreate:创建前实例初始化之后，此时组件的选项对象还未创建，el,data并未初始化，因此无法访问methods,data,computed等上的数据和方法。data() { return { num:1 }}beforeCreate(){ con

2022-02-04 21:04:50 179 1

原创 VUE指令

文章目录vue常见的指令v-text(相当于原生js中的innerText)v-html(相当于原生js中的innerHTML)v-once(只渲染一次)v-cloak(解决页面加载时闪烁问题)v-showv-ifv-for 循环v-prev-bindv-on事件修饰符v-modelv-model修饰符vue常见的指令在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令，指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的

2022-02-04 20:58:57 136 1

原创 vue中的slot(插槽)

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置。父组件往子组件中插入一些内容。用表示。插槽的分类：默认插槽，具名插槽，作用域插槽1. 默认插槽默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据子组件：<div> <slot></slot></div>父组件：<heads>你好</heads>2. 具名插槽具

2022-02-04 20:48:36 305 1

原创 JavaScript中let、const、var 的区别

文章目录1.是否存在变量提升？2.是否存在暂时性死区？3.是否允许重复声明变量？4.是否存在块级作用域？什么是块级作用域：5. 是否能修改声明的变量？在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点（内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量，下面有介绍），ES6提出了使用let和const声明变量,弥补了ES5中var的缺点。1.是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之

2022-02-03 11:49:35 93 1

原创 cookie、localStorage、sessionStorage区别

CookieCookie设计初衷是用来和服务器通讯，而不是本地存储，他只是被‘借用’到本地存储。如下图，每次http请求，header都携带cookie;localStorage、sessionStorage在HTML5中，新加入了一个localStorage/sessionStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小。localSto

2022-02-03 11:42:44 119 1

原创 Vue生命周期

总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数创建后：Created()是最早使用data和methods中数据的钩子函数挂载前：beforeMount()指令已经解析完毕，内存中已经生成dom树挂载后：Mounted()dom渲的数据已经同步更新前：beforeUptate()当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的更新后：Updated() 内存和页面都是新的销毁前：

2022-02-02 22:36:28 738 1

原创重写push方法

解决相同路由跳转时，报错const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { if(typeof(location)=="string"){ var Separator = "&"; if(location.indexOf('?')==-1) { Separator='?'; } location = location + Separator

2022-02-02 22:35:14 655 1

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

实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数组件中定义data属性，只能是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }})vue组件可能会有很多个实例，采用函数返

2022-02-02 22:34:14 764 1

原创 jsonp原理

前言下面是原生jsonp的使用案例。后端使用node搭建的简易服务器。前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat

2022-01-29 22:52:36 95 1

原创 js中的继承

实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已原型链继承父类的实例作为子类的原型function Woman(){ }Woman.prototype= new People();Woman.prototype.name = 'haixia';let womanObj = new Woman();优点简单易于实现，父类的新增的实例与属性子类都能访问缺点可以在子类中增加实例属性，如果要新增加原型属性和方法需要在

2022-01-28 22:45:37 84 1

原创 diff 算法

diff算法就是进行虚拟节点对比，并返回一个patch对象用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom而Vue3只比较发生变化的节点当节点一旦发生改变会给一个变量效率大大提高...

2022-01-28 22:38:22 182 1

原创 for in 和 for of

首先一句话：(for···in取key，for··of取value)for in和for of都是用来遍历属性的，我们先看一个例子：let arr = [1,2,3,4,5]for(let key in arr) { console.log(key); // 输出下标}for(let value of arr) { console.log(value); // 输出每个元素}let obj = { name:'zbt', age:18}for(let

2022-01-26 21:44:00 162 1

原创 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(nu

2022-01-26 21:40:03 80 1

原创简单实现login页面密码框密码明密文(显示和隐蔽)

最近在写一个新的项目,从头开始写,所以就要从注册登录开始做起.以前写登录注册模块的时候,无外乎给input框一个type=”password”就可以了,近期因为要涉及到显示隐藏状态的切换样式代码如下:html <el-form-item label="密码" prop="password"> <el-input v-model="from.password" prefix-icon="iconfont icon-

2022-01-23 21:26:31 1524 1

原创 js数组方法大全

一：前言　　我们在学到js中数组的时候，我们会接触到js中数组的一些方法，这些方法对我们来说，可以很遍历的达到我们想要的结果，但是因为方法比较多，有些方法也不常用，可能会过一段时间就会忘记，那么在这里我整理了21个数组的方法，供大家查阅。二：方法详解1：concat();功能：合并数组，可以合并一个或多个数组，会返回合并数组之后的数据，不会改变原来的数组；var str1 = [12,2,"hello"];var str2 = ["world"];console.log(str1.con

2022-01-20 21:41:48 979 2

原创 js异步之宏任务（marcroTask）和微任务（microTask）

什么是宏任务和微任务宏任务包括：setTimeout setInterval Ajax DOM事件微任务：Promise async/await微任务比宏任务的执行时间要早使用异步的场景定时任务：setTimeout，setInverval网络请求：ajax请求，动态加载事件绑定加载示例：事件绑定示例：同步阻塞示例：console.log(1000)alert(200)console.log(3000)上面就是同步阻塞示例，你不点击alert确认窗口，不会打印30

2022-01-19 20:23:42 627 1

原创浅拷贝与深拷贝以及手写深拷贝

深拷贝和浅拷贝的区别.浅拷贝：就是拷贝一层深拷贝：层层拷贝为什么要使用深拷贝？我们希望在改变新的数组（对象）的时候，不改变原数组（对象）怎么检验深拷贝成功改变任意一个新对象/数组中的属性/元素, 都不改变原对象/数组数组的浅拷贝（只拷贝第一级数组元素）1 .直接遍历var array = [1, 2, 3, 4];function copy (array) { let newArray = [] for(let item of array) { newArra

2022-01-19 20:06:51 162 1

原创 js的数据类型和堆栈存储

js的数据类型分为两大类基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增的值）引用数据类型(复杂数据类型): Object。包含Object、Array、 function、Date、RegExp。存储原理栈内存(基本数据类型（值类型）)栈＋堆内存(引用数据类型(复杂数据类型)????栈堆存储值类型栈存储：主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间

2022-01-19 19:36:42 968 1

原创 this指向和垃圾回收机制与内存泄漏

this指向什么值，是在执行的时候确定的，与定义的位置无关，箭头函数除外常用的调用场景普通函数指向当前调用它的对象，如果没有就是window构造函数与class类指向当前的实例化对象对象方法的调用调用该方法的对象箭头函数函数声明时的对象，与其他不同，其他都是调用时，箭头函数是声明时定时器指向window 但是如果内部函数为箭头函数，则指向函数声明时所在的对象修改this指向call 多个参数，第一个参数就是要修改的this指向，其他参数是以散落的形式给调用该方法的函数

2022-01-15 19:36:00 557 1

原创作用域和自由变量

作用域（定义）变量作用域：就是一个变量可以使用的范围。作用域（种类）js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建的作用域称为函数作用域’es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）如下图所示：es6作用域,只适用于const,let自由变量自由变量的概念：当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局作用域，就形成了作用域链。变量提升（预

2022-01-14 21:10:56 83 1

原创 js中的原型和原型链

文章目录1.prototype2._ _proto_ _3.constructor4. 原型链5.原型指向图1.prototype // 每一个实例都有一个prototype属性被称之为显示原型 function Fn(name, sex) { this.name= name, this.sex = sex } let obj = new Fn("qz", "man") console.log(obj);console.log(obj); 控制台打印结果2.

2022-01-14 16:40:58 314 1

空空如也

空空如也