vue新玩法VueUse工具库具体用法@vueuse/core详解

VueUse官方链接

一、什么是VueUse

VueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式，省去程序员自己写相关代码。

VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了机遇 Composition API 的封装。

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 等的运用

到此这篇关于vue新玩法VueUse工具库@vueuse/core详解的文章就介绍到这了,更多相关vue VueUse工具库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3+vueuse实现放大镜示例详解

    目录 前言 准备工作 功能实现 完整实现代码 结束语 前言 给大家带来一种潮流的方式,实现放大镜效果,安排

  • vue前端框架vueuse的useScroll函数使用源码分析

    vue前端框架vueuse的useScroll函数使用源码分析

    目录 引言 1.示例 2.源码解析 2.1 参数解析 2.2 响应式状态定义 2.3 onScrollEnd滚动结束回调 2.4 onScrollHandler滚动处理 2.5 使用 useEventListener监听滚动事件 2.6 返回值 3.总结 引言 页面很多时候都含有可滚动视图区域,可能是横向滚动也可能是纵向滚动. 有时我们需要知道当前的滚动方向,是向左还是向右,是向上还是向下: 有时需要知道当前是否是正在滚动,如果滚动则显示一个加载动画等: 有时我们还需要知道滚动条是否已经滚动到了

  • VueUse功能精简你的dependencies

    VueUse功能精简你的dependencies

    目录 引言 使用前安装 网页全屏 剪切板 取色器 拖拽元素 本地缓存 其他 安全区域 动态修改favicon 引言 VueUse是一个基于Composition API的实用函数集合,支持Vue2和Vue3,使用它可以帮助我们快速实现日常开发中一些常见的需求.本文将分享列举几个常见的需求来通过VueUse实现,让大家感受其魅力! 使用前安装 Vue3: npm i @vueuse/core --save Vue2 的话还需要额外安装 @vue/composition-api npm i @vue

  • Vue新玩具VueUse的具体用法

    目录 前言 什么是 VueUse 简单上手 还有我们熟悉的 防抖 和 节流 还还有全局状态共享的函数 更多 前言 上次在看前端早早聊大会中, 尤大大再一次提到了 VueUse 的一个库. 好奇了一下,点看看了看.好家伙啊, 我直接好家伙.这不就是曾经我也想自己写一个  vue 版的 hooks 库吗?(因为我觉得 vue3 和 hooks 太像了) 可是我还不太会, 你现在直接把我的梦想给破灭了,下面我们一起来看看吧!VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bi

  • 5个可以加速开发的VueUse函数库(小结)

    5个可以加速开发的VueUse函数库(小结)

    目录 VueUse 有哪些实用程序? 将 VueUse 安装到你的 Vue 项目中 1.useRefHistory 跟踪响应式数据的更改 2.onClickOutside 关闭模态 3.useVModel 简化了 v-model 绑定 4.使用InterpObserver 跟踪元素可见性 5.useTransition 在值之间缓和 最后的想法 VueUse 是 Anthony Fu 的一个开源项目,它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Compositio

  • VueUse使用及造轮子选择对比示例详解

    VueUse使用及造轮子选择对比示例详解

    目录 前言 ‍ 问题 ‍♂️ 解决 更多 前言 想想一名React开发开发Vue是什么体验.就在今天初含泪写多一个vue项目,不是转,是写多!选用的是vue3+vite开发.Composition API 让我得心应手. 之前react开发选的是react16,ahooks是我接触最多的hooks库了,很贴合我的业务.在使用vue3的时候开发的时候选取了 vueuse . ‍ 问题 在前端开发中和请求打交道是最多的,大多数业务都是restful api架构,我们拿到数据做处理,当前流行的框架配备

  • vue新玩法VueUse工具库具体用法@vueuse/core详解

    VueUse官方链接 一.什么是VueUse VueUse不是Vue.use,它是为Vue 2和3服务的一套Vue Composition API的常用工具集,是目前世界上Star最高的同类型库之一.它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式,省去程序员自己写相关代码. VueUse 是一个基于 Composition API 的实用函数集合.通俗的来说,这就是一个工具函数包支持了更好的逻辑分离,它可以帮助你快速实现一些常见的功能,免得你自己去写,解决重复的工作内容.以及进

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • 关于vue3 option api新玩法分享

    关于vue3 option api新玩法分享

    可能一些朋友看到标题,瞬间就不淡定了,vue3+option api,在大家都在使用setup做组合式API的今天,这不就是开历史的倒车吗?别急啊,我们这么做,也是有苦衷的. 这是2个月之前在一篇介绍script setup的文章里面,我发布一个评论.事情就如同评论所说,考虑到成员之间水平不一样,太灵活了,你写代码煮面条我也煮面条,彼此之间反而互相看不懂代码了.那做eslint规范约束吧,约束到最后得到一个长得像option api但效果又没有option api好的规范,最终团队默默退回了op

  • Vue组件文档生成工具库的方法

    Vue组件文档生成工具库的方法

    目录 解析.vue 文件 提取文档信息 提取组件名称.描述.props.methods.model 提取描述 提取 methods 提取 props 提取 model 提取组件Events 提取组件Slots 结语 程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用第三方的一些比较常见问题 文档提取信息不全面,可能有些信息你需要提取但是它又不支持.

  • Android Studio打包.so库到apk中实例详解

    Android Studio打包.so库到apk中实例详解

    Android Studio打包.so库到apk中实例详解 由于在原来的ADT的Eclipse环境中,用ndk_build工具生成了相应的各个.so库文件之后,eclipse工具就会自动把这些库导入到apk中.而Android Studio目前为止(1.1.0版本)还无法做到那么自动,但是我们可以通过以下方式进行. 首先在Android Studio工程的app目录下创建整个jni目录,jni目录里写Android.mk.Application.mk以及各类C/C++和汇编源文件.然后跟原来一样

  • YUM解决RPM包安装依赖关系及yum工具介绍本地源配置方法详解

    1.背景概述 在实际生产环境下,对于在linux系统上安装rpm包,主要面临两个实际的问题 1)安装rpm包过程中,不断涌现的依赖关系问题,导致需要按照提示或者查询资料,手工安装更多的包 2)由于内外网的隔离,无法连接外网的yum源 鉴于上述因此,本文将详细介绍,yum工具以及配置本地yum源的方法 2.yum工具简介 •yum工具作为rpm包的软件管理器,可以进行rpm包的安装.升级以及删除等日常管理工作,而且对于rpm包之间的依赖关系可以自动分析,大大简化了rpm包的维护成本. •yum工具

  • 最锋利的Visual Studio Web开发工具扩展：Web Essentials使用详解

    最锋利的Visual Studio Web开发工具扩展：Web Essentials使用详解

    首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境,就可以使用它提供的方便功能了. Web Essentials对CSS.JavaScript和HTML都提供了很多快捷的功能支持,具体列表如下: CSS 即时预览Live Web Preview 每次修改的时候,都可以使用CTRL+ALT+Enter快捷键或者点击方案右键上的Live Web Preview选项来即时预览你修改的页面,每次修改完 HTML或者相应的CSS, Ctrl+S保存以

  • Vue.js 2.x之组件的定义和注册图文详解

    前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 模块化和组件化的区别 模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用 全局组件的定义和注册 组件Component是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 全局组件的定义和注

  • 关于Python可视化Dash工具之plotly基本图形示例详解

    Plotly Express是对 Plotly.py 的高级封装,内置了大量实用.现代的绘图模板,用户只需调用简单的API函数,即可快速生成漂亮的互动图表,可满足90%以上的应用场景. 本文借助Plotly Express提供的几个样例库进行散点图.折线图.饼图.柱状图.气泡图.桑基图.玫瑰环图.堆积图.二维面积图.甘特图等基本图形的实现. 代码示例 import plotly.express as px df = px.data.iris() #Index(['sepal_length', '

  • python PaddleOCR库用法及知识点详解

    说明 1.PaddleOCR是基于深度学习的ocr识别库,中文识别精度相当还不错,能够应对大多数文字提取需求. 2.需要依次安装三个依赖库,shapely库可能会受到系统的影响,出现安装错误. 安装命令 pip install paddlepaddle pip install shapely pip install paddleocr 代码实现 ocr = PaddleOCR(use_angle_cls=True,) # 输入待识别图片路径 img_path = r"d:\Desktop\4A3

随机推荐