Directives are special attributes with the v- prefix. A directive's job is to reactively apply side effects to the DOM when the value of its expression changes.
Let's see an example with a conditional directive: v-if.
Here, the v-if directive would remove/insert the <h4> element based on the truthiness of the value of the expression seen.
<div id='app'>
<h3 v-if='seen'>Now you see me</h3>
Click on this button to insert /remove the H4 element:
<button @click='seen =!seen'>Click</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {seen: false}
})
</script>
Another example with the
v-once directive, which is used to perform one-time interpolations that do not update on data change.
<div id='app'>
<span v-once>This text will never change: {{ msg }}</span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {msg: 'Life is Love'}
});
//Trying to change the msg
vm.msg ='Another message';
</script>
Arguments for Directives
Some directives can take an "argument", denoted by a colon after the directive name ( v-directive:argument ).
For example, the v-bind directive is used to reactively update an HTML attribute.
Examples
1. In the following example,
href is the argument, which tells the
v-bind directive to bind the element's href attribute to the value of the expression
url.
<div id='app'>
<a v-bind:href='url'>Link</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {url: '//coursesweb.net/'}
})
</script>
2. The
v-html directive is used to output real HTML, its value is the data property name with the html string.
<div id='demo'>
<div v-html='str_htm'></div>
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
str_htm: '<h3>Forgiveness heals</h3><b>I forgive everyone, including myself</b>, the mind becomes healthy and <i>the body heals</i>.'
}
})
</script>
3. Another example is the
v-on directive, which listens to DOM events:
<div id='app'>
<button v-on:click='test_f'>Click Btn</button>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
test_f: function(){
alert('MarPlo.net');
}
}
})
</script>
- Here the argument (click) is the event name to listen to, and
test_f is the method name that will be called.
Dynamic Arguments for Directives
In Vue JS you can use dynamic arguments, by wrapping it with square brackets ( v-directive:[argument] ).
In the following example ev_name will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument.
<div id='app'>
<button v-on:[ev_name]='test_f'>Click Btn</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {ev_name: 'click'},
methods: {
test_f: function(){
alert('MarPlo.net');
}
}
})
</script>
When
ev_name value is "click",
v-on:[ev_name] will be equivalent to
v-on:click.
Modifiers
Modifiers indicate that a directive should be bound in some special way. They are postfixes denoted by a dot.
For example, the .prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:
<form v-on:submit.prevent='onSubmit'> ... </form>
v-bind and v-on Shorthands
Vue provides special shorthands for two of the most often used directives, v-bind and v-on.
v-bind shorthand
<!-- full syntax -->
<a v-bind:href='url'> ... </a>
<!-- shorthand -->
<a :href='url'> ... </a>
<!-- shorthand with dynamic argument -->
<a :[key]='url'> ... </a>
v-on shorthand
<!-- full syntax -->
<a v-on:click='doSomething'> ... </a>
<!-- shorthand -->
<a @click='doSomething'> ... </a>
<!-- shorthand with dynamic argument -->
<a @[event]='doSomething'> ... </a>