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


Posted in Javascript onOctober 11, 2019

受 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: https://codesandbox.io/s/zx7mx8y1ol?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue

安装: 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: http://hilongjw.github.io/vue-lazyload/

安装: npm install --save vue-lazyload

图片懒加载,非常方便。

<img v-lazy="https://www.domain.com/image.jpg">

6. V-Tooltip

仓库地址: v-tooltip

Demo: available here

安装: npm install --save v-tooltip

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

<button v-tooltip="'You have ' + count + ' new messages.'">

说明: 还有一个比较流行的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 开发,这个指令的作用是在打开模态浮层的时候防止下层的元素滚动。

<template>
 <div class="modal" v-if="opened">
  <button @click="onCloseModal">X</button>
  <div class="modal-content" v-scroll-lock="opened">
   <p>A bunch of scrollable modal content</p>
  </div>
 </div>
</template>
<script>
export default {
 data () {
  return {
   opened: false
  }
 },
 methods: {
  onOpenModal () {
   this.opened = true
  },

  onCloseModal () {
   this.opened = false
  }
 }
}
</script>

8. V-Money

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

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

安装: npm install --save v-money

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

<template>
 <div>
  <input v-model.lazy="price" v-money="money" /> {{price}}
 </div>
</template>
<script>
export default {
 data () {
  return {
   price: 123.45,
   money: {
    decimal: ',',
    thousands: '.',
    prefix: '$ ',
    precision: 2,
   }
  }
 }
}
</script>

9. Vue-Infinite-Scroll

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

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

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

<template>
 <!-- ... -->
 <div
  v-infinite-scroll="onLoadMore"
  infinite-scroll-disabled="busy"
  infinite-scroll-distance="10"
 ></div>
<template>
<script>
export default {
 data() {
  return {
   data [],
   busy: false,
   count: 0
  }
 },

 methods: {
  onLoadMore() {
   this.busy = true;

   setTimeout(() => {
    for (var i = 0, j = 10; i < j; i++) {
     this.data.push({ name: this.count++ });
    }
    this.busy = false;
   }, 1000);
  }
 }
}
</script>

10. Vue-Clampy

仓库地址: vue-clampy.

安装: npm install --save @clampy-js/vue-clampy

这个指令会截断元素里的文本,并在末尾加上省略号。它是用clampy.js实现的。

<p v-clampy="3">Long text to clamp here</p>
 <!-- displays: Long text to...-->

11. Vue-InputMask

仓库地址: vue-inputmask

安装: npm install --save vue-inputmask

当你需要在输入框里格式化日期时,这个指令会自动生成格式化文本。基于Inputmask library 开发。

<input type="text" v-mask="'99/99/9999'" />

12. Vue-Ripple-Directive

仓库地址: vue-ripple-directive

安装: npm install --save vue-ripple-directive

Aduardo Marcos 写的这个指令可以给点击的元素添加波纹动效。

<div v-ripple class="button is-primary">This is a button</div>

13. Vue-Focus

仓库地址: vue-focus

安装: npm install --save vue-focus

有时候,用户在界面里操作,需要让某个输入框获得焦点。这个指令就是干这个的。

<template>
 <button @click="focused = true">Focus the input</button>

 <input type="text" v-focus="focused">
</template>
<script>
export default {
 data: function() {
  return {
   focused: false,
  };
 },
};
</script>

14. V-Blur

仓库地址: v-blur

Demo: 戳这里

安装: npm install --save v-blur

假设你的页面在访客没有注册的时候,有些部分需要加上半透明遮罩。用这个指令可以轻松实现,还可以自定义透明度和过渡效果。

<template>
 <button
  @click="blurConfig.isBlurred = !blurConfig.isBlurred"
 >Toggle the content visibility</button>

 <p v-blur="blurConfig">Blurred content</p>
</template>
<script>
 export default {
   data () {
    return      
     blurConfig: {
      isBlurred: false,
      opacity: 0.3,
      filter: 'blur(1.2px)',
      transition: 'all .3s linear'
     }
    }
   }
  }
 };
</script>

15. Vue-Dummy

仓库地址:vue-dummy

Demo: available here

安装: npm install --save vue-dummy

开发 app 的时候,偶尔会需要使用假文本数据,或者特定尺寸的占位图片。用这个指令可以轻松实现。

<template>
 <!-- the content inside will have 150 words -->
 <p v-dummy="150"></p>

 <!-- Display a placeholder image of 400x300-->
 <img v-dummy="'400x300'" />
</template>

总结

欢迎补充更多好用的 Vue 自定义指令。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
js脚本中执行java后台代码方法解析
Oct 11 #Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 #Javascript
ES6之Proxy的get方法详解
Oct 11 #Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 #Javascript
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
JavaScript实现抖音罗盘时钟
Oct 11 #Javascript
javascript刷新父页面方法汇总详解
Oct 10 #Javascript
You might like
深入理解PHP中的empty和isset函数
2016/05/26 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
python 性能优化方法小结
2017/03/31 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
亿企通软件测试面试题
2012/04/10 面试题
实习自我鉴定范文
2013/10/30 职场文书
2014植树节活动总结
2014/03/11 职场文书
学习之星事迹材料
2014/05/17 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
公诉意见书范文
2015/06/05 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书