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 type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Vue Directives

Last accessed pages

  1. innerHTML and outerHTML to Get and Replace HTML content (24743)
  2. Creating objects in ActionScript (8553)
  3. PHP getElementById and getElementsByTagName (38311)
  4. Highlight Images on click (4312)
  5. JavaScript Chronometer / Stopwatch (5887)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (149)
  2. Register and show online users and visitors (95)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (88)
  4. Read Excel file data in PHP - PhpExcelReader (87)
  5. JavaScript Course - Free lessons (73)