Vue学习笔记(十一):路由管理
pre { line-height: 125% }
td.linenos .normal { color: inherit; background-color: rgba(0, 0, 0, 0); padding-left: 5px; padding-right: 5px }
span.linen...[2023/10/16]
vue 甘特图(三):甘特图右侧内容拖动展示
vue3 甘特图(三):甘特图右侧内容拖动展示内容
解决因多个项目周期跨度不同,在一页屏幕里展示不完全,需要通过拖动甘特图下方的滚动条,去查看对应时间段内的内容
拖拽滚动视图,展示对应时间甘特图
构思,通过监听内容拖拽的距离,同时使滚动条滑动相同距离,从而达到效果。
拖拽滚...[2023/10/11]
Vue学习笔记(七):绑定css样式Vue学习笔记(七):绑定css样式
pre { line-height: 125% }
td.linenos .normal { color: inherit; background-color: rgba(0, 0, 0, 0); padding-left: 5px; padding-right: 5px }
span.linen...[2023/10/9]
vue上通过krpano.js实现360全景图vue上通过krpano.js实现360全景图
首先贴出一些XML对应的函数,文件内容都有注释说明,
前端代码读取xml文件代码
初始化
window.embedpano({
xml: 0,
target: ''pano'',
html5: ''only'',
mob...[2023/10/9]
Vue源码学习(九):响应式前置:实现对象的依赖收集(dep和watcher)
好家伙,这是目前为止最绕的一章,也是十分抽象的一章
由于实在太过抽象,我只能用一个不那么抽象的实例去说服我自己
完整代码已开源https: github.com/Fattiger4399/analytic-vue.git
1.我们要做什么?
来看这个例子,
index.h...[2023/10/9]
vue项目使用lodash节流防抖函数问题与解决
背景
在lodash函数工具库中,防抖_.debounce和节流_.throttle函数在一些频繁触发的事件中比较常用。
防抖函数_.debounce(func, [wait=0], [options=])
创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 ...[2023/10/9]
Vue源码学习(七):合并生命周期(混入Vue.Mixin)
好家伙,
1.使用场景
现在来,来想一下,作为一个使用Vue的开发者,假设现在我们要使用created(),我们会如何使用
1.1. .vue文件中使用
<template>
<div>
<h1>{{ me age...[2023/9/20]
🖖少年,该升级 Vue3 了!
你好,我是 Kagol。
前言
根据 Vue 官网文档的说明,Vue2 的终止支持时间是 2023 年 12 月 31 日,这意味着从明年开始:
Vue2 将不再更新和升级新版本,不再增加新特性,不再修复缺陷
虽然 Vue3 正式版本已经发布快3年了,但据我了解,现在依然还有很多业务...[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]
Vue.js 官方脚手架 create-vue 是怎么实现的?
Vue.js 官方脚手架 create-vue 是怎么实现的?
摘要
本文共分为四个部分,系统解析了vue.js 官方脚手架 create-vue 的实现细节。
第一部分主要是一些准备工作,如源码下载、项目组织结构分析、依赖分析、功能点分析等;
第二部分分析了 create-vue 脚手...[2023/9/10]
vue3探索——5分钟快速上手大菠萝piniavue3探索——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 实现九宮格手势解锁器vue + canvas 实现九宮格手势解锁器
前言
专栏分享:vue2源码专栏,vue router源码专栏,玩具项目专栏,硬核??推荐??
欢迎各位 ITer 关注点赞收藏??????
此篇文章用于记录柏成从零开发一个canvas九宮格手势解锁器的历程,最终效果如下:
设置图案密码时,需进行两次绘制图案操作,若两次绘制图...[2023/9/9]
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】(二)前端创建从壹开始前后端开发【.Net6+Vue3】(二)前端创建
项目名称:KeepGoing(继续前进)
介绍
工作后,学习的脚步一直停停走走,希望可以以此项目为基础,可以不断的迫使自己不断的学习以及成长
将以Girvs框架为基础,从壹开始二次开发一个前后端管理框架
在这过程中一步步去学习使用到的技术点,也同时会将在此过程中遇到的问题进行分享
项目地址...[2023/9/6]
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]
【技术积累】Vue.js中的CSS过渡【一】
CSS过渡是什么
在Vue中,可以使用<transition>组件来实现CSS过渡效果。CSS过渡是指在元素的状态发生改变时,通过添加或移除CSS类来实现平滑的过渡效果。
<transition>组件可以包裹需要过渡的元素,并通过name属性指定过渡效果的名...[2023/8/16]
uniapp封装接口
1 为什么需要封装接口
封装接口是为了提高开发效率、增加代码复用性和提升可维护性。下面对这些原因进行详细解释:
1.1 开发效率
开发效率:减少代码量,简化调用过程
通过封装接口,可以将一些常见的操作或功能进行抽象和封装,从而减少重复编写相似代码的工作量。封装后的接口可以直接调用,无需每...[2023/8/16]
Vue 路由懒加载
1 路由懒加载的原理
路由懒加载是一种优化技术,用于延迟加载应用程序中的路由组件。它可以提高初始加载速度并减少资源消耗,特别适用于大型单页应用。
1.1 为什么要使用路由懒加载
当应用程序包含多个页面和路由时,如果在初始加载时将所有路由组件都打包到一个文件中,会导致初始加载时间变长,并且用户可...[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]
使用 Vue 实现页面访问拦截使用 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]
手写 Vuex4 源码 - xingba-coder
本文首发于掘金,未经许可禁止转载
Vuex4 是 Vue 的状态管理工具,Vuex 和单纯的全局对象有以下两点不同:
Vuex 的状态存储是响应式的
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地 提交 (commit) mutation。
本文手...[2023/8/9]
但因热爱,愿迎万难,OpenTiny 社区增加一枚前端程序媛贡献者🎉
我们非常高兴地宣布,OpenTiny Vue Playground 正式上线!
链接:https: opentiny.github.io/tiny-vue-playground/
在此非常感谢 xiaoy 同学对 OpenTiny Vue Playground 项目的贡献!
xiaoy 同...[2023/8/4]
在Volo.Abp微服务中使用SignalR
假设需要通过SignalR发送消息通知,并在前端接收消息通知的功能
创建SignalR服务
在项目中引用
abp add-package Volo.Abp.AspNetCore.SignalR
在Module文件中添加对模块依赖
[DependsOn(
...
type...[2023/8/4]
vue + canvas 实现涂鸦面板
前言
专栏分享:vue2源码专栏,vue router源码专栏,玩具项目专栏,硬核 ?? 推荐 ??
欢迎各位 ITer 关注点赞收藏 ??????
此篇文章用于记录柏成从零开发一个canvas涂鸦面板的历程,最终效果如下:
介绍
我们基于 canvas 实现了一款简单的涂鸦面板,...[2023/8/4]
文档、视频、图片上传(点击、拖拽、批量导入)要???😵?💫怎么实现?!🤔
@目录Excel上传和图片视频上传Excel上传页面中的使用图片和视频上传的错误提醒以及逻辑处理上传进度处理
Excel上传和图片视频上传
Excel上传
excel的上传其实分为两步:
1、下载excel模板
2、上传excel模板
在项目中涉及到excel的业务,基本上都要先下载e...[2023/7/28]
【技术实战】Vue技术实战【四】
需求实战一
效果展示
代码展示
<template>
<ARow>
<ACol>
<a-statistic-countdown
:value="deadline"
...[2023/7/28]
Element-ui源码解析(二):最简单的组件Button
好家伙,为了有足够的能力去开发组件,先研究一下别人的组件
开始抄袭模仿我们的行业标杆element-ui
找到Button组件的源码
只有三个文件,看上去非常易读,开搞
其中最重要的部分,自然是button.vue
<...[2023/7/26]
【技术积累】Vue.js中的核心知识【四】
Vue的生命周期
Vue中的生命周期是指组件从创建到销毁的整个过程中,会触发一系列的钩子函数
Vue2中的生命周期
Vue2中的生命周期钩子函数是在组件的不同阶段执行的特定函数。这些钩子函数允许开发者在组件的不同生命周期阶段执行自定义的逻辑。
Vue...[2023/7/24]
【技术实战】Vue技术实战【一】
需求实战一
组件来源
ant-design-vue
Button 按钮
Progre 进度条
效果展示
代码展示
<template>
<ARow>
<ACol>
<div style=...[2023/7/24]
vue基本操作[上] 续更----让世界感知你的存在
Vue引用js文件的多种方式
1.vue-cli webpack全局引入jquery
(1)首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。)
(2)在webpack.ba...[2023/7/19]
【技术积累】Vue.js中的事件【一】
Vue中的事件是什么
在Vue.js中,事件是用于处理用户交互的重要机制。Vue.js提供了一系列的事件处理方法和指令,使开发者能够方便地处理用户的各种操作。
1. 事件绑定:Vue.js通过v-on指令来绑定事件。可以在HTML标签上使用v-on指令来监听特定的事件,并在触发事件时执行相应的...[2023/7/17]
前端Vuer,请收好这份《Vue组件单元测试》宝典,给自己多一些安全感前端Vuer,请收好这份《Vue组件单元测试》宝典,给自己多一些安全感
大家好,我是 Kagol。
作为一名前端,在做业务开发的过程中,你是否曾经:
因为担心上线之后出bug,而反复手工验证自己负责的模块
不敢修改现有的“屎山”(别人写的或者是自己1年前写的)代码,从而不断地编写if/else
发现业务中有很多重复的代码,每次一改好多地方都要改,但又不敢重构,担...[2023/7/14]
Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能
总结/朱季谦
最近通过Vue + Element ui实现了动态表单功能,该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时,直接拿来应用。
简化的页面效果图如下:
最开始,我是用了纯粹的表格形式,后来发现,这种...[2023/7/12]
【技术积累】Vue.js中的基础概念与语法【一】
写在前面
学习Vue之前最好有前端三驾马车的基础【HTML+CSS+JavaScript】
笔者接了一个从头开发的Vue项目,由于公司急着要,没有时间慢慢像在学校里学了,只能边学边做,现在项目雏形已经做的差不多了,因此正好以自己的方式来写笔记
笔者接项目的时候Vue零基础,前端基础也是除了d...[2023/6/26]
【保姆级教程】Vue项目调试技巧
前言
在Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要,debug是必备技能。
同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。
本文主要讲解针对Vue项目进行调试的 ...[2023/6/21]
手牵手带你实现mini-vue手牵手带你实现mini-vue
1 前言
随着 Vue、React、Angularjs 等框架的诞生,数据驱动视图的理念也深入人心,就 Vue 来说,它拥有着双向数据绑定、虚拟dom、组件化、视图与数据相分离等等造福程序员的优点,那 Vue 的双向数据绑定实现原理是什么样的,如果让我们自己去实现一个这样的双向数据绑定要怎么做呢...[2023/6/19]
Vue3从入门到精通(二)
vue3 侦听器
在Vue3中,侦听器的使用方式与Vue2相同,可以使用watch选项或$watch方法来创建侦听器。不同之处在于,Vue3中取消了immediate选项,同时提供了新的选项和API。
创建侦听器
可以使用watch选项或$watch方法来创建侦听器,语法与Vue2相...[2023/6/9]
Electron-ChatGPT桌面端ChatGPT实例|electron25+vue3聊天AI模板EXE
基于electron25+vite4+vue3仿制chatgpt客户端聊天模板ElectronChatGPT。
electron-chatgpt 使用最新桌面端技术Electron25.x结合Vite4.x全家桶技术开发跨端模仿ChatGPT智能聊天程序模板。支持经典+分栏两种布局、暗黑+明亮...[2023/6/9]
Vue自定义指令-让你的业务开发更简单Vue自定义指令-让你的业务开发更简单
1、使用场景
在日常开发中,我们会将重复代码抽象为一个函数或者组件,然后在需要时调用或者引入。但是,对于某些功能,这种方法可能不够优雅或者不够灵活。例如,我们可能需要在DOM元素上添加一些自定义属性或者绑定一些事件,这些操作可能难以通过函数或组件来实现。这时,自定义指令就派上用场了。
2、简介
...[2023/6/8]
Vue3从入门到精通(一)
Vue3简介
Vue3是Vue.js的最新版本,于2020年9月18日正式发布。Vue3相比Vue2有很多改进和优化,包括但不限于:
更快的渲染速度:Vue3通过使用Proxy代理对象和优化虚拟DOM算法等方式,提高了渲染性能。
更小的体积:Vue3的体积比Vue2更小,打包后的文件...[2023/6/8]
封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统,基于element-ui很丰富的组件生态,我们可以很快速的开发管理后台系统的页面(管理后台系统的页面也不复杂,大多都是分页查询类需求和增删改查)。但一个前端框架有优点,就必然会有一些缺点或bug存在...[2023/5/25]
vue平铺日历组件之按住ctrl、shift键实现跨月、跨年多选日期的功能
已经好久没有更新过博客了,大概有两三年了吧,因为换了工作,工作也比较忙,所以也就没有时间来写技术博客,期间也一直想写,但自己又比较懒,就给耽误了。今天这篇先续上,下一篇什么时候写,我也不知道,随心所欲、随遇而安、安之若素、素不相识也就无所谓了吧。
一开始看到这个功能需求,我也很懵逼,因为从来没...[2023/5/25]
vue请求后端数据和跨域问题
最近遇到的一个问题 后端写好的接口,前端怎么获取数据
这是我后端的接口:GET 接口
这是我前端运行的项目地址:
简单使用:
咱门前端使用 颇受好评的 axios 来发起请求
这是它的官网:https: www.axios-http.cn/
不过要在vue中使用它,就需要先安装...[2023/5/17]