这15个Vue指令,让你的项目开发爽到爆

日期：2020-11-01 栏目：程序人生浏览：次

受 AngularJS 的启发，Vue 内置了一些非常有用的指令（比如v-html 和 v-once等），每个指令都有自身的用途。完整的指令列表可以在.

这还没完，更棒的是可以开发自定义指令。Vue.js 社区因此得以通过发布自定义指令npm 包，解决了无数的代码问题。

以下就是我最喜欢的 Vue.js 自定义指令列表。不用说，这些指令为我的项目开发节省了大量时间！😇

1. V-Hotkey

仓库地址: https://github.com/Dafrok/v-hotkey
Demo: 戳这里 https://dafrok.github.io/v-hotkey

安装: npm install --save v-hotkey

这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟：

<template> <div v-show="show" v-hotkey="{ 'esc': onClose, 'ctrl+enter': onShow }" > Press `esc` to close me! </div> </template> <script> export default { data() { return { show: true } }, methods: { onClose() { this.show = false }, onShow() { this.show = true }, } } </script>

2. V-Click-Outside

仓库地址: https://github.com/ndelvalle/v-click-outside

Demo:

安装: npm install --save v-click-outside

你想要点击外部区域关掉某个组件吗？用这个指令可以轻松实现。这是我每个项目必用的指令之一，尤其在弹框和下拉菜单组件里非常好用。

<template> <div v-show="show" v-click-outside="onClickOutside" > Hide me when a click outside this element happens </div> </template> HTML <script> export default { data() { return { show: true }; }, methods: { onClickOutside() { this.show = false; } } }; </script>

说明：你也可以通过双击外部区域来触发，具体用法请参考文档。

3. V-Clipboard

仓库地址: https://github.com/euvl/v-clipboard

安装: npm install --save v-clipboard

这个简单指令的作者是Yev Vlasenko ，可以用在任何静态或动态元素上。当元素被点击时，指令的值会被复制到剪贴板上。用户需要复制代码片段的时候，这个非常有用。

<button v-clipboard="value"> Copy to clipboard </button>

4. Vue-ScrollTo

仓库地址: https://github.com/rigor789/vue-scrollTo

Demo: https://vue-scrollto.netlify.com/

安装: npm install --save vue-scrollto

这个指令监听元素的点击事件，然后滚动到指定位置。我通常用来处理文章目录跳转和导航跳转。

<span v-scroll-to="{ el: '#element', // 滚动的目标位置元素 container: '#container', // 可滚动的容器元素 duration: 500, // 滚动动效持续时长（毫秒） easing: 'linear' // 动画曲线 }" > Scroll to #element by clicking here </span>

说明：也可以通过代码动态设置，具体看文档。

5. Vue-Lazyload

仓库地址: https://github.com/hilongjw/vue-lazyload

Demo:

安装: npm install --save vue-lazyload

图片懒加载，非常方便。

6. V-Tooltip

仓库地址: v-tooltip

Demo:

安装: npm install --save v-tooltip

几乎每个项目都会用到 tooltip。这个指令可以给元素添加响应式的tooltip，并可控制显示位置、触发方式和监听事件。

说明：还有一个比较流行的tooltip插件vue-directive-tooltip.