ShenWangNian的博客

原创 webSocket

【代码】webSocket。

原创 前端开发规范

【代码】前端开发规范。

原创 数组的15个常用方法

【代码】数组的15个常用方法。

原创 ES6新增运算符

它也可以写在函数执行的时候。可选链不能用在super关键字上，模版字符串，实例化构造函数, 赋值运算符的左侧等。可能你会疑惑，为什么这么大，因为它是从右边计算的。一个对象的属性，如果这个属性是对象，它还有子属性，访问这个子属性，比如。如果和&&或者||混用的时候，需要加上()显示表明优先级，不然会报错。如果发现没有该属性的时候，则不会进行后面的点运算。主要是对本身进行逻辑操作后，然后对它赋值后面的值。效果是一样的，是不是可读性增加，也节省了代码？如果属性不存在的时候，则有可能会报错。

原创 vue注意点：$attrs、$slots！插槽

inheritAttrs的值为boolean,默认为true，由于v-band='$attrs'传递过来的值会作为dom元素上的属性存在，设置为false可以阻止这个行为，这些属性仍然可以通过$attrs来访问，(vue2中class和style不会受到影响，但是vue3中class和style会受影响)当父组件给子组件传值，子组件并没有接收数据时，此时数据在$attrs中可以拿到，并且如果子组件不需要使用数据，而孙组件需要，则可以直接v-bind="$attrs"传给孙。

原创 透传 Attributes

需要注意的是，虽然这里的 attrs 对象总是反映为最新的透传 attribute，但它并不是响应式的 (考虑到性能因素)。我们想要所有像 class 和 v-on 监听器这样的透传 attribute 都应用在内部的 <button> 上而不是外层的 <div> 上。这里，<MyButton> 并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了 <MyButton> 的根元素上。中的 <MyButton> 组件例子。

原创 插槽的使用！！

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。tip : 也就是说，在父组件中是访问不到子组件的内容的，虽然在父组件中使用了插槽，内容是插进了子组件中，但是还是不能访问子组件中定义的变量。vue中将<slot>元素作为承载分发内容的出口，使用<slot>就可以为封装组件开启一个插槽。给插槽绑定一个name属性，也就是取个名字，使用的时候可以找到对应的插槽把内容放入。

原创 动态组件、keep-alive

缓存实例达到指定数字，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。当在组件中定义了 name 属性后,在其他组件用到组件名时需要使用组件的 name 属性定义的名称。在 component 标签中的组件会被动态的创建和销毁,此时组件中的数据会在再次创建时被重置。include 属性用来指定: 只有名称匹配的组件会被缓存,多个组件名之间使用英文的逗号分隔。exclude 属性用来指定: 只有指定的组件被排除,即不会被缓存,其余组件则会被缓存。动态组件指的是动态切换组件的显示与隐藏。

原创 vue2数据双向绑定ai

这就是Vue.js的数据双向绑定原理：通过响应式系统追踪数据变化，并利用指令建立数据与视图之间的关联，从而实现数据和视图的双向同步。当用户在输入框中输入内容时，触发了输入事件。Vue会捕获这个事件，并自动更新。通过实现"getter/setter"，Vue能够在。在上述代码中，当用户在输入框中输入内容时，属性被读取或修改时进行依赖追踪。表达式也会实时更新显示最新的值。属性会自动更新，并且对应的。告诉Vue将输入框的值与。

原创 vue2的数据数据双向绑定

​ 但是 Vue 并没有采用上述方法劫持数组对象，原因分析：1、特殊的 length 属性，相比较对象的属性，数组下标变化地相对频繁，并且改变数组长度的方法也比较灵活，一旦数组的长度发生变化，那么在无法自动感知的情况下，开发者只能手动更新新增的数组下标，这可是一个很繁琐的工作。拿到这个对象后，Vue先用Object.keys(obj)拿到一个包含obj对象的所有属性（message，name）的数组，然后进行forEach遍历，拿到每一个属性对应的value值。（记不记得一开始的 张三，李四，王五。

原创 vue2的数据双向绑定

的场景中，当用户修改视图中的数据时，这些修改会触发Vue的setter方法，setter方法会通知所有相关的组件，然后更新视图。反过来，如果数据在Vue实例中发生了变化，getter方法会被调用，这会触发更新视图的操作。具体来说，当Vue实例创建时，它会遍历所有的属性，并使用Object.defineProperty()方法将这些属性转换成getter/setter。这就是Vue.js的数据双向绑定原理：通过响应式系统追踪数据变化，并利用指令建立数据与视图之间的关联，从而实现数据和视图的双向同步。

