分享7 个VUE项目用得上的JavaScript库
借助开源库加速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-…
相关文章
- Learn Vue 3, a Front-End JavaScript Framework
- 【Javascript/Vue】如何解决js中超链接跳转到新的页面不被浏览器拦截?(已解决,代码实例,亲测有效)
- light-mvvm:JavaScript 超轻量级 MVVM 双向数据绑定插件(迷你Vue)
- JavaScript - math.js 数学库,实现 math.add() “数字累加“ 计算总和的操作(例如:循环 N 个整数或小数,然后再循环内 “+=“ 叠加算数)适用于Vue等全部前端项目
- JavaScript - 实现向 formData 对象中追加数组或对象,使用 append() 插入数组、对象等复杂数据类型(vue / uniapp / react 项目通用解决方案)
- JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目
- JavaScript - vue.js / nuxt.js / uni-app / 微信小程序 js 时间戳与日期格式互转(时间戳转日期字符串格式,日期回转时间戳格式)支持转为日期字符串后自动补0
- CSDN学霸课表——一切皆为 JavaScript
- JavaScript - 倒计时
- 【JavaScript】XMLHttpRequest Level2使用指南
- 【JavaScript】Understanding callback functions in Javascript
- 最新版教学Vue.js渐进式JavaScript框架
- 基于JavaScript实现(二叉排序树)社会关系网【100010241】
- JavaScript表单获取
- JavaScript let 和 const、全局变量和局部变量
- 浅析JavaScript如何检测文件的类型:区分文件类型的本质、关于魔数的理解、input accept文件检测存在的问题、如何检测修改后缀名后的文件类型、推荐一个文件检测JS库-file-type库及其检测原理
- JavaScript深入浅出第4课:V8引擎是如何工作的?
- JavaScript黑客是这样窃取比特币的,Vue开发者不用担心!
- 10个JavaScript常见BUG及修复方法
- 华为OD机试 - 跳格子(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- javascript实现下拉菜单的显示与隐藏
- JavaScript canvas