Vue源码学习(七):合并生命周期(混入Vue.Mixin)
好家伙,
1.使用场景
现在来,来想一下,作为一个使用Vue的开发者,假设现在我们要使用created(),我们会如何使用
1.1. .vue文件中使用
<template>
<div>
<h1>{{ me age...[2023/9/20]
window 安装多个低版本chrome测试
最近在用next13做一个简单的项目,需要兼容chrome 60+以上版本,为了方便测试,特意在公司的台式机上安装了低版本的chrome。
这里简单记录下高版本覆盖低版本的问题,这个方法不影响Windows系统内已安装的Chrome。
下载对应的版本
首先下载你想要的chrome版本,我是在...[2023/9/19]
每日一题:AJAX进度监控(附可运行源码)每日一题:AJAX进度监控(附可运行源码)
1、什么是AJAX
AJAX(Asynchronous JavaScript and XML)是一种用于在网页上进行异步通信的技术。它允许在不刷新整个页面的情况下,通过在后台与服务器进行数据交换来更新部分网页内容。
传统的网页开发中,当用户与网页进行交互时,需要刷新整个页面才能获取最新的内容。...[2023/9/19]
🖖少年,该升级 Vue3 了!🖖少年,该升级 Vue3 了!
你好,我是 Kagol。
前言
根据 Vue 官网文档的说明,Vue2 的终止支持时间是 2023 年 12 月 31 日,这意味着从明年开始:
Vue2 将不再更新和升级新版本,不再增加新特性,不再修复缺陷
虽然 Vue3 正式版本已经发布快3年了,但据我了解,现在依然还有很多业务...[2023/9/19]
一文弄懂TypeScript中的混合(Mixin)
1.前言
由于TypeScrip中的类不支持多继承,所以引入了混合(Mixin)的特性,可以间接实现多继承的效果。
2.正文
声明一个汽车类Vehicle,它有drive方法
cla Vehicle {
drive(): void {
console.log(''驾驶'...[2023/9/19]
vue3探索——pinia高阶使用
以下是一些 Pinia 的其他高阶功能:
storeToRefs():响应式解构仓库,保证解构出来的数据是响应式的数据。
状态持久化:Pinia 并没有内置的状态持久化功能,但你可以使用第三方库或自定义插件来实现状态的持久化。例如,你可以使用 localStorage 或&...[2023/9/18]
Vue源码学习(六):(支线)渲染函数中with(),call()的使用以及一些思考
好家伙,
昨天,在学习vue源码的过程中,看到了这个玩意
嘶,看不太懂,研究一下
1.上下文
这段出现vue模板编译的虚拟node部分
export function renderMixin(Vue) {
Vue.prototype._c = f...[2023/9/15]
现代 CSS 解决方案:原生嵌套(Nesting)现代 CSS 解决方案:原生嵌套(Nesting)
很早之前,就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?,彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段,而今天(2023-09-02),CSS 原生嵌套 Nesting 终于成为了既定的规范!
CS...[2023/9/15]
JS深入学习笔记 - 第一章.构造函数原型与原型链
1.构造函数和原型
1.1 概述
在典型的 OOP语言中(如Java),都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS并没有引入类的概念。
在ES6之前,对象不是基于类创建的,而是一种称为构建函数的特殊函数来定义对象和它们的特征。
有三种创建对...[2023/9/14]
监听数组Array变化或Obj属性变化
工作中经常会遇到监听数组发生变化时执行相应的回调触发逻辑,客户应用场景中需要实现对象变量的动态监听,当变量发生变化时触发回调函数,实现事件发送等应用场景。 通常由以下两种方式实现需求 一.通过改变对象原型prototype方法实现回调监听
创建一...[2023/9/13]
试试用Markdown来设计表单
相信很多后端开发。对于前端知识是比较零碎的,所以很多时候写表单这样的工作,一般就是复制黏贴,然后改改字段。对于HTML格式,一直觉得比较杂乱,不够简洁。
最近TJ发现了一个有趣的小工具:Create HTML Form。
看看上面它的Slogan,是不是很有意思?居然可以通过Markdo...[2023/9/13]
15.3K Star,超好用的开源协作式数字白板:tldraw
大家好,我是TJ
今天给大家推荐一个开源协作式数字白板:tldraw。
tldraw的编辑器、用户界面和其他底层库都是开源的,你可以在它的开源仓库中找到它们。它们也在NPM上分发,提供开发者使用。您可以使用tlDraw为您的产品创建一个临时白板,或者将其作为构建自己应用的工具来使用。
在...[2023/9/13]
每日一题:吃透大文件上传问题(附可运行的前后端源码)
大文件上传
前言
在日常开发中,文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到Web服务器上,这在许多场景下都是必需的,比如网盘上传、头像上传等。
但是当我们需要上传比较大的文件的时候,容易碰到以下问题:
上传时间比较久
中间一旦出错就需要重新上传
一般服务端会对文...[2023/9/13]
Vue vs React:你需要知道的一切
Vue 和 React 是创建 JavaScript 网络应用程序最常用的两种工具。但我们该如何在两者之间做出选择呢?在本篇 Vue 与 React 的对比中,我们将尝试找出答案。我们将回顾每种工具的优缺点,提供选择使用哪种工具的技巧,并帮助你开始使用。
总览
什么是Vue?
Vue...[2023/9/11]
js详细讲解放大镜的实现
实现放大镜的整体思路
1.当鼠标放在图片上的时候,出现蒙层。
2.出现蒙层,让鼠标在蒙层中心
3.限制蒙层移动的范围
4.放大镜移动
最终实现的效果
鼠标放上去的时候,出现一个蒙层。
蒙层的移动范围只能在图片里,不能超出范围。
移动蒙层时,右侧会出现图片的放大部分。
移除图片的范围,放大镜消...[2023/9/10]
Vue.js 官方脚手架 create-vue 是怎么实现的?
Vue.js 官方脚手架 create-vue 是怎么实现的?
摘要
本文共分为四个部分,系统解析了vue.js 官方脚手架 create-vue 的实现细节。
第一部分主要是一些准备工作,如源码下载、项目组织结构分析、依赖分析、功能点分析等;
第二部分分析了 create-vue 脚手...[2023/9/10]
vue3探索——5分钟快速上手大菠萝pinia
温馨提示:本文以vue3+vite+ts举例,vite配置和ts语法侧重较少,比较适合有vuex或者vue基础的小伙伴们儿查阅。
安装pinia
yarn
yarn add pinia
npm
npm install pinia
pnpm
pnpm add pinia
...[2023/9/10]
vue + canvas 实现九宮格手势解锁器
前言
专栏分享:vue2源码专栏,vue router源码专栏,玩具项目专栏,硬核??推荐??
欢迎各位 ITer 关注点赞收藏??????
此篇文章用于记录柏成从零开发一个canvas九宮格手势解锁器的历程,最终效果如下:
设置图案密码时,需进行两次绘制图案操作,若两次绘制图...[2023/9/9]
推荐一个react上拉加载更多插件:react-infinite-scroller推荐一个react上拉加载更多插件:react-infinite-scroller
在开发网页和移动应用时,经常需要处理大量数据的展示和加载。如果数据量非常大,一次性全部加载可能会导致页面卡顿或崩溃。为了解决这个问题,我们可以使用无限滚动(Infinite Scroll)的技术。React 提供了一个方便的组件库,即 react-infinite-scroller,它可以帮助我...[2023/9/9]
Vue源码学习(三):<templete>渲染第二步,创建ast语法树Vue源码学习(三):<templete>渲染第二步,创建ast语法树
好家伙,书接上回
在上一篇Vue源码学习(二):<templete>渲染第一步,模板解析中,我们完成了模板解析
现在我们继续,将模板解析的转换为ast语法树
1.前情提要
代码已开源https: github.com/Fattiger4399/a...[2023/9/9]
手把手教你使用Vite构建第一个Vue3项目
写在前面
在之前的文章中写过“如何创建第一个vue项目”,但那篇文章写的是创建vue2的 项目。
传送门如何创建第一个vue项目
打开Vue.js官网:https: cn.vuejs.org/,我们会发现Vue 2 将于 2023 年 12 月 31 日停止维护
虽然Vue2的项目还不...[2023/9/6]
从壹开始前后端开发【.Net6+Vue3】(二)前端创建
项目名称:KeepGoing(继续前进)
介绍
工作后,学习的脚步一直停停走走,希望可以以此项目为基础,可以不断的迫使自己不断的学习以及成长
将以Girvs框架为基础,从壹开始二次开发一个前后端管理框架
在这过程中一步步去学习使用到的技术点,也同时会将在此过程中遇到的问题进行分享
项目地址...[2023/9/6]
TypeScript中Class基础使用
TypeScript是一种静态类型的JavaScript超集,它提供了许多增强的功能,其中之一就是对面向对象编程的支持。在TypeScript中,我们可以使用Cla 来定义类,这使得我们能够更加结构化地组织代码并使用面向对象的思想进行开发。
Cla 是一种构造函数的语法糖,允许我们定义一个对象...[2023/9/6]
stencilJs学习之构建 Drawer 组件
前言
在之前的学习中,我们已经掌握了 stencilJs 中的一些核心概念和基础知识,如装饰器 Prop、State、Event、Listen、Method、Component 以及生命周期方法。这些知识是构建复杂组件和应用的基础,而抽屉组件是一个很好的示例,能够综合运用这些知识,让我们更深入地...[2023/9/1]
React Native实现Toast轻提示和loading - Lanny-Chung
React Native 封装Toast
前言
使用react native的小伙伴都知道,官方并未提供轻提示组件,只提供了ToastAndroid API,顾名思义,只能再安卓环境下使用,对于ios就爱莫能助,故此,只能通过官方的核心组件,自行封装,实现Toast功能
实现
创建文件
...[2023/9/1]
《最新出炉》系列入门篇-Python+Playwright自动化测试-15-playwright处理浏览器多窗口切换 - 北京-宏哥
1.简介
浏览器多窗口的切换问题相比大家不会陌生吧,之前宏哥在java+selenium系列文章中就有介绍过。大致步骤就是:使用selenium进行浏览器的多个窗口切换测试,如果我们打开了多个网页,进行网页切换时,我们需要先获取各个页面的句柄,通过句柄来区分各个页面,然后使用switch_to....[2023/8/30]
ECharts图表动态修改series显示隐藏ECharts图表动态修改series显示隐藏
目录1、前言2、思路3、实现
1、前言
最近做的大数据平台,里面很多地方用到了ECharts,其中有个功能,要求将图表分组,根据用户选择的组,来确定ECharts要显示那些线条和柱子,也就是动态的显示option.series。
2、思路
找了一下EChart的文档,发现可以通过控制o...[2023/8/30]
【NestJS系列】连接数据库及优雅地处理响应【NestJS系列】连接数据库及优雅地处理响应
前言
Node作为一门后端语言,当然也可以连接数据库,为前端提供CURD接口
我们以mysql为例,自行安装mysql
TypeORM
TypeORM 是一个ORM框架,它可以运行在 NodeJS、Browser、Cordova、PhoneGap、Ionic、React Native、Ex...[2023/8/30]
tailwindcss -原子化 CSS 框架
原子化 CSS 框架
我记得很久之前有时候为了少写些c ,我们通常会有如下的样板代码
.block {
display: block;
}
.flex {
display:flex
}
.flex-center {
align-items: center;
justify-c...[2023/8/30]
你能看到这个汉字么“ ” ?关于Unicode的私人使用区(PUA) 和浏览器端显示处理
如果你现在使用的是chrome查看那么你是看不到我标题中的汉字的,显示为一个小方框,但是你使用edge查看的话,这个字就能正常的显示出来,不信你试试!
本故事源于我在做数据过程中遇到Unicode编码中的私人使用区PUA编码的汉字,然后导入到产品端后他们说有些汉字是乱码无法显示,然后针对这个问...[2023/8/29]
震惊!CSS 也能实现碰撞检测?
本文,我们将一起学习,使用纯 CSS,实现如下所示的动画效果:
上面的动画效果,非常有意思,核心有两点:
小球随机做 X、Y 方向的直线运动,并且能够实现碰撞到边界的时候,实现反弹效果
小球在碰撞边界的瞬间,颜色发生随机的变化
嗯?很有意思的效果。看上去,我们好像使用 CSS 实现了...[2023/8/29]
【NestJS系列】核心概念:Middleware中间件【NestJS系列】核心概念:Middleware中间件
前言
用过expre 与koa的同学,对中间件这个概念应该非常熟悉了,中间件可以拿到Request、Response对象和next函数.
一般来讲中间件有以下作用:
执行任何代码
对请求与响应拦截并改造
结束request-response周期
通过next()调用下一个中间件
如果当前中间...[2023/8/29]
vue3 组合式 api 单文件组件写法
1 Vue3 组合式 API 的基本原理和理念
1.1 Vue3 中的 Composition API
Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性。相比于 Vue2 的 Options API,Composit...[2023/8/18]
搞懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref... - 公众号-web前端进阶
在 Vue3 中,有许多与响应式相关的函数,例如 toRef、toRefs、isRef、unref 等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法,让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题。
ref()
大家对于 ref ...[2023/8/18]
vue 实现 pdf 预览功能vue 实现 pdf 预览功能
1 技术背景
1.1 Vue.js 简介和特点
Vue.js 是一种用于构建用户界面的渐进式框架。它具有以下特点:
易学易用:Vue.js 的 API 设计简单直观,使得开发者可以快速上手。
响应式数据绑定:Vue.js 使用了响应式的数据绑定机制,当数据发生变化时,页面会自动更新。
组件化开...[2023/8/18]
JS逆向实战21——某查查webpack密码加密
声明
本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!
网站
aHR0cHM6Ly93d3cucWNjLmNvbS8=
前言
阅读前 请先阅读下我的另一篇文章 看看别的w...[2023/8/16]
【技术积累】Vue.js中的CSS过渡【一】
CSS过渡是什么
在Vue中,可以使用<transition>组件来实现CSS过渡效果。CSS过渡是指在元素的状态发生改变时,通过添加或移除CSS类来实现平滑的过渡效果。
<transition>组件可以包裹需要过渡的元素,并通过name属性指定过渡效果的名...[2023/8/16]
uniapp封装接口
1 为什么需要封装接口
封装接口是为了提高开发效率、增加代码复用性和提升可维护性。下面对这些原因进行详细解释:
1.1 开发效率
开发效率:减少代码量,简化调用过程
通过封装接口,可以将一些常见的操作或功能进行抽象和封装,从而减少重复编写相似代码的工作量。封装后的接口可以直接调用,无需每...[2023/8/16]
表格JS实现在线Excel的附件上传与下载
摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
前言
在本地使用Excel时,经常会有需要在Excel中添加一些附件文件的需求,例如在Excel中附带一些Word,CAD图等等。同样的,类比到Web端...[2023/8/16]
Vue 路由懒加载Vue 路由懒加载
1 路由懒加载的原理
路由懒加载是一种优化技术,用于延迟加载应用程序中的路由组件。它可以提高初始加载速度并减少资源消耗,特别适用于大型单页应用。
1.1 为什么要使用路由懒加载
当应用程序包含多个页面和路由时,如果在初始加载时将所有路由组件都打包到一个文件中,会导致初始加载时间变长,并且用户可...[2023/8/14]
form 表单恢复初始数据
1 表单数据的保存和恢复方法
1.1 前端数据保存方法
在前端,我们可以使用两种方法来保存表单数据:LocalStorage 和 Cookie。
使用 LocalStorage 保存数据:LocalStorage 是浏览器提供的一种本地存储机制,它允许将数据以键值对的形式存储在用户的浏览器中。...[2023/8/14]
【技术实战】Vue功能样式实战【六】
需求实战一
样式展示
代码展示
<template>
<transition name="fade-in" appear>
<ARow v-if="show">
<ACol>
...[2023/8/14]
从Element日期组件源码中学到的两个工具方法 - xingba-coder
最近翻到 ElementUI 的日期组件源码,看到一些处理日期的工具方法,挺有意思,平常没有注意到,特此记录下来。
获取当前日期的前一天,后一天
export const prevDate = function(date, amount = 1) {
return new Date(dat...[2023/8/14]
记录一次前端表格选型过程
摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
客户需求:
最近,接到一个客户项目,前期沟通时,客户说,我们日常基本都是使用Excel来做一些信息收集。但是每次收集信息时,都需要文件传来传去,十分麻烦...[2023/8/14]
并发工具类Phaser
前言
在面试这一篇我们介绍过CountDownLatch和CyclicBarrier,它们都是jdk1.5提供的多线程并发控制类,内部都是用AQS这个同步框架实现。
在我们的实际项目中,有很多场景是需要从数据库查询一批数据,多线池执行某些操作,并且要统计结果,我们对这个过程做了一些封装,由于要...[2023/8/11]
使用 Vue 实现页面访问拦截
目录1 Vue 路由与导航守卫1.1 Vue 路由简介1.2 导航守卫概述2 实现访问拦截的核心概念2.1 路由守卫介绍2.1.1 前置守卫(beforeEach)2.1.2 后置钩子(afterEach)2.1.3 解析守卫(beforeResolve)2.2 鉴权逻辑设计2.3 登录验证机制...[2023/8/11]
vue3 + ElementPlus 封装函数式弹窗组件
需求场景:弹窗组件需要支持自定义的插槽内容,删除的弹窗也要使用这个组件,只是样式不一样而已,希望在父组件使用删除弹窗的时候直接调用某个方法就可以显示弹窗
组件模拟 cuDialog
假设我的弹窗组件有以下的props和事件
dialogVisible:控制弹窗显示和隐藏
title:弹窗...[2023/8/11]
【动画进阶】神奇的 3D 磨砂玻璃透视效果【动画进阶】神奇的 3D 磨砂玻璃透视效果
最近,群友分享了一个很有意思的效果:
原效果的网址:frosted-gla 。该效果的几个核心点:
毛玻璃磨砂效果
卡片的 3D 旋转跟随效果
整体透明度和磨砂感、以及卡片的 3D 形态会随着用户移动鼠标而进行动态变化
原效果实现的较为复杂,并且实际体验卡顿感较强。本文,我们就将尝试...[2023/8/9]
手写 Vuex4 源码 - xingba-coder手写 Vuex4 源码 - xingba-coder
本文首发于掘金,未经许可禁止转载
Vuex4 是 Vue 的状态管理工具,Vuex 和单纯的全局对象有以下两点不同:
Vuex 的状态存储是响应式的
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地 提交 (commit) mutation。
本文手...[2023/8/9]
前端黑魔法 —— 隐藏网络请求的调用栈
前言
浏览器网络控制台会记录每个请求的调用栈(Initiator/启动器),可协助调试者定位到发起请求的代码位置。
为了不让破解者轻易分析程序,能否隐藏请求的调用栈?
事件回调
事实上,使用之前 《如何让 JS 代码不可断点》 文中的方案,通过「内置回调」到「原生函数」,即可隐藏请求的调...[2023/8/7]