分享7 个VUE项目用得上的JavaScript库

news2024/11/26 16:53:11

借助开源库加速VUE项目的开发进度是现代前端开发比较常见的方式,平常收集一些JavaScript库介绍,在遇到需要的时候可以信手拈来。

VUE 生态有很多不错的依赖库或者组件,是使用VUE开发前端的原因之一。

1. vueuse

这是 GitHub 上星最多的库之一,拥有超过 12.8k 颗星,这是一组基于组合式 API 的实用函数库。

它的初衷就是将一切原本并不支持响应式的 JS API 变得支持响应式,省去程序员自己写相关代码。

import { useLocalStorage, useMouse, usePreferredDark } from "@vueuse/core";

export default {
    setup() {
        // tracks mouse position
        const { x, y } = useMouse();

        // is user prefers dark theme
        const isDark = usePreferredDark();

        // persist state in localStorage
        const store = useLocalStorage("my-storage", {
            name: "Apple",
            color: "red",
        });

        return { x, y, isDark, store };
    },
};
复制代码

GitHub:github.com/vueuse/vueu…

2. vue-js-modal

这是一个易于使用、高度可定制的 Vue.js 模态库,该库支持静态和动态两种类型的模态,静态是通过模板明确定义的,动态是根据传递给“显示模态”函数的配置生成的。这个库在 Github 上有超过 4.2k 星。

3. vue-wait

这个库可以在没有任何冲突的情况下控制页面上的各种加载状态。它的核心原理是管理一个具有多个加载状态的数组(或者,可选地,一个 Vuex 存储)。集成加载器组件开始监听其注册的加载器并立即进入加载状态。这个库在 Github 上有超过 1.9k 颗星。

GitHub:github.com/f/vue-wait

4. good-table

表格是软件开发中最常用的组件之一,这是一个易于使用的强大数据表,具有高级自定义功能,包括排序、列过滤、分页、分组等。它在 GitHub 上拥有超过 2k 星。

GitHub:github.com/xaksis/vue-…

5. vue-notification

向用户显示消息是应用程序的基本功能之一,这个库将帮助构建漂亮的通知。它提供了许多功能,如动画、自定义位置、自定义样式等等。这个库在 Github 上有超过 2.3K 颗星。

GitHub:github.com/euvl/vue-no…

6. tree select

顾名思义,这是一个带有嵌套选项的多选组件。它包括许多功能,如支持嵌套选项的单选和多选、模糊匹配、异步搜索、延迟加载(仅在需要时加载深层选项的数据)等等。它在 GitHub 上拥有超过 2.6K 颗星。

GitHub:github.com/riophae/vue…

7. egjs-infinite grid

如果必须使用网格布局,那么这个库是一个很好的资源,该库用于根据网格类型无限排列包括内容的元素。

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

function getItems(nextGroupKey, count) {
    const nextItems = [];

    for (let i = 0; i < count; ++i) {
        const num = nextGroupKey * count + i;
        nextItems.push(`<div class="item"></div>`);
    }
    return nextItems;
}
const ig = new MasonryInfiniteGrid(".container", {
    gap: 5,
});

