- 博客(82)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 ES6的Generator函数
button元素绑定submit函数，按钮点击之后会获取Generator函数并让Generator函数先执行到第一个yield，等到setTimeout执行完成，回调函数输出“发送1号请求”，再让Generator函数执行到第二个yield或者return处。ES6新增了Generator函数，Generator函数不同于其他函数，Generator函数可以将函数的执行流程挂起(暂停或停止函数的执行)Generator函数除了*号，还有yield关键字，yield关键字有点类似return。
2023-05-21 23:09:40
188
原创 DOM事件流
用户点击元素的时候，会先找到第一层元素（html），再找到第二层元素（body），再继续找到下一层元素（div），最后找到目标元素（p）。因为红色方块元素是html——body——div(.one)中的元素，所以点击红色方块元素冒泡会让所有的父元素绑定的函数都执行。获取目标之后就是 冒泡阶段，代码中元素绑定的事件（onclick）一般是冒泡阶段执行的。冒泡阶段也是从目标元素依次往外层元素执行，所以最外层元素绑定的事件也会被执行。DOM事件流分为三个阶段：捕获阶段——目标阶段——冒泡阶段。
2023-05-01 21:20:42
1073
原创 JS的BroadcastChannel与MessageChannel
BroadcastChannel以广播的形式进行通信BroadcastChannel用于创建浏览器标签页之间的通信使用BroadcastChannel的浏览器标签页面必须要遵循同源策略页面1使用BroadcastChannel创建一个频道，页面2使用BroadcastChannel链接频道，页面1与页面2即可通信。实例。
2023-03-09 22:47:44
1543
原创 CSS实现元素翻转效果
翻转效果建议IOS系统、安卓系统、window系统都要进行实机测试，免得线上环境出现兼容问题。1、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，2、定义一个父元素，父元素中两个子元素，两个子元素分别是背面与正面，元素翻转的效果能让用户有良好的体验感。CSS实现元素翻转的效果有两种思路。
2023-02-04 11:56:05
4835
原创 Vue的匿名插槽、具名插槽、作用域插槽
Vue插槽相当于一个占位元素，在组件中留下占位元素，不同的父组件使用相同的子组件，就可以自定义不同的子组件内容。Vue有3种类型的插槽：匿名插槽、具名插槽、作用域插槽。
2023-01-17 14:40:56
259
原创 JavaScript监听DOM节点变化事件
DOMCharacterDataModified监听的是元素中文本节点的变化，但是innerHTML、innerText与textContent都是监听不到的，使用el.firstChild.nodeValue才会触发DOMCharacterDataModified的监听。DOMNodeInserted监听的是元素的插入，属性节点的添加是监听不到的。DOMNodeRemoved监听的是元素的移除，属性节点移除是监听不到的。DOMAttrModified监听的是元素属性的变化。
2022-12-09 22:56:27
4581
1
原创 ES6的Proxy实现双向绑定的Demo
双向绑定我们可以简单的理解为，当js中的数据发生改变，视图层/结构层(标签)就会重新渲染。比如，在JS中定义了一个a变量，操作a变量赋值，一旦赋值完成，html的标签就会重新渲染。，在没有Proxy的时候，要实现双向绑定，就会使用Object.defineProperty，Vue2使用的就是Object.defineProperty。那就离不开Object.defineProperty与Proxy这两个API了。只要修改了state对象中的值，就会改变DOM结构。既然要实现双向绑定，
2022-10-30 14:22:18
303
原创 flex布局的align-items与align-content
该文章主要描述的是align-content，并且与align-items的区别
2022-10-09 00:00:23
1469
原创 在Vue中搭建前端监控日志
监控可以观察到人的动作、周围的环境，如果有情况也可以通过监控还原现场。前端也可以通过设置“监控”观察用户，在遇到一些无法复现、奇奇怪怪的问题，或者单个用户所在的环境与大部分用户的环境不一样时产生的问题，例如 该用户对浏览器设置了不允许cookie 等；这些问题通过前端监控记录下来，让开发者模拟出问题环境、操作步骤，能更好的解决问题。
2022-09-05 22:13:21
5471
2
原创 Vue的transition组件
Vue2与Vue3都有该组件可以用于控制组件切换时的效果，让用户有更好的体验感。先看效果：页面切换的时候由透明逐渐显示。
2022-08-14 16:50:03
1412
原创 Uniapp中调整web-view的高度、获取当前的web-view页面URL
Webview是一个基于webkit引擎，可以解析DOM元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。（chrome浏览器也是基于webkit引擎开发的，Mozilla浏览器是基于Gecko引擎开发的）开发过小程序的话对这个标签应该比较熟悉，web-view标签与iframe标签类似，可以在我们的页面中渲染第三方页面。...
2022-07-17 19:58:15
7453
原创 熟悉Vue路由的beforeEach陷入死循环的情况
不了解路由守卫的next很容易让页面陷入死循环。以全局前置路由为例，陷入路由死循环一般报错是堆栈溢出也就是：RangeError: Maximum call stack size exceededrouter.js当从Index.vue离开时就会陷入死循环。要清楚前置路由陷入死循环的原因,就要明白前置路由守卫的next函数流程解析：刚开始的时候 目标路由是/Center，来源路由是/Index，执行前置路由守卫，判断到if为true,于是执行next(‘/an’)，目标路由改成了/an，但来源路由仍
2022-07-01 22:39:05
1169
1
原创 Vue中先执行App.vue文件中生命周期的异步操作再执行组件中的生命周期函数
先看要求：有个公共函数需要在进入页面前就要执行，用于设置缓存，首页或者其他页面都需要使用这个缓存数据，并且用户可以自由进出不同页面，所以设置缓存的函数在首页执行并不可取，但每个页面都执行设置缓存函数会使得代码变得有些冗余。App.vuemain.jsindex.vue因为async/await可以将Promise的异步操作像同步一样操作。...
2022-06-25 22:35:21
4477
原创 JS中字符串对比
先在浏览器复现问题在浏览器控制台中，可以发现’3’>'200’的结果是true。如果在浏览器控制台中输入 3>200，结果是false。字符串对比是ASCII码的对比，而且是用字符串首位进行对比，例如’3’>‘200’这里的对比实际上是’3’>'2’的对比，最后根据变量的ASCII码得出结果ASCII码表：根据ASCII码表，字符串类型的3，ASCII值是51；字符串类型的2，ASCII值是50；‘3’>'200’的对比可以看成 51>50，所以结果是true。String.fromCharCod
2022-06-12 22:03:13
1079
原创 Vue全局自动化组件
Vue全局注册组件Vue2//Vue2注册全局组件//main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import helloworld from '@/components/helloworld.vue'Vue.config.productionTip = falseVue.component('hellowo
2022-05-28 23:21:18
208
原创 Vue挂载变量
Vue挂载变量或者函数Vue2挂载变量//main.js//挂载变量Vue.prototype.$variant="变量";//挂载函数Vue.prototype.$fun=function(){ return "function"}//在页面中通过this即可获取挂载的变量//index.vuemounted(){ //使用挂载的变量 console.log(this.$variant); //使用挂载的函数 this.$fun();}Vue3挂载变量Vue3相比Vu
2022-05-21 23:40:02
503
原创 JS中的 || 、&&运算符
JS中的 || 与 &&符号的区别JS在判断中使用 let a=1,b=2;if(a==1||b==1){ // 在判断中，只要有一个满足为true的条件就执行 console.log(a==1); console.log(b==1);}if(a==1&&b==2){ //&&需要多个判断条件都为true console.log(a==1); console.log(b==2);}结果都是输出：在语法中使用||的使
2022-04-23 22:36:17
554
1
原创 JS实现长按事件功能
长按点击功能主要用到的是onmousedown、onmouseup、setTimeout()、clearTimeout()事件移动端中则是ontouchstart、ontouchend
2022-04-17 20:17:01
18312
原创 Vue中获取各类型input标签的值
Vue中获取各类型input标签的值HTML中input标签的tyle类型实际上有23种；常用的有text、password、radio、checkbox、button、file。现在就在Vue中获取常用的值获取text类型的值//html<input type="text" v-model="val">//jsconsole.log(this.val);获取password类型的值//html<input type="password" v-model="val"
2022-04-10 16:09:33
3140
原创 Vue的路由守卫
Vue路由守卫Vue的路由，简单来说 主要提供的是组件间互相跳转的帮助；例如从首页跳转到设置页····路由守卫——作用就在于监听组件间互相跳转的时候，也可以理解为拦截；例如从首页跳转到设置页时，路由守卫会监听到页面来自首页，目标页面是设置页。路由守卫分为全局守卫、独享守卫、组件内的守卫 ！以下示例代码是在vue脚手架创建的项目中使用的 ！全局守卫全局，顾名思义是指的整个项目，全局守卫监听的是整个项目的路由import Vue from 'vue'import VueRouter f
2022-03-20 19:38:04
1312
原创 ES6的Async/Await
Async/Await的作用Async的意思是：异步Await的意思是：等待在ES6中，使用async/await的意思是：等待异步完成后再继续执行代码。JS中，执行代码先在主线程运行，遇到异步时，异步会去到消息队列，等到主线程运行完后才执行消息队列的异步任务。Async/Await的使用Async/Await的使用并不复杂。async function a(){ await ···//异步代码}这就是async/await的使用。虽然使用很方便，但是有许多要注意的事项。Async/A
2022-02-27 22:47:39
754
原创 由浅入深—Websocket
WebsocketWebsocket介绍websocket使用概括：Websocket介绍Websocket是一种协议，与http协议类似，这两种协议用于客户端与服务器端之间的通信。但是，Websocket与http是有差别的。我们常用的http与服务器端通信是有限制的，服务器端不能主动向客户端发送数据。客户端发送请求，服务器响应请求，服务器无法主动向客户发送数据。websocket可以使服务器端主动向客户端通信websocket使用单单看理论介绍是不能更好的了解websocket。
2022-02-20 00:58:14
247
原创 原生JS实现复制文本功能
原生JS实现复制文本功能原生JS实现复制功能。使用的是DOM的execCommand。 <input type="text"> <button onClick="copyFn()">点击复制</button> <script> function copyFn(){ let txt=document.getElementsByTagName('input')[0].value;
2022-01-02 21:24:11
998
原创 JS中对象取值方式 . 与 []
JS使用 . 与 使用 [] 取值的区别JS中对象取值的方式有两种——分别是 使用 . 与使用 []一般来说，对象取值使用的方式是使用 .写法：let obj={ name:"昵称", value:"值",}console.log(obj.name);//输出昵称console.log(obj.value);//输出值使用 . 的方式取值比较常见，但是无法使用字符串变量或者数字为属性名比如这样子：//错误写法obj.'name';obj.10;//这样子的写法是错误的/
2021-12-26 14:43:53
4963
原创 Vue的filters传入多个参数的写法
Vue的filters传入多个参数的写法Filters是Vue的过滤器//传入一个参数时<template> <div> <h1>{{content | filter}}</h1> </div></template><script>export default { data(){ return{ content:""
2021-12-17 21:45:05
4582
原创 Vue的filter过滤器的使用
Vue的filter过滤器的使用Vue官方文档：过滤器在项目中还是比较常见的，让文本格式化、筛选出元素的对应的样式······过滤器的用法：在需要过滤的值后边加上 |,<template> <div> <h1 :class="style_h1 | filter_style">HOME</h1> </div></template><script>export default
2021-11-27 21:28:51
1447
原创 Vue的Mixins——接收一个混入对象的数组
Mixins是到底是什么先看一下官方文档的介绍：关键语句：混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中这句话的意思是：JS对象可以合并到Vue当前实例中。直接上代码能更清楚：Home.vue组件，引入Obj.js文件<template> <div> <h1>HOME</h1> </div></template><script>impor
2021-11-13 13:07:35
1132
原创 Vue强制重新渲染组件
Vue强制重新渲染组件首先看一下官网对$forceUpdate的介绍首先看一下官网对$forceUpdate的介绍例子：<template> <div> <h1>HOME</h1> <p>名字:{{arr[0]}}</p> <input type="button" value="点击改变名字" @click="changName"> </div&g
2021-11-07 20:43:44
200
原创 Vue监听Vuex的数据
Vue监听Vuex的数据Vue监听Vuex数据跟监听data数据一样，使用watch属性监听。监听data数据：<template> <div> <h1>Compontent</h1> </div></template><script>export default { data(){ return{ content:"value", obj:{ name:"obj" }
2021-10-24 20:21:41
878
原创 WEB页面的SEO优化
SEO优化SEO介绍SEO优化SEO介绍SEO全称：Search English OptimizationSEO中文名称：搜索引擎优化，就是利用搜索引擎规则提高网站在搜索引擎的排名。SEO优化SEO优化就是将网站尽量排在前面。1、语义化标签，符合W3C规则标签语义化简单来说是使用“合适的标签”，例如标题标签使用h1，导航标签使用nav，页面头部使用header等2、合理的title、description、keywords<html> <title>页面标题&l
2021-10-21 21:34:03
587
原创 Vue中一个组件内使用多个router-view
Vue一个组件内使用多个router-view先看实例：不同的组件出现在对应的位置代码：Home.vue<template> <div> <h1>HOME</h1> <router-view name="one" class="one"></router-view> <router-view name="two" class="two"></rout
2021-10-17 16:43:42
10382
1
原创 Vue的keep-alive标签
Vue使用keep-alive标签实现组件缓存首先看一下使用keep-alive的效果keep-alive的使用方式keep-alive的属性与缓存组件的钩子函数实际代码首先看一下使用keep-alive的效果简单介绍：Son1组件切换到Son2组件后，再回到Son1组件，Son1组件的输入框并没有恢复初始值。这就是将Son1组件缓存了下来。keep-alive的使用方式<keep-alive> <router-view></router-view>&l
2021-10-12 21:40:29
390
原创 JS的微任务、宏任务与Event Loop
JS中异步分为微任务和宏任务要了解微任务与宏任务就要知道JS代码运行的顺序。JS是单线程，也就是事情只能一个个去做。JS是先执行完主线程的任务后才去执行任务队列。任务队列：在JS运行时，先执行同步的代码，而异步的代码则会挂到任务队列中，等主线程执行完成后才执行任务队列的异步代码。console.log(1);console.log(2);setTimeout(()=>{ console.log(3);},0);console.log(4);先了解上面代码的执行顺序
2021-09-30 20:35:33
137
原创 普通函数与箭头函数的this指向
普通函数的this指向与箭头函数的this指向普通函数：普通函数：function fun(){ console.log("定义普通函数的方式");}前言：普通函数的this是指向调用者的。也就是哪一个对象调用普通函数，普通函数就指向哪一个对象。...
2021-09-11 10:51:22
577
原创 CSS3的filter属性
CSS——filter属性1、元素模糊2、元素亮度3、元素投影4、元素的灰色程度5、元素对比度6、元素颜色7、元素反转颜色8、元素透明程度9、元素饱和度10、元素的褐色1、元素模糊filter:blur(像素值)像素值越高，元素越模糊img{ filter:blur(10px);}/*HTML:*/<img src="./1.jpg"></img>效果：2、元素亮度filter:brightness(百分比);100%是正常亮度，百分比越小，元素亮度
2021-09-05 18:26:53
772
原创 WebStorage
WebStorageWebStorage是HTML5推出，是一种web本地存储方式。WebStorage分为SessionStorage与localStorageSessionStorage:用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。localStorage:用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。SessionStorage://设置SessionStoragewindow.sessionStorage.setItem("存储的
2021-09-02 17:29:31
195
原创 Vue深度监听
Vue深度监听Vue框架中监听一般写法为:watch:{ a(newVal,oldVal){ console.log(newVal); }}当监听对象的属性时:watch:{ "obj.name"(newVal,oldVal){ console.log(newVal); }}如果需要监听整个对象时：watch:{ obj:{ deep:true,//true为进行深度监听,false为不进行深度监听 handler(newVal){ console.log
2021-08-30 21:10:10
23693
1
原创 ES6的Map与Set
ES6的Map与SetES6新增了Map与Set定义对象ES5.1定义对象的方式:let obj={ name:"obj_name", value:"content",}Map 对象Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。换句简单易懂的话就是说:定义JS对象的方式新增Map的方式；具体用法://new出Map实例对象let m=new Map();//添加key和value值m.set("keyname","valueconten
2021-08-22 13:55:10
173
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人