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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Vue Directives

Last accessed pages

  1. Contact page - CoursesWeb (33624)
  2. Tabs effect with CSS (34278)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (41080)
  4. Get CSS property value with getComputedStyle ot jQuery (3614)
  5. PHP MySQL - SELECT, ORDER BY (11757)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2134)
  2. Contact page - CoursesWeb (2069)
  3. Tabs effect with CSS (2069)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (674)
  5. Insert, Select and Update NULL value in MySQL (535)