15个必知的Vue指令

[jwenjian]

15个必知的Vue指令:

---

1. v-hotkey

This directive allows you to bind one or multiple hotkeys to your components. Do you need to hide a component when pressing the Escape key and display it when hitting Enter while pressing Control?

2. v-click-outside

Close a component when a click outside happens

3. v-clipboard

You can add to any static or dynamic element of your code. Then, when the element is clicked, the directive’s value will be copied into the user’s clipboard.

4. vue-scrollto

This directive will listen to a click event on the element and scroll to a given tag.

5. v-lazy

If you want to lazy load your images to speed up your pages, this package will come in handy.

6. v-tooltip

You can add reactive ones to your elements, control their position, choose to trigger them on click or on hover and listen for events.

7. v-scroll-lock

Help you prevent the body from scrolling when you have a modal opened.

8. v-money

When you need to prefix/suffix your input with any given currency, define how many decimals it should have or use a decimal separator like “,”

9. v-infinite-scroll

If you want to load new elements as people reach the page bottom, you might be interested in this directive

10. v-clampy

This directive lets you truncate the content inside an element and add an ellipsis to the end.

11. v-mask

When you need to format dates in a specific way for your inputs, this directive based on the Inputmark library will let you add a mask to them.

12. v-ripple

This Vue custom directive brought to us by Aduardo Marcos provides you with a pretty neat ripple effect animation that will be triggered when people click on an element.

13. v-focus

Sometimes, when someone is doing a certain action on your interface, you want a given input to be focused. This directive is about just that.

14. v-blur

Make some section of your application that should be blurred when a visitor is not registered

15. v-dummy

Use dummy lorem ipsum text or to add placeholder images of a certain size somewhere in there

---

Content collected from https://www.telerik.com/blogs/15-must-have-vue-directives-that-will-significantly-maximize-your-productivity