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

受 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 自定义指令。

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

(0)

相关推荐

  • vue.js指令v-model使用方法

    vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过设置属性访问器实现的.例如: var data = { name: "erik", g

  • Vue.directive自定义指令的使用详解

    很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. 1. 自定义指令实现拖拽 HTML: <div v-drag>我可以拖拽</div> JS: Vue.directive('drag', inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略 let oDiv=el; //el

  • VUE元素的隐藏和显示(v-show指令)

    除了click单击事件,还有mouseover,mouseover等鼠标事件. dbclick双击事件. v-on:click/mouseover/mouseover/mousedown/dbclick/... v-show指令 v-show="true/false" //控制元素显示/隐藏 示例代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset

  • 简单学习vue指令directive

    本文为大家分享了vue指令directive的使用方法,供大家参考,具体内容如下 1.指令的注册 指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册: Vue.directive('dirName',function(){ //定义指令 }); 另外一种是局部注册: new Vue({ directives:{ dirName:{ //定义指令 } } }); 2.指令的定义 指令定义,官方提供了五个钩子函数来供我们使用,分别代表了一个组件的各个生命周期 bind: 只调用一次,指令

  • vue.js中指令Directives详解

    想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

  • vue学习笔记之指令v-text && v-html && v-bind详解

    一 : 指令的概念: 指令是vue自定义的以v-开头的自定义属性.每个不同的属性都有各自不同的意义和功能 二 : 指令的语法: v-指令名 = "表达式判断或者是业务模型中属性名或者事件名" 三 : 具体指令 1. v-text 作用 : 操作元素中的纯文本 快捷方式 : {{}} 栗子1 简写形式:将v-text=""换成{{}} <div id="app"> {{ message }} </div> var app =

  • 浅谈 Vue v-model指令的实现原理

    vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定, 我们来看一下它的效果: 输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化 我们可以参照官方文档的例子    http://cn.vuejs.org/v2/guide/forms.html#文本 我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是实时变化的 如此神奇的效果是如何实现的呢? 还是参照官方文档 http://cn.vuejs.org/v2/guide/co

  • 解决vue组件中使用v-for出现告警问题及v for指令介绍

    在项目中运行v-for代码段时, <flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="padding: 0 14px" @clic

  • Vue.js常用指令汇总(v-if、v-for等)

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu

  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

随机推荐