优选七个用于vue开发的JS库

 更新时间:2023年02月01日 09:06:15   作者:山山而川~xyj  
这篇文章主要介绍了JavaScript优选七个用于vue开发库,借助开源库加速Vue项目的开发进度是现代前端开发比较常见的方式,平常收集一些JavaScript库介绍,在遇到需要的时候可以信手拈来

前言

借助开源库加速 Vue 项目的开发进度是现代前端开发比较常见的方式,平常收集一些 JavaScript 库介绍,在遇到需要的时候可以信手拈来。Vue 生态有很多不错的依赖库或者组件,是使用 Vue 开发前端的原因之一。接下来将会介绍七个 Vue 项目中会用到的 JavaScript 库。

一、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 };
    },
};

项目地址:https://github.com/vueuse/vueuse

二、vue-js-modal

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

项目地址:https://github.com/euvl/vue-js-modal

三、vue-wait

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

项目地址:https://github.com/f/vue-wait

四、good-table

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

项目地址:https://github.com/xaksis/vue-good-table

五、vue-notification

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

项目地址:https://github.com/euvl/vue-notification

六、tree select

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

项目地址:https://github.com/riophae/vue-treeselect

七、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();

项目地址:https://github.com/naver/egjs-infinitegrid

到此这篇关于JavaScript优选七个用于vue开发库的文章就介绍到这了,更多相关JS库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3+ant design的form数组表单校验方法

    vue3+ant design的form数组表单校验方法

    这篇文章主要介绍了vue3+ant design的form数组表单,如何校验,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-09-09
  • SpringBoot+Vue 前后端合并部署的配置方法

    SpringBoot+Vue 前后端合并部署的配置方法

    这篇文章主要介绍了SpringBoot+Vue 前后端合并部署的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • vue 路由切换过渡动效滑入滑出效果的实例代码

    vue 路由切换过渡动效滑入滑出效果的实例代码

    在支付宝账单页面有这样一个特效切换过渡动效滑入滑出效果,非常方便实用,那么这个功能如何实现的呢?下面小编通过vue实现路由切换过渡动效滑入滑出效果,感兴趣的朋友一起看看吧
    2022-03-03
  • Vue3 实现验证码倒计时功能

    Vue3 实现验证码倒计时功能

    这篇文章主要介绍了Vue3 实现验证码倒计时功能,倒计时的运用场景是获取手机验证码倒计时、获取邮箱验证码倒计时等场景,本文结合示例代码给大家详细讲解,需要的朋友可以参考下
    2023-01-01
  • Vue v-for中的 input 或 select的值发生改变时触发事件操作

    Vue v-for中的 input 或 select的值发生改变时触发事件操作

    这篇文章主要介绍了Vue v-for中的 input 或 select的值发生改变时触发事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 详解Vue3的虚拟DOM是如何生成的

    详解Vue3的虚拟DOM是如何生成的

    这篇文章给大家详细介绍了 Vue3 的虚拟DOM生成规则,文章通过代码示例和图片介绍的非常详细,具有一定的参考价值,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-09-09
  • 快速掌握Vue Router使用方法

    快速掌握Vue Router使用方法

    Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转
    2023-01-01
  • 编写 Vue v-for 循环的 7 种方式

    编写 Vue v-for 循环的 7 种方式

    这篇文章主要分享可编写 Vue v-for 循环的 7 种方式,在Vue中,基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环,接下来一起看看下面文章的详细介绍吧

    2021-12-12
  • Vue源码分析之虚拟DOM详解

    Vue源码分析之虚拟DOM详解

    所谓虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前,若一次操作中有 10 次更新 这篇文章主要给大家介绍了关于Vue源码分析之虚拟DOM的相关资料,需要的朋友可以参考下
    2021-05-05
  • Vue 3.0 v-for中的Ref数组用法小结

    Vue 3.0 v-for中的Ref数组用法小结

    在 Vue 2 中,在 v-for 里使用的 ref attribute会用ref 数组填充相应的 $refs property,本文给大家介绍Vue 3.0 v-for中的Ref数组的相关知识,感兴趣的朋友一起看看吧
    2023-12-12

最新评论