原创 启动本地服务

原创 封装和小程序

原创 动态路由，微信小程序绑定

■登录成功之后添加动态路由。

原创 动态路由的添加

【代码】动态路由的添加。

原创 做封装的基本思路是什么

咱们这个封装是为了干什么.

原创 组件的双向绑定

【代码】组件的双向绑定。

原创 ● 你是怎么解决跨域问题的

● 放在public下的静态资源和放在src下的静态资源有什么区别。public下的静态资源不会被编译，直接出现在dist⽬录⾥。如果我们图⽚放在了src下，我们是没有办法⽤数据绑定的⽅式，○ 你的项⽬上线之后是怎么解决的跨域问题。得到dist⽬录，就是打包之后的静态资源。⼤图⽚不会进⾏转码，编译⽣成1个新的地址。执⾏npm run build。可以通过导⼊的⽅式使⽤这个图⽚。● 你是怎么解决跨域问题的。通过nginx做的反向代理。src下的静态资源会被编译。● ⽹站性能优化的时候。

原创 如何封装vue组件

设置⼀个⾃定义事件，this.$emit(事件名,数据)如果我们发现⼀个vue组件的⾏数超过了500⾏，我们要。哪些地⽅需要外部传递⼀些html过来，其实就是插槽。可以通过props设置哪些数据是⽗组件传递过来的。考虑⼀下是否应该封装⼀些组件，让代码结构更清晰。需要有哪些属性，哪些变量，不同的场景下可以灵活。的使⽤组件，说⽩了就是我们的输⼊是什么，参数是。你在封装组件的时候是怎么考虑问题的。考虑这个组件是做什么的，有哪些元素。这个组件有哪些⾏为，有哪些事件。

原创 跨域请求!!!

前端分离的开发，经常会出现跨域问题。1.见过的请求类型都有哪些。3.跨域只有在哪里会出现。6.跨域请求的表现模式。

原创 06-16 分析错误的原因

2.如何发送application/x-www-urlencoded-form格式请求。

原创 组件和路由

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. 在子组件中触发这个事件。

原创 axios的使用、Vue中的动画、vue组件

登录 | 注册动画哦动画哦

原创 vue过滤器和修饰符

可被用作一些常见的文本格式化。

原创 VUE-基础使用

对象的键：{{key}}，对象的值：{{value}},数组的下标{{index}}</li><li v-for="(item,index) in list">{{item.name}}数组的下标{{index}}

原创 Proxy的实现

（2）Iterator原理：原型上有[Symbol.iterator]方法，这个方法返回一个迭代器对象Iterator,这个对象有一个next属性，属性值又是一个函数，函数返回一个对象，对象有两个属性done表示完成状态，value是属性值。3. for...in循环更常用于对象的循环，如果用于数组的循环，那么就要注意了，上述代码中每次循环中得到的i是字符串类型，而不是预料中的数字类型，要想对它进行运算，那得先要进行类型转换，造成不方便。console.log(iterator.next("前端君"));

原创 5.Module模块

关键字from的作用是指定你想要引入的模块，我们这里指定的是module-B.js文件，也就是上面的模块B。上面的代码片段包含了2个模块，模块B导出了对象person，模块A导入后，对其属性name进行修改，结果修改成功，这一点大家要注意，并不是所有导出的变量都不可修改，对象类型就可修改。上面的代码片段包含了2个模块，其中，模块B导出了字符串变量name，模块A导出变量name之后试图修改它的值，结果报错。导入Import：作为一个模块，可以根据需要，引入其他模块的提供的属性或者方法，供自己模块使用。

原创 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对象。

原创 3.ES6的Promise对象

/ Promise.race()方法：它的参数要求跟Promise.all()方法一样，不同的是，它参数中的promise实例，只要有一个状态发生变化（不管是成功fulfilled还是异常rejected），它就会有返回，其他实例中再发生变化，它也不管了。// Promise.all()方法：接受一个数组作为参数，数组的元素是Promise实例对象，当参数中的实例对象的状态都为fulfilled时，Promise.all()才会有返回。//(2) ['实例1操作成功', '实例2操作成功']

