Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to create more complex directives.
Directive Arguments
We can get directive arguments by getting the value from the binding.arg property.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p v-absolute:[direction]="50">foo</p>
</div> <script>
const app = Vue.createApp({
data() {
return {
direction: "right"
};
}
});
app.directive("absolute", {
mounted(el, binding) {
el.style.position = "absolute";
const s = binding.arg || "top";
el.style[s] = `${binding.value}px`;
}
});
app.mount("#app");
</script>
</body>
</html>
We create the absolute directive which has a mounted hook.
It takes a binding parameter which has the arg property with the argument value which we passed into the square brackets of the directive.
Therefore, it’ll be the direction value.
We set the property of the style with the binding.value , which is the value we passed into the directive right of the equal sign.
Also, we can make the directive’s value by passing an expression as the value of the directive.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input type="range" min="0" max="100" v-model="padding" />
<p v-absolute:[direction]="padding">foo</p>
</div> <script>
const app = Vue.createApp({
data() {
return {
direction: "left",
padding: 0
};
}
});
app.directive("absolute", {
mounted(el, binding) {
el.style.position = "absolute";
const s = binding.arg || "top";
el.style[s] = `${binding.value}px`;
},
updated(el, binding) {
const s = binding.arg || "top";
el.style[s] = `${binding.value}px`;
}
});
app.mount("#app");
</script>
</body>
</html>
We have the absolute directive with the updated hook added.
The updated hook will pick up any updates of the directive’s value .
Therefore, when we move the slider, the ‘foo’ text will move along with it.
Function Shorthand
We can shorten our directive definition with the function shorthand.
If we only have the mounted and updated hooks in our directive, then we can use it.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input type="range" min="0" max="100" v-model="padding" />
<p v-absolute:[direction]="padding">foo</p>
</div> <script>
const app = Vue.createApp({
data() {
return {
direction: "left",
padding: 0
};
}
});
app.directive("absolute", (el, binding) => {
el.style.position = "absolute";
const s = binding.arg || "top";
el.style[s] = `${binding.value}px`;
});
app.mount("#app");
</script>
</body>
</html>
We shortened our absolute directive to include a callback instead of an object with the hooks.
It does the same things like the one in the previous example since we only have the mounted and update hooks in it.
This is a handy shorthand to avoid repeating code.
Object Literals
If we need multiple values in our directive, we can pass in an object literal to it.
Then binding.value has the object we pass in.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p v-custom-text="{ color: 'green', text: 'hello!' }"></p>
</div> <script>
const app = Vue.createApp({});
app.directive("custom-text", (el, binding) => {
const { color, text } = binding.value;
el.style.color = color;
el.textContent = text;
});
app.mount("#app");
</script>
</body>
</html>
to create a custom-text directive that takes an object.
We get the color and text properties of the object from binding.value .
Conclusion
We can create directives easier with some shorthands.
Also, directives can take arguments and values.
