vue新玩法VueUse-工具库@vueuse/core-程序员宅基地

技术标签: vue.js  

VueUse官方链接
一、什么是VueUse
VueUse不是Vue.use !!!它是一个基于 Composition API 的实用函数集合,下面是具体的一些用法
二、如何引入
import { 具体方法 } from ‘@vueuse/core’
三、下面来看看一些具体的用法
1、useMouse:监听当前鼠标坐标的一个方法,他会实时的获取鼠标的当前的位置
2、usePreferredDark:判断用户是否喜欢深色的方法,他会实时的判断用户是否喜欢深色的主题
3、useLocalStorage:数据持久化到本地存储中 例子:
useLocalStorage(
‘my-storage’,
{
name: ‘author’,
},
)

4、throttleFilter:节流 throttleFilter(100)
5、debounceFilter:防抖 debounceFilter(100)
6、OnClickOutside:在点击元素外部时触发一个回调函数
**注意:**这里的 OnClickOutside 函数是一个组件,不是一个函数。需要package.json 中安装了 @vueuse/components。

import {
     OnClickOutside } from '@vueuse/components'
function close () {
    
  /* ... */
}
</script>

<template>
  <OnClickOutside @trigger="close">
    <div>
      Click Outside of Me
    </div>
  </OnClickOutside>
</template>

7、全局状态共享的函数
createGlobalState
useStorage

8、其他具体的方法可以看文档:例如 until 等的运用

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37174991/article/details/124092020

智能推荐

RK平台,芯片rtl8821cs,重启wifi概率性无法打开_rk重新上电概率打不开wifi蓝牙-程序员宅基地

文章浏览阅读3.4k次。文章目录重启wifi概率性无法打开发现问题问题分析解决方法重启wifi概率性无法打开发现问题  最近在调试A100项目,建立在RK平台上的一个医疗随行包+智能音箱;在调试的过程中发现了一个bug:通过reboot命令重启的时候会概率性的出现WIFI打不开的情况;问题分析  根据查看kernel log,发现在sdio去探测设备的过程中,sdio报错了,导致无法探测到设备,以致于驱动..._rk重新上电概率打不开wifi蓝牙

文件系统的类型简介_系统用认识媒介类型是文件的什么-程序员宅基地

文章浏览阅读4.2k次。文件系统的类型简介Linux支持多种文件系统类型,包括ext2、ext3、vfat、jffs、romfs和nfs等,为了对各类文件系统进行统一管理,Linux引入了虚拟文件系统VFS(Virtual File System),为各类文件系统提供一个统一的应用编程接口。根据存储设备的硬件特性、系统需求,不同的文件系统类型有不同的应用场合。在嵌入式Linux应用中,主要的存储设备为_系统用认识媒介类型是文件的什么

魅族u20怎么刷Android,魅族魅蓝U20/U10一键Root权限获取+USB驱动安装-程序员宅基地

文章浏览阅读1.5k次。魅族新的手机型号为魅蓝U20发布了,,售价特公布了为千元级别手机,那么meizuU20手机配置如何呢?我们看看吧,,屏幕尺寸为5.5英寸,分辨率为1920*1080高清,系统是基于安卓的Flyme5系统,兼容安卓系统的APK格式文件安装和使用。处理器为HelioP101.8GHz(八核心)摄像头为1300万像素,前置为500万,。可运行内存为2GB,机身存储空间为16GB这个手机目前售价为..._1920*1080手机可以root的

陕西省计算机二级mysql报名_转发教育部考试中心关于全国计算机等级考试(NCRE)体系调整的通知...-程序员宅基地

文章浏览阅读112次。附件全国计算机等级考试调整方案2015年,考试中心组织召开了第六届全国计算机等级考试(NCRE)考委会会议,会议完成NCRE考委会换届选举,并确定了下一步改革目标。在新的历史时期,NCRE将在保持自身特色、稳定发展的基础上进一步考试改革。从2018年3月开始,将实施2018版考试大纲,并按新体系开考各个考试级别。具体调整内容如下:一、考试级别及科目1.一级新增“网络安全素质教育”科目(代码:17)..._二级mysql报名

nuxt使用core-js在ie11下的兼容性问题处理_corejs版本不兼容-程序员宅基地

文章浏览阅读2.2k次。nuxt ie兼容性问题_corejs版本不兼容

微服务与Service Mesh,并蒂花开只待春来-程序员宅基地

