Vue 3 is in beta and it’s subject to change.
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 the dynamic arguments of a directive.
Dynamic Arguments
Vue 3 directives can take dynamic arguments.
For example, we can write:
<a v-bind:[attributeName]="url"> ... </a>
or:
<a v-on:[eventName]="doSomething"> ... </a>
We can pass in an argument to a directive.
This applies to any directives, including the ones we create.
Modifiers
We can also pass in modifiers to a directive.
For instance, the v-on directive can take a modifier for some event.
We can write:
<form v-on:submit.prevent="onSubmit">...</form>
to let us call event.preventDefault in the onSubmit handler.
This lets us stop the default behavior from happening.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="[https://unpkg.com/vue@next](https://unpkg.com/vue@next)"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="onSubmit">
<input v-model="name" />
</form>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
name: ""
};
},
methods: {
onSubmit() {
console.log(this.name);
}
}
}).mount("#app");
</script>
</body>
</html>
to create a form with the v-on:submit:prevent directive to run the onSubmit method with the event.preventDefault method all in one directive.
Shorthands
We can shorten v-bind to : .
For example, we can write:
<a :href="url"> ... </a>
instead of:
<a v-bind:href="url"> ... </a>
We can also pass in an argument with the shorthand by writing:
<a :[key]="url"> ... </a>
We can use it by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<a :href="url">link</a>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
url: "http://example.com"
};
}
}).mount("#app");
</script>
</body>
</html>
v-on also has their own shorthand.
Instead of writing:
<a v-on:click="doSomething"> ... </a>
We can write:
<a @click="doSomething"> ... </a>
for short.
If we want a dynamic event, we can write:
<a @[event]="doSomething"> ... </a>
So 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">
<button @click="toggle">toggle</button>
<p>{{on}}</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
on: true
};
},
methods: {
toggle() {
this.on = !this.on;
}
}
}).mount("#app");
</script>
</body>
</html>
to add a click listener to our button.
Caveats
Dynamic value has some constraints.
Whatever is inside the square brackets must return a string or null .
null can be used to remove the binding.
Any other value will trigger a warning.
Certain characters aren’t valid in HTML, so we can’t have them as the dynamic argument’s value.
So we can’t have names with spaces of quotes.
Something like:
<a v-bind:['foo ' + bar]="value"> ... </a>
won’t work.
We should also avoid naming keys with uppercase characters since browsers will convert them to lowercase.
JavaScript Expressions
Templates expressions are sandboxes so we can’t use global variables in template expressions.
It can only access the list of global variables from a whitelist.
The whitelist is at https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3.
Conclusion
Vue directives can take dynamic arguments.
Also, there’re various shorthands we can use in place of some directives.
