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 is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Vue Directives

Last accessed pages

  1. Get the value of multiple selected checkboxes with same name (6448)
  2. Disable button and Enable it after specified time (12197)
  3. Multiple Select Dropdown List with JavaScript (11450)
  4. Volume and Surface Area Calculator for 3D objects (10395)
  5. Creating Tabs Effect with JavaScript (774)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (711)
  2. SHA256 Encrypt hash in JavaScript (565)
  3. PHP Unzipper - Extract Zip, Rar Archives (551)
  4. Read Excel file data in PHP - PhpExcelReader (540)
  5. Create simple Website with PHP (456)