Inspired by AngularJS, Vue has built-in some very useful directives (such as v-html and v-once, etc.), and each directive has its own purpose. The complete list of instructions can be found inView here.
This is not over yet, and what's even better is that you can develop custom instructions. The community has thus been able to solve countless code problems by issuing custom directive npm packages.
Here is my favorite list of custom commands. Needless to say, these instructions saved a lot of time for my project development! 😇
1. V-Hotkey
Warehouse address:/Dafrok/v-hotkey
Demo: Click here/v-hotkey
Install:npm install --save v-hotkey
This directive can bind one or more shortcut keys to the component. Do you want to display a component by pressing the Escape key and holding the Control and Enter keys before displaying it? A piece of cake:
<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() {
= false
},
onShow() {
= true
},
}
}
</script>
2. V-Click-Outside
Warehouse address:/ndelvalle/v-click-outside
Demo: /s/zx7mx8y1ol?module=%2Fsrc%2Fcomponents%
Install: npm install --save v-click-outside
Do you want to click on the external area to turn off a component? This command can be easily implemented. This is one of the necessary instructions for each project, especially in the pop-up box and drop-down menu components.
<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() {
= false;
}
}
};
</script>
Note: You can also trigger it by double-clicking the external area. Please refer to the documentation for specific usage.
3. V-Clipboard
Warehouse address:/euvl/v-clipboard
Install:npm install --save v-clipboard
The author of this simple directive is Yev Vlasenko and can be used on any static or dynamic element. When an element is clicked, the value of the directive is copied to the clipboard. This is very useful when users need to copy code snippets.
<button v-clipboard="value"> Copy to clipboard </button>
4. Vue-ScrollTo
Warehouse address:/rigor789/vue-scrollTo
Demo: /
Install:npm install --save vue-scrollto
This command listens for the element's click event and scrolls to the specified position. I usually use it to handle article directory jumps and navigation jumps.
<span v-scroll-to="{
el: '#element', // Scrolling target position element container: '#container', // Scrollable container element duration: 500, // Scrolling effect duration (milliseconds) easing: 'linear' // Animation curve }"
>
Scroll to #element by clicking here
</span>
Note: You can also set it dynamically through the code to see the documentation for details.
5. Vue-Lazyload
Warehouse address:/hilongjw/vue-lazyload
Demo: /vue-lazyload/
Install:npm install --save vue-lazyload
The picture is lazy to load, which is very convenient.
<img v-lazy="/">
6. V-Tooltip
Warehouse address:v-tooltip
Demo: available here
Install:npm install --save v-tooltip
Tooltip is used in almost every project. This instruction can add a responsive tooltip to the element and control the display position, triggering method, and listening events.
<button v-tooltip="'You have ' + count + ' new messages.'">
Note: There is also a more popular tooltip plugin vue-directive-tooltip.
7. V-Scroll-Lock
Warehouse address:/phegman/v-scroll-lock
Demo: /
Install:npm install --save v-scroll-lock
Based on body-scroll-lock development, the function of this instruction is to prevent the elements in the lower layer from scrolling when opening the modal floating layer.
<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 () {
= true
},
onCloseModal () {
= false
}
}
}
</script>
8. V-Money
Warehouse address:/vuejs-tips/v-money
Demo: /v-money/
Install:npm install --save v-money
If you need to add a currency prefix or suffix to the input box, preserve the decimal number or set the decimal symbol - don't look for it, it's it! One line of code solves these requirements:
<template>
<div>
<input ="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
Warehouse address:/ElemeFE/vue-infinite-scroll
Install:npm install --save vue-infinite-scroll
Infinite scrolling command, a method that triggers binding when scrolling to the bottom of the page.
<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() {
= true;
setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
({ name: ++ });
}
= false;
}, 1000);
}
}
}
</script>
10. Vue-Clampy
Warehouse address:vue-clampy.
Install:npm install --save @clampy-js/vue-clampy
This directive truncates the text in the element and adds an ellipsis to the end. It is implemented using.
<p v-clampy="3">Long text to clamp here</p> <!-- displays: Long text to...-->
11. Vue-InputMask
Warehouse address: vue-inputmask
Install:npm install --save vue-inputmask
This instruction will automatically generate formatted text when you need to format the date in the input box. Developed based on Inputmask library.
<input type="text" v-mask="'99/99/9999'" />
12. Vue-Ripple-Directive
Warehouse address:vue-ripple-directive
Install:npm install --save vue-ripple-directive
Aduardo MarcosThis command written can add ripple effect to the clicked elements.
<div v-ripple class="button is-primary">This is a button</div>
13. Vue-Focus
Warehouse address:vue-focus
Install:npm install --save vue-focus
Sometimes, when a user operates in the interface, he needs to get the focus of a certain input box. This command does this.
<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
Warehouse address:v-blur
Demo: Click here
Install:npm install --save v-blur
Suppose that some parts of your page need to be covered with translucent masks when the visitor is not registered. This instruction can be easily implemented, and you can also customize transparency and transition effects.
<template> <button @click=" = !" >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
Warehouse address:vue-dummy
Demo: available here
Install:npm install --save vue-dummy
When developing an app, you occasionally need to use fake text data or placeholder pictures of specific sizes. This command can be easily implemented.
<template> <!-- the content inside will have 150 words --> <p v-dummy="150"></p> <!-- Display a placeholder image of 400x300--> <img v-dummy="'400x300'" /> </template>
Summarize
Welcome to add more useful Vue custom commands.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.