Vue开发常用的指令实例介绍-创新互联

这篇文章主要讲解了“Vue开发常用的指令实例介绍”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue开发常用的指令实例介绍”吧！

1. V-Hotkey

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

安装: npm install --save v-hotkey

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

2. V-Click-Outside

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

Demo: https://codesandbox.io/s/zx7mx8y1ol?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue

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

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

HTML

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

3. V-Clipboard

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

安装: npm install --save v-clipboard

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

 Copy to clipboard

4. Vue-ScrollTo

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

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

安装: npm install --save vue-scrollto

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

 Scroll to #element by clicking here

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

5. Vue-Lazyload

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

Demo: http://hilongjw.github.io/vue-lazyload/

安装: npm install --save vue-lazyload

图片懒加载，非常方便。

6. V-Tooltip

仓库地址: v-tooltip

Demo: available here

安装: npm install --save v-tooltip

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

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

7. V-Scroll-Lock

仓库地址: https://github.com/phegman/v-scroll-lock

Demo: https://v-scroll-lock.peterhegman.com/

安装: npm install --save v-scroll-lock

基于 body-scroll-lock 开发，这个指令的作用是在打开模态浮层的时候防止下层的元素滚动。

8. V-Money

仓库地址: https://github.com/vuejs-tips/v-money

Demo: https://vuejs-tips.github.io/v-money/

安装: npm install --save v-money

如果你需要在输入框里加上货币前缀或后缀、保留小数点位数或者设置小数点符号——不用找了，就是它！一行代码搞定这些需求：

9. Vue-Infinite-Scroll

仓库地址: https://github.com/ElemeFE/vue-infinite-scroll

安装: npm install --save vue-infinite-scroll

无限滚动指令，当滚动到页面底部时会触发绑定的方法。