![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 75
IT 哈
这个作者很懒,什么都没留下…
展开
-
这一次,教你从零开始写一个 IoC 容器
这一次,教你从零开始写一个 IoC 容器转载 2023-01-31 15:39:05 · 653 阅读 · 0 评论 -
require 的模块加载机制
require 的模块加载机制转载 2022-12-19 16:13:44 · 839 阅读 · 0 评论 -
现代浏览器内部机制 Part 4
浏览器原理4转载 2022-10-22 16:39:39 · 150 阅读 · 0 评论 -
Inside look at modern web browser (part 3)
浏览器原理3转载 2022-10-22 16:27:57 · 147 阅读 · 0 评论 -
Inside look at modern web browser (part 2)
浏览器原理2转载 2022-10-22 16:19:10 · 132 阅读 · 0 评论 -
Inside look at modern web browser (part 1)
浏览器原理转载 2022-10-22 16:11:03 · 130 阅读 · 0 评论 -
vue3+vite项⽬搭建-配置环境变量env
vue3+vite项⽬搭建-配置环境变量env转载 2022-10-18 15:35:00 · 8558 阅读 · 1 评论 -
npm install xxxx --legacy-peer-deps命令是什么?为什么可以解决下载时候产生的依赖冲突呢?
老项目依赖下载不动或者报错问题转载 2022-09-17 15:57:46 · 1212 阅读 · 0 评论 -
css var实现网页换肤
css var实现网页换肤转载 2022-07-14 10:20:39 · 464 阅读 · 0 评论 -
vue双向绑定原理
vue双向绑定原理转载 2022-07-15 10:25:15 · 1593 阅读 · 2 评论 -
如何通过Vue实现@人的功能
如何通过Vue实现@人的功能转载 2022-07-08 16:30:25 · 2680 阅读 · 3 评论 -
一文带你搞懂 Web 应用开发进化史
一文带你搞懂 Web 应用开发进化史转载 2022-07-06 19:19:57 · 362 阅读 · 0 评论 -
Vue3.0 新特性以及使用变更总结(实际工作用到的)
前言Vue3.0 在去年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发,这篇文章就是在使用后的一个总结, 包含Vue3新特性的使用以及一些用法上的变更。图片.png为什么要升级Vue3使用Vue2.x的小伙伴都熟悉,Vue2.x中所有数据都是定义在data中,方法定义在methods中的,并且使用this来调用对应的数据和方法。那Vue3.x中就可以不这么玩了, 具体怎么玩我们后续再说, 先说一下Vue2.x版本这么写有什么缺陷,所以才会转载 2022-05-27 17:52:04 · 753 阅读 · 1 评论 -
区分event对象中的[clientX,offsetX,screenX,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置。clientX clientYevent.clientXevent.clientYclient直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。client范围兼容性:IE和主流游览器都支持。offse转载 2022-07-06 19:17:53 · 926 阅读 · 0 评论 -
vue键盘事件监听
1、在当前页截获键盘事件,所有按钮均被控制 created () { this.keyDown(); }, beforeDestroy () { this.keyDownReview() }, methods: { //按键恢复 keyDownReview () { document.onkeydown = function (event) { var e = event || window.event;转载 2022-07-06 19:20:22 · 10391 阅读 · 0 评论 -
Web 中的“选区”和“光标”需求实现
在 web 开发中,有时不可避免会和“选区”与“光标”打交道,比如选中高亮、选中出现工具栏、手动控制光标位置等。选区就是用鼠标选中的那一部分,通常是蓝色光标呢,是那个闪烁的竖线吗?温馨提示:文章比较长,耐心看完可以完全自主的操作选区和光标一、“选区”和“光标”是什么?先说结论:光标是一种特殊的选区。想搞清楚这个,不得不提到两个重要的对象:Section[1]和Range[2]。这两个对象都有大量的属性和方法,详细可以查看官方文档,这里简单介绍一下:1.Selectio..翻译 2022-05-11 08:55:10 · 465 阅读 · 0 评论 -
vue锚点
第一种:router.js中添加mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return {selector:to.hash } } }组件:<template><div><ul class="list"><li><a href="#1" rel="external nofollow" >星期转载 2022-04-21 11:39:51 · 2324 阅读 · 0 评论 -
vue html页面打印功能vue-print-nb
vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格,在网上找了一个打印组件vue-print-nb本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈使用方式安装 npm install vue-print-..转载 2022-02-14 15:44:36 · 2157 阅读 · 0 评论 -
【JS基础】JavaScript中的void 0
众所周知,Undefined是JS语言中的7大基本类型之一,表示未定义,它的值只有一个,就是undefined。任何变量在赋值前都是undefined。而在一些框架源码中,会出现一些这样的表达式: if (context === void 0) return func; function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; } if (array == n转载 2022-01-25 09:10:48 · 3923 阅读 · 0 评论 -
在EggJS中使用Sequelize做联表查询
1.EggJS引用Sequelize安装sequelize依赖和mysql驱动cnpm i egg-sequelize mysql2 -S启用sequelize插件在config/plugin.js里面添加sequelize: { enable: true, package: 'egg-sequelize',},配置数据库在config/config.default.js里面添加 config.sequelize = { diale转载 2022-01-07 19:17:34 · 2138 阅读 · 2 评论 -
vue自定义指令update 和 componentUpdated及bind 和 inserted区别
转自vue自定义指令update 和 componentUpdated及bind 和 inserted区别_sunboylife的博客-CSDN博客_vue 自定义指令update转载 2022-01-06 18:36:32 · 571 阅读 · 0 评论 -
手把手教你实现网页端社交应用中的@人功能:技术原理、代码示例等
1、引言 第一次使用@人功能到现在已经有差不多10年了,初次使用是通过微博体验的。@人的功能现在遍布各种应用,基本上涉及社交(IM、微博)、办公(钉钉、企业微信)等场景,就是一个必不可少的功能。 最近正好在调研 IM 各种功能的技术实现方案,所以也详细地了解了下@人功能在Web网页前端的技术实现,正好借此机会给大家分享一下我所掌握的技术原理和代码实现。 本文已同步发布于“即时通讯技术圈”公众号,欢迎关注。公众号上的链接是:点此进入...转载 2021-12-27 15:52:13 · 727 阅读 · 0 评论 -
前端如何修改组件库源码来封装符合自己需求的组件?
前端开发的同学们或许会遇到这样的问题:产品中需要实现某项功能,常用的elementui、antd等组件库中确实有差不多功能的组件。但实际上这些组件可能并不能满足你的功能,或多或少都需要你去看看如何修改它才能满足你的需求。比如我曾遇到过element-ui中的「树形控件」暴露出的参数没有我需要的(获取参数);或者是「对话框」组件我需要给它的body加上上下两条border等(样式修改);还有「级联选择器」的多选可搜索功能:需要修改级联看板使它保持展开,且当子节点全部选中时,不展示全部子节点...转载 2021-12-10 10:14:58 · 838 阅读 · 0 评论 -
element时间选择器,怎么怎么转换成时间戳
我用element时间选择器选择的值要去比较大小,所以要在值前面加上今天的时间戳去比较,但是el选择的值只是一个字符串,怎么把这两个值变成当天13:00:00的时间戳和14:00:00的时间戳{ endTime: "13:00:00" startTime: "14:00:00" } new Date((new Date).toDateString()+' 13:00:00').getTime()timeStampList.push(new Date((new Date).t.转载 2021-11-22 14:35:17 · 2278 阅读 · 0 评论 -
Vue 如何快速实现头像裁剪?方法比你想象的简单
高效实现需求的方法,就是避免重复造轮子。图片裁剪的插件也不少,这里我选择 vue-cropper,原因是功能强大、简单易上手。话不多说,上效果图:效果图1634477651(1).jpgimage.png安装npminstallvue-cropper复制代码使用import{VueCropper}from'vue-cropper'复制代码代码实现以 element-ui + vue-cropper 为例实现头像裁剪src/App.vu...转载 2021-11-05 14:24:41 · 1442 阅读 · 1 评论 -
npm 和 npx 有什么区别?
作者:嘶吼链接:https://www.zhihu.com/question/327989736/answer/787995048来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。说到npm那当然就离不开社区文化,那我们就从社区文化开始说起:社区文化的意思是:拥有共同职业或兴趣的人群,自发组织在一起,通过分享信息和资源进行合作与交流。虚拟社区的参与者经常会在线讨论相关话题,或访问某些网站。前端程序员也有社区,世界上最大的前端社区应该就是 GitHub 了。前.转载 2021-10-29 17:35:19 · 849 阅读 · 0 评论 -
什么是对象存储?COS 能做什么?这里有份快速入门教程
随着互联网速度的逐渐提升以及用户设备数量的增多,云存储服务从新兴走向火热,现在俨然成为了大众数字生活不可或缺的一部分。但是,市面上的个人云存储产品中存在的订阅费用高昂、速度受限、功能不够全面等问题使单一产品难以满足每个人的需求;另一方面,云存储产品间各自独立、相对封闭的生态也使得不同云存储平台的用户协作存在一定困难。这些不便之处使我重新认识到了「对象存储」这一「古老」的基础服务在个人存储领域可以发挥的价值。对象存储和个人云服务之间的关系?区别?对象存储(object storage)属于公有云服务中转载 2022-02-07 14:47:18 · 1909 阅读 · 0 评论 -
响应式布局新方案
概念:融合响应式设计本文中我们可以尝试得出一种新的解决方案,那就是利用 JavaScript 和 CSS 来进行媒体查询,是响应式设计与自适应设计结合的方案,我这里给起一个好记的名字叫做融合响应式设计( Fusion Web Design,简称 FWD )。技术原则: JavaScript 判断尽量少 CSS 媒体查询的断点也尽量少 UI效果 在笔记本、平板电脑、智能手机上展示合适的 UI 效果 PC UI:给笔记本等设备上看的大屏效果 Mob...转载 2021-10-27 10:54:49 · 204 阅读 · 0 评论 -
2021年,让我们手写一个mini版本的vue2.x和vue3.x框架
mini版本的vue.js2.X版本框架模板代码首先我们看一下我们要实现的模板代码:<divid\="app"\><h3\>{{msg}}</h3\><p\>{{count}}</p\><h1\>v-text</h1\><pv-text\="msg"\></p\><inputtype\="text"v-model\=...转载 2021-10-26 09:04:37 · 343 阅读 · 0 评论 -
cookie详解(含vue-cookie)
今天看到一篇cookie的文章,写的特别详细,感谢晚晴幽草轩的分享,原文链接http://mp.weixin.qq.com/s/NXrH7R8y2Dqxs9Ekm0u33w原文如下,记录到此供以后查阅并希望好文章能被更多需要的人看到背景在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。在JavaScript中可以通过 document.cookie 来读..转载 2021-10-16 10:54:36 · 1510 阅读 · 0 评论 -
三十分钟包会——正则表达式
三十分钟包会——正则表达式一、前言正则表达式,对大家来说既熟悉又陌生。熟悉是因为工作中有很多场景能用到,比如手机号、邮箱、密码等规则校验。陌生则是因为正则表达式看上去就是一堆乱码,且一眼看上去很难看懂匹配规则。有时候在网上去找一个特定规则的正则表达式,搜出来的结果各不相同,执行效果更是不尽人意,想自己去修改,感觉也无从下手。今天就花费30分钟时间,带领大家从另一个角度去剖析匹配的目的,理解匹配的思路,一步一步抽丝剥茧去学会怎么写正则表达式(读正则表达式远比写正则表达式要困难的多)。二、理转载 2021-10-15 09:44:26 · 455 阅读 · 0 评论 -
从零开始实现一个颜色选择器(原生JavaScript实现)
项目目录与文件创建首先,我们无需搭建项目的环境,我们还是直接用最简单的方式,也就是引入的方式来创建这个项目,这样也就方便了我们一边编写一边测试。创建一个空目录,命名为ColorPicker,创建一个js文件,即color-picker.js,然后创建一个index.html文件以及创建一个样式文件color-picker.css。现在你应该可以看到你的项目目录是如下所示:ColorPicker│index.html│color-picker.js│color-picker.css...转载 2021-10-14 17:05:53 · 1227 阅读 · 0 评论 -
Axios请求方法及别名(delete方法)
<script>import axios from 'axios'export default { name: 'axios2-2', created() { let data = { id: 12 } // delete请求 axios.delete('/delete', { params: { // 请求参数拼接在url上 id: 12 } }).then(res => { .转载 2021-09-29 20:55:07 · 3339 阅读 · 0 评论 -
如何使用 WebRTC 和 Node 实现视频会议
WebRTC介绍WebRTC(Web Real Time Communication)是一个开源项目,可以实现浏览器之间的点对点通信。换句话说,WebRTC 允许您通过 Web 交换任何类型的媒体(例如视频、音频和数据),而无需任何所需的插件或框架。浏览器之间的直接通信可以提高性能并减少延迟时间,因为客户端不需要通过服务器不断发送和接收消息。例如,我们可以使用WebSockets连接两个客户端,但服务器必须如下图所示路由它们的消息:相比之下,WebRTC 只需要一个服务器来建立和控制客户端的转载 2021-09-29 14:36:06 · 940 阅读 · 0 评论 -
uni-app小程序聊天表情发送+获取input光标位置
uni-app小程序聊天表情发送+获取input光标位置直接上代码,懒得讲了emoji表情图片大全需要什么自己可以复制过来使用https://www.emojidaquan.com/http://www.fhdq.net/emoji/emojifuhao.html先看效果html代码<template> <!-- 聊天 --> <view class="consult"> ..转载 2021-09-29 14:26:08 · 3584 阅读 · 1 评论 -
详解Vue响应式原理
摘要:搞懂Vue响应式原理!作者:浪里行舟 原文:深入浅出Vue响应式原理Fundebug经授权转载,版权归原作者所有。前言Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。----官方文档本文将针对响应式原理做一个详细介绍,并且带你实现一个基础版的响应式系统。本文的代码请猛戳Github博客什么是响应式我们.转载 2021-09-27 14:40:39 · 1062 阅读 · 0 评论 -
理解Vue的设计思想实现vue
MVVM框架的三要素:数据响应式、模板引擎及其渲染 数据响应式:监听数据变化并在视图中更新 Object.defineProperty() Proxy 模版引擎:提供描述视图的模版语法 插值:{{}} 指令:v-bind,v-on,v-model,v-for,v-if 渲染:如何将模板转换为html 模板 => vdom => dom 数据响应式原理数据变更能够响应在视...转载 2021-09-24 10:58:06 · 314 阅读 · 0 评论 -
用zrender实现工作流图形化设计(附范例代码)
公司研发的管理系统有工作流图形化设计和查看功能,这个功能的开发历史比较久远。在那个暗无天日的年月里,IE几乎一统江湖,所以顺理成章地采用了当时红极一时的VML技术。后来的事情大家都知道了,IE开始走下坡路,VML这个技术现在早已灭绝,导致原来的工作流图形化功能完全不能使用,所以需要采用新技术来重写工作流图形化功能。多方对比之后,决定采用zrender库来实现(关于zrender库的介绍,请看http://ecomfe.github.io/zrender/),花了一天的时间,终于做出了一个大致的效果模转载 2021-09-13 10:36:14 · 611 阅读 · 0 评论 -
一次性讲明白vue插槽slot
我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件,但是在实际使用这个组件的时候却又不能完全的满足需求,我希望在这个组件中添加一点东西,这时候我们就需要用到插槽来分发内容。以下文章来自掘金 作者:JH30K 链接:https://juejin.im/post/5ed61cd86fb9a047a43444d6一、前言vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的呢?它要解决什么场景的问题呢? 我们在构建页面过程中一般会...转载 2021-09-13 10:30:38 · 140 阅读 · 0 评论 -
DIff算法看不懂就一起来锤我(带图)
前言面试官:"你了解虚拟DOM(Virtual DOM)跟Diff算法吗,请描述一下它们";我:"额,...鹅,那个",完了????,突然智商不在线,没组织好语言没答好或者压根就答不出来;所以这次我总结一下相关的知识点,让你可以有一个清晰的认知之余也会让你在今后遇到这种情况可以坦然自若,应付自如,游刃有余:相关知识点: 虚拟DOM(Virtual DOM): 什么是虚拟dom 为什么要使用虚拟dom 虚拟DOM库 DIFF算法:转载 2021-09-09 19:17:00 · 160 阅读 · 0 评论