Vuejs Course


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 adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Vue Directives

Last accessed pages

  1. Basic HTML elements (4409)
  2. Volume and Surface Area Calculator for 3D objects (9381)
  3. EasyPhpThumbnail Class (1485)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (58420)
  5. PHP Simple HTML DOM Parser (10196)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (630)
  2. Read Excel file data in PHP - PhpExcelReader (420)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (378)
  4. querySelector and querySelectorAll (368)
  5. Create simple Website with PHP (358)