ig.on("requestAppend", (e) => {
    const nextGroupKey = (+e.groupKey || 0) + 1;

    ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
ig.renderItems();

GitHub:github.com/naver/egjs-…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/92440.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【coarse-to-fine:基于频谱和空间损失约束】

UPanGAN: Unsupervised pansharpening based on the spectral and spatial loss constrained Generative Adversarial Network &#xff08;UPanGAN&#xff1a;基于频谱和空间损失约束的生成式对抗网络的无监督全色锐化&#xff09; 研究发现&#xff0c;在大多数基于神经网…

扎根底层核心技术:OPPO发布旗舰蓝牙音频SoC芯片

OPPO自研芯片能力更进一步。 2022年12月14日&#xff0c;OPPO发布自研芯片马里亚纳MariSilicon Y&#xff0c;作为一颗旗舰蓝牙音频SoC&#xff0c;实现了三大核心技术突破&#xff0c;使OPPO具备了计算连接能力的蓝牙SoC平台的设计能力。 这是OPPO发布的第二款自研芯片。去年…

初学者数据分析——Python职位全链路分析

最近在做Python职位分析的项目&#xff0c;做这件事的背景是因为接触Python这么久&#xff0c;还没有对Python职位有一个全貌的了解。所以想通过本次分析了解Python相关的职位有哪些、在不同城市的需求量有何差异、薪资怎么样以及对工作经验有什么要求等等。分析的链路包括&…

用了那么久的Vue,你了解Vue的报错机制吗?

Vue的5种处理Vue异常的方法 相信大家对Vue都不陌生。在使用Vue的时候也会遇到报错&#xff0c;也会使用浏览器的F12 来查看报错信息。但是你知道Vue是如何进行异常抛出的吗&#xff1f;vue 是如何处理异常的呢&#xff1f;接下来和大家介绍介绍&#xff0c;Vue是如何处理这几种…

【数据结构】树以及二叉树的概念

作者&#xff1a;一个喜欢猫咪的的程序员 专栏&#xff1a;《数据结构》 喜欢的话&#xff1a;世间因为少年的挺身而出&#xff0c;而更加瑰丽。 ——《人民日报》 目录 树的概念&#xff1a; 树的相关概念&#xff1a; 树如何表示&#xff…

Anaconda中Python虚拟环境的创建、使用与删除

本文介绍在Anaconda环境下&#xff0c;创建、使用与删除Python虚拟环境的方法。 在Python的使用过程中&#xff0c;我们常常由于不同Python版本以及不同第三方库版本的支持情况与相互之间的冲突情况&#xff0c;而需要创建不同的Python虚拟环境&#xff1b;在Anaconda的帮助下&…

如何使用Python构建Telegram机器人来生成随机引语

使用Python构建Telegram机器人以生成随机引语 聊天机器人是用于进行在线聊天对话的软件应用程序&#xff0c;通过文本或文本转语音的方式实现客户服务的自动化。[聊天机器人]可以用于提醒、预约等事情&#xff0c;也可以在社交媒体平台上使用。 在本教程中&#xff0c;我们将…

会自动化就能拿20K?不,你这顶多算会点皮毛···

前段时间公司要招2个自动化测试&#xff0c;同事面了几十个候选人&#xff0c;发现了一个很奇怪的现象&#xff0c;面试的时候&#xff0c;如果问的是框架api、脚本编写这些问题&#xff0c;基本上个个都能对答如流&#xff0c;等问到实际项目的时候&#xff0c;类似“怎么从0开…

如何实现一个基于WebRTC的音视频通信系统

文章有点长&#xff0c;推荐先收藏前言 目前市场上音视频技术方案大致分为以下几类&#xff0c;WebRTC因其超低延时、集成音视频采集传输等优点&#xff0c;是在线教育、远程会议等领域首选技术。 前言 目前市场上音视频技术方案大致分为以下几类&#xff0c;WebRTC因其超低延…

10年网安经验分享:一般人别瞎入网络安全行业

小白入门网络安全&#xff0c;如何选择方向&#xff1f; 如果你是一个新手小白&#xff0c;那么在最开始方向选择上面这一步是至关重要的&#xff0c;一旦你选错了那很可能就要和安全“saygoodbye”了。 很多小白刚开始的时候还没开始学会走就想着飞了&#xff0c;计算机功底…

四六级口语|考研复试口语|满满干货

目录 1.Which do you prefer to use, credit cards or cash?/Do you prefer the credit card or cash? 2.When you shop, do you prefer to go by yourself or with someone?

指针进阶(3)--玩转指针

指针进阶 内容不多&#xff0c;但面面俱到&#xff0c;都是精华 1.回调函数&#xff1a; 2.详解qsort函数参数&#xff1a; 回调函数就是&#xff0c;把一个函数的地址&#xff0c;放在函数指针中&#xff0c;然后将该指针作为一个参数&#xff0c;传到 另一个函数中&#x…

04.南瓜树低代码平台平台 分析后的感想

随着企业产品的不断完善&#xff0c;后续将有时间来推进产品转向低代码平台化。 低代码平台不是无代码平台&#xff0c;采用配置的方式完成UI/流程/报表的处理&#xff0c;有业务人员在完成基本的产品框架后&#xff0c;由研发人员完成业务规则代码固化&#xff0c;最终达到产…

MobSDK 封装MobSDK基础包

平台兼容性 Android Android CPU类型 iOS 适用版本区间&#xff1a;4.4 - 12.0 armeabi-v7a&#xff1a;支持&#xff0c;arm64-v8a&#xff1a;支持&#xff0c;x86&#xff1a;支持 原生插件通用使用流程&#xff1a; 购买插件&#xff0c;选择该插件绑定的项目。在HB…

3. 实例化Bean的三种方式

实例化Bean的三种方式 一、构造方法方式 1.1 BookDaoImpl package com.lin.dao.daoimpl;import com.lin.dao.BookDao;public class BookDaoImpl implements BookDao {public BookDaoImpl() {System.out.println("BookDao的无参构造器");}/*** 数据层实现*/public …

了解Linux 操作系统!开篇!!!

【推荐阅读】 Linux内核CPU调度域内容讲解 关于如何快速学好&#xff0c;学懂Linux内核。内含学习路线 一文了解Linux上TCP的几个内核参数调优 Linux 接口 Linux 系统是一种金字塔模型的系统&#xff0c;如下所示 应用程序发起系统调用把参数放在寄存器中(有时候放在栈中)…

Python解题 - CSDN周赛第15期 - 客栈的咖啡

本期遇上官方大放水&#xff0c;四道题里有三道都在每日一练里做过&#xff0c;再加上比赛时间不太友好&#xff0c;参与人数不多&#xff0c;问哥竟然混了个第一名&#xff0c;真是惭愧。。。就当是官方在奖励那些平时多多参加每日一练的童鞋们了。 第一题&#xff1a;求并集 …

Vue3响应式原理设计和实现

Vue3响应式原理设计和实现响应式什么是响应式手动响应式proxy代理对象响应式系统一个属性注册一个副作用函数一个属性注册多个副作用函数多个属性注册不同的副作用函数多个数据不同属性注册不同的副作用函数响应式 什么是响应式 响应式是一个过程&#xff0c;这个过程存在两个…

【MaixPy】:K210识别简例(简单二维码检测和双二维码检测)

实物图 俩二维码识别实物图 前言 这段时间接触了一下基于MaixPy的开发K210的摄像头设备,的确很有趣,运行速度很快,编程难度不大。很适合咱们视觉开发的同学们学习,以下是我玩设备的一些感悟,如有不妥之处,希望大家雅正,也希望能帮助初学者了解和学习,也可加bulidupup(…

java毕业设计——基于java+Socket+sqlserver的网络通讯系统设计与实现(毕业论文+程序源码)——网络通讯系统

基于javaSocketsqlserver的网络通讯系统设计与实现&#xff08;毕业论文程序源码&#xff09; 大家好&#xff0c;今天给大家介绍基于javaSocketsqlserver的网络通讯系统设计与实现&#xff0c;文章末尾附有本毕业设计的论文和源码下载地址哦。 文章目录&#xff1a; 基于jav…