原创 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。

原创 1.Set 和 WeakSet用法

/ delete( )方法：用户删除Set结构中的指定值，删除成功返回：true，删除失败返回：fasle。// has( )方法：判断set结构中是否含有指定的值。// WeakSet结构同样不会存储重复的值，不同的是，它的成员必须是对象类型的值。// entries( )方法：返回一个键值对的遍历器。// values()方法：返回键值的遍历器。// forEach()方法：遍历每一个成员。// clear( )方法：清除所有成员。//keys( )方法：返回键名的遍历器。//或者用add()

原创 fro of 迭代器

/ 通过上面的案例，我们知道了：Generator函数被调用后并不会一直执行到最后，它是先回返回一个生成器对象，然后hold住不动，等到生成器对象的next()方法被调用后，函数才会继续执行，直到遇到关键字yield后，又会停止执行，并返回一个Object对象，然后继续等待，直到next()再一次被调用的时候，才会继续接着往下执行，直到done的值为true。// 创建一个名为 `person3` 的普通对象，并拥有一个名为 `name` 的属性（值为 `"zhangsan"`）。

原创 函数与Symbol

注意这句话的一个关键词：“被登记在全局环境中”，也就是说这个symbol值是被Symbol.for( )创建的，不是被Symbol( )创建的。函数作用：根据参数名，去全局环境中搜索是否有以该symbol.for()参数为名的symbol值，有就返回它，没有就以该参数名来创建一个新的symbol值。Object.assign（对象1，对象2，对象3....）//将后边的多个对象赋值到第一个目标对象中，若属性重复，后边覆盖前面的。否则，哪怕你传的参数值为0，false，null都不会触发默认值赋值。

原创 迭代器与生成器案例

/ 通过上面的案例，我们知道了：Generator函数被调用后并不会一直执行到最后，它是先回返回一个生成器对象，然后hold住不动，等到生成器对象的next()方法被调用后，函数才会继续执行，直到遇到关键字yield后，又会停止执行，并返回一个Object对象，然后继续等待，直到next()再一次被调用的时候，才会继续接着往下执行，直到done的值为true。// 创建一个名为 `person3` 的普通对象，并拥有一个名为 `name` 的属性（值为 `"zhangsan"`）。

原创 函数与Symbol

/ person对象的两个属性都是symbol类型的，我们也知道用Object.keys()和for...in都无法获取到它，我们就用getOwnPropertySymbols()方法来，结果成功了，得到一个数组，数组的内容就是两个symbol类型变量对应的值Symbol(name)和 Symbol(age)。// 在ES5中，我们存在几个全局函数 isNaN函数，isFinite函数，parseInt函数，parseFloat函数等，对于这些全局函数的使用很简单，就拿isNaN函数来举例。

原创 JS里es6

大家好，我是${Person.name}，我来自${Person.hometown},我今年${Person.age}岁了，我的爱好是${Person.hobby}。// startsWith()函数：判断指定的子字符串是否出现在目标字符串的开头位置，第二个参数选填，表示开始搜索的位置。// endsWith()函数：判断子字符串是否出现在目标字符串的尾部位置，第二个参数选填，表示针对前N个字符。// 函数作用：对数组的键值对进行遍历，返回一个遍历器，可以用for..of对其进行遍历。

原创 HTTP状态码

被用于当资源的访问由于法律原因被禁止的时候。497：（HTTP到HTTPS（Nginx））Nginx内置的代码，被用于原始的HTTP的请求发送给HTTPS端口去分辨4XX在日志中和一个错误页面的重定向。598：（网络读取超时异常(未知)）这个状态码也没有在任何RFC中指定，但是被用在微软的HTTP代理中去标注一个网络读取超时在一个客户端之前的代理的后面。599：（网络连接超时异常(未知)）这个状态码也没有在任何RFC中指定，但是被用在微软的HTTP代理中去标注一个网络连接超时在一个客户端之前的代理的后面。

原创 深拷贝整理

/ 6.使用递归和 Object.prototype.toString 检测对象。// 5.使用 for...in 和 hasOwnProperty 检测对象。// 2.JSON 序列化反序列化方法（不支持函数和 undefined）// 4.使用递归和 Array.isArray 检测数组。// 3.Object.create 方法。

原创 简单的网易歌词

暂停

原创 正则表达式

提交