#Day 3 : Vue Directives || 30 Days of Vue

Today we are going to talk about Vue-Directives.

Here are some popular Vue-Directives that are listed down.

v-text :

Instead of using interpolation, you can use v-text. It performs the same job.

HTML :
<h1 v-text="user"></h1>
main.js :
new Vue({
    el:"#app",
    data(){
        return{
            user:"Rasel",
        }
    },    
})

v-once:

for example, you want to bind a name property using interpolation in your template. Now when the name property updates, the view also updates. But v-once doesn’t update the changed value.

HTML :
<h1 v-once>{{user}}</h1>
main.js :
new Vue({
    el:"#app",
    data(){
        return{
            user:"Rasel",
        }
    },    
})

v-html :

when you want to show data with HTML, that you can use v-html.

HTML :
<div v-html="user"></div>
main.js
new Vue({
    el:"#app",
    data(){
        return{
            user:"<h1>Rasel</h1>",
        }
    },    
})

v-bind :

If you want to update attributes, then you can go through with the v-bind. You can also bind attributes with (:) colon.

HTML :
<img v-bind:src="img" alt="">
main.js :
new Vue({
    el:"#app",
    data(){
        return{
            user:"<h1>Rasel</h1>",            img:`https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg`
        }
    },    
})

v-model

The v-model is used when you want tow way bind. It is popular to use in the form. When the user wants to change the form data, it also changes the Vue data property.

HTML :
<form>
 <input type="text" v-model="user">
</form>
<h2>Output: {{user}}</h2>
main.js :
new Vue({
    el:"#app",
    data(){
        return{
            user:""           
        }
    },    
})

v-if :

Oftentimes, We need to render a component or an element conditionally. For that, we can you v-if.

HTML :
<h1 v-if="isMorning">Hello World</h1>
main.js :
new Vue({
    el:"#app",
    data(){
        return{
            isMorning:true          
        }
    },    
})

v-else :

It does not expect any expression. To use v-else, we then must have v-if previous. Here basically maintains a chain *v-if — -v-else

HTML :
<h1 v-if="isShow">Good Morning</h1>
<h2 v-else>Good Evening</h2>
main.js :
new Vue({
    el:"#app",
    data(){
        return{
            isMorning:true          
        }
    },    
})

v-else-if:

Same thing as v-else.The previous sibling element must have a v-if. It also maintains a chain *v-if — -v-else-if — -v-else.

HTML :
<h2 v-if="isMorning">Good Morning</h2>
<h2 v-else-if="isEvening">Good Evening</h2>
<h2 v-else>Goodbye</h2>
main.js :
new Vue({
    el:"#app",
    data(){
        return{
            isMorning:false,
            isEvening:false       
        }
    },    
})

v-for :

List rendering is one of the most commonly used practices in front-end development. In Vue to iterate element, you can use this special syntax (v-for=”alias in expression”).To force it to reorder element, you should provide an ordering hint with (:key)

<ul>
   <li v-for="num in numbers">{{num}}</li>
</ul>
main.js :
new Vue({
    el:"#app",
    data(){
        return{
           numbers:[1,2,3,4,5,6]
        }
    },    
})

v-on :

• The v-on directive can be used to create event listeners within the DOM to enable to do something when a particular event happens. You can also use @ to declare an event in Vue. There are some popular events :
• click
• submit
• keyup etc

and this event has some modifiers like :

• @click.stop=”” (the click event propagation will be stopped)
• @submit.prevent=”” (the submit event will no longer reload the page)
• @click.capture=”” (Use capture mode when adding the event listener)
• @click.self=”” (only trigger handler if event.target is the same element itself)

To learn more about Vue event: https://vuejs.org/v2/guide/events.html#Key-Codes

HTML :
<h1>{{user}}</h1>
<button v-on:click="user='Pulkit'">Change User</button>
main.js :
new Vue({
    el:"#app",
    data(){
        return{
            user:"Rasel"
        }
    },    
})

Go to the Vue.js Directive page to learn more : https://v3.vuejs.org/api/directives.html