- 博客(62)
- 收藏
- 关注
RSS订阅
原创 JS 常用方法
1. js怎样判断数组中是否有某个元素，某个元素是否在数组中–可以用indexOf,如果某个元素在数组中，那么就会返回该元素在数组中的位置，没有就返回-1–也可以用es6的new Set来生成一个Set数据结构的数据，从而调用has方法来判断，有则返回true，没有则falseindexOf():new Set(arr2).has(“1”):......
2021-07-06 16:58:49
457
原创 vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示
如果直接使用本地路径渲染是渲染不出来的，因为这种情况下渲染时会发送网络请求加你的本地地址所以渲染不出来。此时后面的路径就不是本地图片的路径了。这样怎么能找到路径？来看一下我的图片存放文件。
2024-03-26 16:56:40
479
原创 实现类似 Word 协同编辑--Canvas-Editor
对于word的协同编辑，已经构思很久了，但是没有找到合适的插件。今天推荐基于canvas/svg 的富文本编辑器 canvas-editor，能实现类似word的基础功能，如果后续有更好的，也会及时更新。
2024-03-08 21:51:14
657
原创 微前端样式隔离、sessionStorage、localStorage隔离
微前端应用，如果用到持久化方案的时候，主子应用其实是在操作同一空间的sessionStorage、localStorage。微前端qiankun本身没有针对sessionStorage、localStorage做隔离。前端样式不隔离，会产生样式冲突的问题，这个点在qiankun也存在。为了避免溢出，子应用卸载的时候，可以做一些合理化的移除。为了避免冲突，主子应用可以人为做隔离。子应用1修改一个样式。其它应用也会受到影响。
2023-12-22 19:52:07
738
原创 ant-design-vue Message 用法以及内容为 html片段情况
【代码】ant-design-vue Message 用法以及内容为 html片段情况。
2023-12-21 14:52:45
1348
原创 qiankun-微前端--vue2
路由定义，对应的路由与子应用的路由相对应，但是主应用对应子应用的路由前面要加一个标识(/child-app)，用于找到对应的子应用。
2023-08-11 17:17:54
433
原创 vue--$nexttick，$set，$forceupdate的区别
想必很多小伙伴在使用vue时，都遇到过明明修改data里的数据了，但是视图却不更新的情况吧，这时候有经验的小伙伴，二话不说直接调用this.$forceupdate()强制更新页面，管他啥情况，刷就完事了，我属于是整个一个大无语。$nexttick并不是真正意义上的更新视图，而是等视图更新后再执行某些操作虽然 $ forceUpdate和$set都能起到更新视图的效果，但是前者并不推荐使用，一是，官方都说了，如果你都到了要用 $ forceupdate的地步了，那你十有八九是操作有问题；
2023-07-19 11:21:46
343
原创 什么是闭包、闭包的作用、闭包的解决
学习闭包我们要清楚函数作用域、内存回收机制、作用域继承。1.1 函数作用域作用域我们可以认为它是一个封闭的盒子，只让它在这个盒子里面进行操作，也可以称这个盒子为独立作用域。在js中，一个函数要执行时就会在内存里面创建一个独立作用域——封闭的盒子。fn();</script>比如在函数中第一个变量，只能在函数这个独立作用域中使用（也就是封闭的盒子），只要跳出这个作用域，就找不到该变量了。而且函数执行完毕之后，这个独立作用域或（封闭的盒子）就会删除。
2023-07-14 15:03:48
491
原创 cookies、localStorage 、sessionStorage 的区别
cookies、localStorage 、sessionStorage 的区别
2023-06-27 14:31:59
139
原创 vue--$nexttick，$set，$forceupdate--更新视图的区别
nexttick并不是真正意义上的更新视图，而是等视图更新后再执行某些操作虽然 $ forceUpdate和 $ set都能起到更新视图的效果，但是前者并不推荐使用，一是，官方都说了，如果你都到了要用 $ forceupdate的地步了，那你十有八九是操作有问题；二是能用 $ set解决的问题，为什么要用$forceupdate这种更消耗性能的方法呢，如果用了，估计是你偷懒！
2023-06-16 15:48:38
882
1
原创 qiankun-微前端--vue3+vite
项目采用了vue3+vite构建的，又因为qiankun不支持vite，所以需要引用 ** vite-plugin-qiankun ** 插件来解决。
2023-04-27 16:58:26
1454
4
原创 Vue3.2 name怎么使用，方便使用vue浏览器插件
在使用 Vue3.2 的 setup 语法糖后，无法优雅的定义组件的 name 值，虽然 vite 会根据组件的文件名自动生成组件名，但是需要自定义的组件名时，就很不方便。
2022-11-24 17:46:26
195
原创 vue项目中贝塞尔曲线+canvas绘制两点之间的直线
贝塞尔曲线绘制动态轨迹和canvas绘制两点之间的直线，两种方式，做下记录：<template> <div class="testBeiSaiEr"> <div class='a'></div> <div></div> <div class='b'></div> <!-- <canvas id="c1" :width="ware
2022-05-16 14:55:59
1608
原创 Pinia的基本使用
前言最近发现vue中出了个Pinia，与vuex一样用来管理状态的, 提前简单学习一下。Pinia官网： Pinia基本格式：import { defineStore } from 'pinia'export const useUserStore = defineStore({ id: 'user', // id必填，保证在Store中唯一 state: () =>({}), getters: {}, actions: {}})以下内容都是基于vue3的基本使
2022-05-11 16:49:06
1534
1
原创 vue强制刷新整个页面
方法一：在 app.vue 中定义 reload() 方法。<template> <div id="app"> <router-view v-if="isReload"/> </div></template> <script>export default { name: 'App', provide() { return { reload: this.reload }
2022-02-25 18:06:10
1933
原创 vue-router跳转时打开新页面的两种方法
1、标签实现新窗口打开官方文档中说 v-link 指令被 组件指令替代，且 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用 < a > 标签，但事实上vue2版本的 是支持 target="_blank" 属性的(tag=“a”)，如下：<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>2、编程式导航
2022-02-18 13:51:18
24150
原创 不定宽高，实现盒子左右垂直居中
html<div class="container"> <div class="box"> 不定宽高实现左右垂直剧中 </div> </div>cssbody,html{ margin: 0; padding:0; width: 100%; height: 100%; }
2022-01-19 10:45:19
277
原创 vue左右滑动
<template> <ul class="box"> <li class="left">左边</li> <li class="resize"></li> <li class="mid">右边</li> </ul></template> <script> export default { // name: 'Dashb
2022-01-10 11:32:14
1516
原创 在浏览器地址栏输入url后进行访问做了什么？
目录标题1. 解析url2. DNS解析3. TCP连接4. 发送http请求5. 服务器接收请求6. 服务器响应7. TCP链接断开8. 浏览器解析资源一、渲染页面二、html页面的加载三、CSS解析四、javaScript编译执行从浏览地地址栏输入地址按下回车，可以看做是一次请求的发起，那么必然会经历以下几个步骤：解析url地址DNS解析TCP链接发送http请求服务器接收请求服务器响应TCP链接断开浏览器解析资源1. 解析url浏览器通过地址栏捕获到url地址之后，首先对ur
2021-12-01 22:57:51
932
原创 HTTP 和 HTTPS 的区别
一句话总结：HTTP 是超文本传输协议，信息是明文传输，如果黑客截取了 Web 浏览器和服务器之间的传输报文，就可以直接获得其中的信息。HTTPS 则是具有安全性的 SSL 加密传输协议一、HTTP 和 HTTPS 的基本概念：1. HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol）是互联网上应用最为广泛的一种网络协议。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。它可以使浏览器更加高效。HTTP 协议是以明文方式发送信息的，如果黑
2021-12-01 10:26:49
141
原创 vue2中v-if和v-for同时使用的问题
在官方文档中明确指出v-for和v-if不建议一起使用。原因：v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id"> {{ user.name }} </li></ul>如上述情况，即使有100个user中只有一个需要使用
2021-11-28 13:58:06
1301
原创 关于Vue v-for中的:key作用
项目功能：数据间有三层关系，通过3个 v-for实现，渲染页面元素的时候，出现错乱的情况，感觉和虚拟DOM有点关系。其实不只是vue、react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设
2021-11-28 13:45:37
100
原创 vue使用keep-alive缓存页面
目录标题概念作用原理参数（Props）对生命周期函数变化缓存整个项目使用新增属性include/exclude,缓存部分页面动态判断，使用v-bind:include使用beforeRouteLeave或者afterEach中进行拦截处理列表页回到上次浏览位置概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用
2021-11-28 11:16:02
353
原创 vue mixins 混入
1、mixins 含义mixins 就是混入,就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改，mixins 是一种分发Vue组件中可复用功能的非常灵活的一种方式。一个混入对象可以包含任意组件选项。比如组件的生命周期，data() { return{} }，methods 方法等，凡事能在组件上编写的都能在 mixins 中定义。2、什么时候使用Mixins页面的风格样式不同，但是执行的方法和需要的数据类似，这时候我们就可以把公共的方法提出来，然后在混入需要用到的组
2021-11-24 22:02:32
231
原创 vue双向绑定原理
view的变化能实时让model发生变化，而model的变化也能实时更新到view。vue采用数据劫持&发布-订阅模式的方式，通过es5提供Object.defineProperty()方法来劫持（监控）各属性的getter、setter，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。要实现vue中的双向数据绑定，大致可以划分三个模块：Observer、Compile、Watch.
2021-11-24 21:13:27
332
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人