vue 甘特图(三):甘特图右侧内容拖动展示

vue3 甘特图(三):甘特图右侧内容拖动展示内容 解决因多个项目周期跨度不同,在一页屏幕里展示不完全,需要通过拖动甘特图下方的滚动条,去查看对应时间段内的内容 拖拽滚动视图,展示对应时间甘特图 构思,通过监听内容拖拽的距离,同时使滚动条滑动相同距离,从而达到效果。 //拖拽滚动视图 const s

Vue学习笔记(七):绑定css样式

1 绑定class样式¶ vue为HTML绑定css中的class样式是通过v-bind实现的。 1.1 绑定单个class¶ 把需要绑定的样式class名赋值给一遍变量,然后通过变量v-bind绑定class属性,绑定后的class并不会覆盖原来的class属性,而是与原来的class进行叠加。如

vue项目使用lodash节流防抖函数问题与解决

背景 在lodash函数工具库中,防抖_.debounce和节流_.throttle函数在一些频繁触发的事件中比较常用。 防抖函数_.debounce(func, [wait=0], [options=]) 创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后

Vue源码学习(九):响应式前置:实现对象的依赖收集(dep和watcher)

好家伙,这是目前为止最绕的一章,也是十分抽象的一章 由于实在太过抽象,我只能用一个不那么抽象的实例去说服我自己 完整代码已开源https://github.com/Fattiger4399/analytic-vue.git 1.我们要做什么? 来看这个例子, index.html setTimeou

vue上通过krpano.js实现360全景图

首先贴出一些XML对应的函数,文件内容都有注释说明, 前端代码读取xml文件代码 // 初始化 window.embedpano({ xml: 0, target: 'pano', html5: 'only', mobilescale: 1.0, passQueryParameters: 'star

Vue框架快速上手

Vue基础 vue指令 内容绑定 v-text 设置标签的内容一般通过双大括号的表达式{{ }}去替换内容 {{ hello }} v-html 与v-text类似区别在于html中的结构会被解析为标签设置元素的innerHTML,v-text只会解析文本 事件绑定 v-on 可以简写为@,绑定的方

Vue源码学习(八):生命周期调用

好家伙, Vue源码学习(七):合并生命周期(混入Vue.Mixin) 书接上回,在上一篇中,我们已经实现了合并生命周期 现在,我们要在我们的初始化过程中,注册生命周期 1.项目目录 红框为本篇涉及到的.js文件 2.先来看 /utils/index.js export const HOOKS =[

Vue + SpreadJS 实现高性能数据展示与分析

本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 Vue + SpreadJS 实现高性能数据展示与分析 在前端开发领域,表格一直都是一个高频使用的组件,尤其是在中后台和数据分析场景下。但当一屏展示数据超过1000条数

2023年Vue开发中的8个最佳工具

前言 Vue.js,一款当今非常流行的基于JavaScript的开源框架,旨在构建动态的可交互应用。 Vue.js以其直观的语法和灵活的架构而广受全球开发者的欢迎和赞誉。随着时间的推移,Vue不断进化,为开发者提供更多优秀的工具,以提高他们的效率,构建卓越的应用。 在本文中,小编将为大家介绍八款适用

vue 中安装并使用echart

本文为博主原创,转载请注明出处: 1.安装echart 依赖: 安装命令: npm install echarts --save 在vscode 的终端窗口进行执行,如图所示: 执行完之后,查看 项目中的echart 版本依赖是否添加成功: package-lock.json 中有具体的echart

Vue 中 Promise 的then方法异步使用及async/await 异步使用总结

转载请注明出处: 1.Promise 的 then 方法使用 then 方法是 Promise 中 处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结束,也就不会等到他返回一个有效数据之后再进行下一步处理; 想了解 Promise 的使用,可以看这篇文章: ES6 中 Prom

使用 Vue 3 时应避免的 10 个错误

Vue 3已经稳定了相当长一段时间了。许多代码库都在生产环境中使用它,其他人最终都将不得不迁移到Vue 3。我现在有机会使用它并记录了我的错误,下面这些错误你可能想要避免。 使用Reactive声明原始值 数据声明在过去都是非常直接的,但是现在有很多帮助函数供我们使用。目前的规则是: 使用react

在 Vue 中控制表单输入

Vue中v-model的思路很简单。定义一个可响应式的text(通常是一个ref),然后用v-model="text"将这个值绑定到一个input上。这就创造了一个双向的数据流: 用户在输入框中输入,text会发生变化。 text发生变化,输入框的值也随之变化。 让我们看看如何在Vue 3中使用v-

Vue vs React:你需要知道的一切

Vue 和 React 是创建 JavaScript 网络应用程序最常用的两种工具。但我们该如何在两者之间做出选择呢?在本篇 Vue 与 React 的对比中,我们将尝试找出答案。我们将回顾每种工具的优缺点,提供选择使用哪种工具的技巧,并帮助你开始使用。 总览 什么是Vue? Vue趣事 什么是Re

vue中key使用的问题

前言 在vue要求在遍历的时候最好加上key,在使用过程中总有些疑问,在这里做下分析 1.不使用key的时候vue是怎么处理的 在vue2.x文档中有如下描述 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key

Vue基础语法整理

# vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 demo容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的

vue核心原理(Diff算法、虚拟dom)

核心原理&源码 Diff 算法 这里参考大佬文章:https://mp.weixin.qq.com/s/oAlVmZ4Hbt2VhOwFEkNEhw diff 算法的进化 关于 diff 算法的最经典的就是 Matt Esch 的 virtual-dom,以及 snabbdom(被整合进 vue 2

[vue] 脚手架笔记

笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放

Vue 中为什么要有nextTick?

摘要:本文将浅析nextTick的作用、使用场景和背后的原理实现,希望对大家有所帮助。 本文分享自华为云社区《Vue 中的 nextTick 有什么作用?》,作者:CoderBin。 一、什么是nextTick 先看看官方对其的定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即

将 Vue.js 项目部署至静态网站托管,并开启 Gzip 压缩

摘要:关于使用 Nginx 开启静态网站 Gzip 压缩的教程已经有很多了,但是好像没几个讲怎么在对象存储的静态网站中开启 Gzip 压缩。其实也不复杂,我们一起来看下~ 本文分享自华为云社区《将 Vue.js 项目部署至静态网站托管,并开启 Gzip 压缩》,作者:云存储开发者支持团队。 关于使用