- 博客(78)
- 收藏
- 关注
原创 ES6新增运算符
它也可以写在函数执行的时候。可选链不能用在super关键字上,模版字符串,实例化构造函数, 赋值运算符的左侧等。可能你会疑惑,为什么这么大,因为它是从右边计算的。一个对象的属性,如果这个属性是对象,它还有子属性,访问这个子属性,比如。如果和&&或者||混用的时候,需要加上()显示表明优先级,不然会报错。如果发现没有该属性的时候,则不会进行后面的点运算。主要是对本身进行逻辑操作后,然后对它赋值后面的值。效果是一样的,是不是可读性增加,也节省了代码?如果属性不存在的时候,则有可能会报错。
2023-07-19 19:14:56
1003
原创 vue注意点:$attrs、$slots!插槽
inheritAttrs的值为boolean,默认为true,由于v-band='$attrs'传递过来的值会作为dom元素上的属性存在,设置为false可以阻止这个行为,这些属性仍然可以通过$attrs来访问,(vue2中class和style不会受到影响,但是vue3中class和style会受影响)当父组件给子组件传值,子组件并没有接收数据时,此时数据在$attrs中可以拿到,并且如果子组件不需要使用数据,而孙组件需要,则可以直接v-bind="$attrs"传给孙。
2023-07-19 19:07:49
1674
原创 透传 Attributes
需要注意的是,虽然这里的 attrs 对象总是反映为最新的透传 attribute,但它并不是响应式的 (考虑到性能因素)。我们想要所有像 class 和 v-on 监听器这样的透传 attribute 都应用在内部的 <button> 上而不是外层的 <div> 上。这里,<MyButton> 并没有将 class 声明为一个它所接受的 prop,所以 class 被视作透传 attribute,自动透传到了 <MyButton> 的根元素上。中的 <MyButton> 组件例子。
2023-07-19 19:00:02
950
原创 插槽的使用!!
插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间,为用户预留的内容的占位符。tip : 也就是说,在父组件中是访问不到子组件的内容的,虽然在父组件中使用了插槽,内容是插进了子组件中,但是还是不能访问子组件中定义的变量。vue中将<slot>元素作为承载分发内容的出口,使用<slot>就可以为封装组件开启一个插槽。给插槽绑定一个name属性,也就是取个名字,使用的时候可以找到对应的插槽把内容放入。
2023-07-17 20:05:25
230
原创 动态组件、keep-alive
缓存实例达到指定数字,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。当在组件中定义了 name 属性后,在其他组件用到组件名时需要使用组件的 name 属性定义的名称。在 component 标签中的组件会被动态的创建和销毁,此时组件中的数据会在再次创建时被重置。include 属性用来指定: 只有名称匹配的组件会被缓存,多个组件名之间使用英文的逗号分隔。exclude 属性用来指定: 只有指定的组件被排除,即不会被缓存,其余组件则会被缓存。动态组件指的是动态切换组件的显示与隐藏。
2023-07-17 14:05:14
143
原创 vue2数据双向绑定ai
这就是Vue.js的数据双向绑定原理:通过响应式系统追踪数据变化,并利用指令建立数据与视图之间的关联,从而实现数据和视图的双向同步。当用户在输入框中输入内容时,触发了输入事件。Vue会捕获这个事件,并自动更新。通过实现"getter/setter",Vue能够在。在上述代码中,当用户在输入框中输入内容时,属性被读取或修改时进行依赖追踪。表达式也会实时更新显示最新的值。属性会自动更新,并且对应的。告诉Vue将输入框的值与。
2023-07-13 11:28:15
219
原创 vue2的数据数据双向绑定
但是 Vue 并没有采用上述方法劫持数组对象,原因分析:1、特殊的 length 属性,相比较对象的属性,数组下标变化地相对频繁,并且改变数组长度的方法也比较灵活,一旦数组的长度发生变化,那么在无法自动感知的情况下,开发者只能手动更新新增的数组下标,这可是一个很繁琐的工作。拿到这个对象后,Vue先用Object.keys(obj)拿到一个包含obj对象的所有属性(message,name)的数组,然后进行forEach遍历,拿到每一个属性对应的value值。(记不记得一开始的 张三,李四,王五。
2023-07-13 11:16:38
402
原创 vue2的数据双向绑定
的场景中,当用户修改视图中的数据时,这些修改会触发Vue的setter方法,setter方法会通知所有相关的组件,然后更新视图。反过来,如果数据在Vue实例中发生了变化,getter方法会被调用,这会触发更新视图的操作。具体来说,当Vue实例创建时,它会遍历所有的属性,并使用Object.defineProperty()方法将这些属性转换成getter/setter。这就是Vue.js的数据双向绑定原理:通过响应式系统追踪数据变化,并利用指令建立数据与视图之间的关联,从而实现数据和视图的双向同步。
2023-07-13 11:05:20
925
原创 ● 你是怎么解决跨域问题的
● 放在public下的静态资源和放在src下的静态资源有什么区别。public下的静态资源不会被编译,直接出现在dist⽬录⾥。如果我们图⽚放在了src下,我们是没有办法⽤数据绑定的⽅式,○ 你的项⽬上线之后是怎么解决的跨域问题。得到dist⽬录,就是打包之后的静态资源。⼤图⽚不会进⾏转码,编译⽣成1个新的地址。执⾏npm run build。可以通过导⼊的⽅式使⽤这个图⽚。● 你是怎么解决跨域问题的。通过nginx做的反向代理。src下的静态资源会被编译。● ⽹站性能优化的时候。
2023-07-05 09:44:20
54
原创 如何封装vue组件
设置⼀个⾃定义事件,this.$emit(事件名,数据)如果我们发现⼀个vue组件的⾏数超过了500⾏,我们要。哪些地⽅需要外部传递⼀些html过来,其实就是插槽。可以通过props设置哪些数据是⽗组件传递过来的。考虑⼀下是否应该封装⼀些组件,让代码结构更清晰。需要有哪些属性,哪些变量,不同的场景下可以灵活。的使⽤组件,说⽩了就是我们的输⼊是什么,参数是。你在封装组件的时候是怎么考虑问题的。考虑这个组件是做什么的,有哪些元素。这个组件有哪些⾏为,有哪些事件。
2023-07-05 09:26:41
325
原创 组件和路由
router-link tag="div" :to="{path:'/datel',query:{courseid:103}}">去详情页</router-link><son v-on:click-son='clickParent($event,"自定义参数")' v-on:click-son2='clickParent2'></son><input type="button" value="获取元素" @click="getElement" ref="mybtn">// 2. 在子组件中触发这个事件。
2023-06-01 20:40:53
665
原创 VUE-基础使用
对象的键:{{key}},对象的值:{{value}},数组的下标{{index}}</li><li v-for="(item,index) in list">{{item.name}}数组的下标{{index}}
2023-05-29 20:36:29
804
原创 Proxy的实现
(2)Iterator原理:原型上有[Symbol.iterator]方法,这个方法返回一个迭代器对象Iterator,这个对象有一个next属性,属性值又是一个函数,函数返回一个对象,对象有两个属性done表示完成状态,value是属性值。3. for...in循环更常用于对象的循环,如果用于数组的循环,那么就要注意了,上述代码中每次循环中得到的i是字符串类型,而不是预料中的数字类型,要想对它进行运算,那得先要进行类型转换,造成不方便。console.log(iterator.next("前端君"));
2023-05-25 20:00:12
767
原创 5.Module模块
关键字from的作用是指定你想要引入的模块,我们这里指定的是module-B.js文件,也就是上面的模块B。上面的代码片段包含了2个模块,模块B导出了对象person,模块A导入后,对其属性name进行修改,结果修改成功,这一点大家要注意,并不是所有导出的变量都不可修改,对象类型就可修改。上面的代码片段包含了2个模块,其中,模块B导出了字符串变量name,模块A导出变量name之后试图修改它的值,结果报错。导入Import:作为一个模块,可以根据需要,引入其他模块的提供的属性或者方法,供自己模块使用。
2023-05-25 19:58:32
990
原创 4.ES7中 的Async/await
return new Promise((res, rej) => { //构造函数传入两个参数:res--表示异步成功要执行的函数,rej--表示异步失败要执行的函数。function sleep(wait) { //定义一个sleep函数,该函数返回一个Promise对象。sleep(100).then(result => { // 调用sleep函数并在异步结束后执行回调函数。return sleep(result03 + 100) // 返回新的Promise对象。
2023-05-25 19:56:47
1109
原创 3.ES6的Promise对象
/ Promise.race()方法:它的参数要求跟Promise.all()方法一样,不同的是,它参数中的promise实例,只要有一个状态发生变化(不管是成功fulfilled还是异常rejected),它就会有返回,其他实例中再发生变化,它也不管了。// Promise.all()方法:接受一个数组作为参数,数组的元素是Promise实例对象,当参数中的实例对象的状态都为fulfilled时,Promise.all()才会有返回。//(2) ['实例1操作成功', '实例2操作成功']
2023-05-25 19:54:36
1126
原创 2.Map和WeakMap用法
/Map(5) {'name' => '老干妈', 1 => 2, null => 3, undefined => 4, {…//Map(5) {'name' => '王致和', 1 => 2, null => 3, undefined => 4, {…//Map(2) {'name' => '王致和', 'gender' => 1}//Map(2) {'name' => '老干妈', 1 => 2}// delete ( )方法作用:删除指定的键值对,删除成功返回:true,否则返回:false。
2023-05-25 19:53:46
1420
原创 1.Set 和 WeakSet用法
/ delete( )方法:用户删除Set结构中的指定值,删除成功返回:true,删除失败返回:fasle。// has( )方法:判断set结构中是否含有指定的值。// WeakSet结构同样不会存储重复的值,不同的是,它的成员必须是对象类型的值。// entries( )方法:返回一个键值对的遍历器。// values()方法:返回键值的遍历器。// forEach()方法:遍历每一个成员。// clear( )方法:清除所有成员。//keys( )方法:返回键名的遍历器。//或者用add()
2023-05-25 19:52:58
1735
原创 fro of 迭代器
/ 通过上面的案例,我们知道了:Generator函数被调用后并不会一直执行到最后,它是先回返回一个生成器对象,然后hold住不动,等到生成器对象的next()方法被调用后,函数才会继续执行,直到遇到关键字yield后,又会停止执行,并返回一个Object对象,然后继续等待,直到next()再一次被调用的时候,才会继续接着往下执行,直到done的值为true。// 创建一个名为 `person3` 的普通对象,并拥有一个名为 `name` 的属性(值为 `"zhangsan"`)。
2023-05-25 19:51:08
886
原创 函数与Symbol
注意这句话的一个关键词:“被登记在全局环境中”,也就是说这个symbol值是被Symbol.for( )创建的,不是被Symbol( )创建的。函数作用:根据参数名,去全局环境中搜索是否有以该symbol.for()参数为名的symbol值,有就返回它,没有就以该参数名来创建一个新的symbol值。Object.assign(对象1,对象2,对象3....)//将后边的多个对象赋值到第一个目标对象中,若属性重复,后边覆盖前面的。否则,哪怕你传的参数值为0,false,null都不会触发默认值赋值。
2023-05-24 20:00:40
1441
原创 迭代器与生成器案例
/ 通过上面的案例,我们知道了:Generator函数被调用后并不会一直执行到最后,它是先回返回一个生成器对象,然后hold住不动,等到生成器对象的next()方法被调用后,函数才会继续执行,直到遇到关键字yield后,又会停止执行,并返回一个Object对象,然后继续等待,直到next()再一次被调用的时候,才会继续接着往下执行,直到done的值为true。// 创建一个名为 `person3` 的普通对象,并拥有一个名为 `name` 的属性(值为 `"zhangsan"`)。
2023-05-24 19:58:23
585
原创 函数与Symbol
/ person对象的两个属性都是symbol类型的,我们也知道用Object.keys()和for...in都无法获取到它,我们就用getOwnPropertySymbols()方法来,结果成功了,得到一个数组,数组的内容就是两个symbol类型变量对应的值Symbol(name)和 Symbol(age)。// 在ES5中,我们存在几个全局函数 isNaN函数,isFinite函数,parseInt函数,parseFloat函数等,对于这些全局函数的使用很简单,就拿isNaN函数来举例。
2023-05-23 19:36:02
444
原创 JS里es6
大家好,我是${Person.name},我来自${Person.hometown},我今年${Person.age}岁了,我的爱好是${Person.hobby}。// startsWith()函数:判断指定的子字符串是否出现在目标字符串的开头位置,第二个参数选填,表示开始搜索的位置。// endsWith()函数:判断子字符串是否出现在目标字符串的尾部位置,第二个参数选填,表示针对前N个字符。// 函数作用:对数组的键值对进行遍历,返回一个遍历器,可以用for..of对其进行遍历。
2023-05-22 19:24:22
370
原创 HTTP状态码
被用于当资源的访问由于法律原因被禁止的时候。497:(HTTP到HTTPS(Nginx))Nginx内置的代码,被用于原始的HTTP的请求发送给HTTPS端口去分辨4XX在日志中和一个错误页面的重定向。598:(网络读取超时异常(未知))这个状态码也没有在任何RFC中指定,但是被用在微软的HTTP代理中去标注一个网络读取超时在一个客户端之前的代理的后面。599:(网络连接超时异常(未知))这个状态码也没有在任何RFC中指定,但是被用在微软的HTTP代理中去标注一个网络连接超时在一个客户端之前的代理的后面。
2023-05-20 09:07:14
429
原创 深拷贝整理
/ 6.使用递归和 Object.prototype.toString 检测对象。// 5.使用 for...in 和 hasOwnProperty 检测对象。// 2.JSON 序列化反序列化方法(不支持函数和 undefined)// 4.使用递归和 Array.isArray 检测数组。// 3.Object.create 方法。
2023-05-15 19:04:19
268
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人