文章浏览阅读45次。近些年来,敏捷和自动化运维成为了整体互联网环境发展的主流趋势,而繁杂的系统架构难免显得累赘,微服务架构应运成为了诸多企业的主角。同样,在微服务的推动下,微服务与数据中心内部通信的Service Mesh技术也登上舞台,两大技术并蒂花开,那么属于他们的春天来了吗?在各家企业中这两种技术的应用情况如何呢?为探知这些问题的答案,InfoQ联合Intel举办了两场闭门会,共同邀请了来自蚂蚁金服、网易云、新..._感觉spring cloud对service mesh支付不好,找了一圈打算来用micronaut或quarku

随便推点

校验码——奇偶校验码详解,码距,例题_奇偶校验题目-程序员宅基地

文章浏览阅读1.1w次,点赞7次,收藏18次。相关文章: 校验码——码距 校验码——海明码及码距 校验码——CRC循环冗余校验码 一、码距二、奇偶校验码 奇偶校验码是一种增加二进制传输系统最小距离的简单和广泛采用的方法。例如,单个的奇偶校验将使码的最小距离由一增加到二。 一个二进制码字,如果它的码元有奇数个1,就称为具有奇性。例如,码字“10110101”有五个1,因此,这个码字具有奇性。同样,偶性码字具有偶数个1。注意奇性检测等效于所有码元的模二加,..._奇偶校验题目

25.请编写一个函数fun,它的功能是:比较两个字符串的长度,(不得调用C语言提供的求字符串长度的函数),函数返回较长的字符串。若两个字符串长度相同,则返回第一个字 符串。_3、(串比较):编写一个函数fun,功能是对两个字符串进行比较;在主函数中输入两个字 符串,调用fu-程序员宅基地

文章浏览阅读4k次,点赞9次,收藏10次。25.请编写一个函数fun,它的功能是:比较两个字符串的长度,(不得调用C语言提供的求字符串长度的函数),函数返回较长的字符串。若两个字符串长度相同,则返回第一个字符串。例如,输入:beijing shanghai(为回车键),函数将返回shanghai。#include <stdio.h>char *fun(char *s1,char *s2){//考察传递字符串 char *p=s1; char *q=s2; int m=0; int n=0; while(*p){ _3、(串比较):编写一个函数fun,功能是对两个字符串进行比较;在主函数中输入两个字 符串,调用fun函数完成串比较,在主函数中输出这两个字符串的比较结果。要求用指针完成fun函数,不得使用strcmp库函数。

pycharm使用日志_pycharm r日志详情-程序员宅基地

文章浏览阅读4.5k次。这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma..._pycharm r日志详情

Universal-Image-Loader源码阅读(3)-utils/IoUtils_universal_utils-程序员宅基地

文章浏览阅读176次。该类从名字看就是IO工具类。同样类声明为final,构造为private,方法都是static。这些是工具类的标配呀!源码:/** * Provides I/O operations * * @author Sergey Tarasevich (nostra13[at]gmail[dot]com) * @since 1.0.0 */public final _universal_utils

淘宝代购系统;海外代购系统;代购程序,代购系统源码PHP前端源码演示-程序员宅基地

文章浏览阅读549次。本帖只展示部分演示站 需了解更多请移步注册http://console.open.onebound.cn/console/?i=Rookie代购业务近年兴起的一种购物模式,是帮国外客户购买中国商品。主要通过外贸代购模式,把淘宝、天猫等电商平台的全站商品通过API接入到你的网站上,瞬间就可以架设一个有数亿产品的大型网上商城,而且可以把这些中文的商品全部自动翻译成各国语言,能让国外客户看懂,直接在网站上下单,然后网站运营方代为购买再邮寄给客户,收取商品差价以及代购费和运费,利润可观,市场巨大。目前跨境

回溯法:《装载问题》-python实现_装载问题有一批共n个集装箱要装上2艘 python-程序员宅基地

文章浏览阅读3.6k次。有一批共n个集装箱要装上2艘载重量分别为c1和c2的船,其中集装箱i的重量为wi,且。装载问题要求确定是否有一个合理的装载方案可将这些集装箱装上这2艘船。如果有,找出一种装载方案。例如当n=3,c1=c2=50且w=[10,40,40]时,则可以将集装箱1和2装到第一艘轮船上,而将集装箱3装到第二艘轮船上;如果w=[20,40,40],则无法将这3个集装箱都装上轮船。容易证明,如果一个给定装载问题..._装载问题有一批共n个集装箱要装上2艘 python

推荐文章

热门文章

相关标签