Vue JS Directives

Hello, today I will talk about directives that have an important place for Vue Js.

Directives

These are features that can be added directly to HTML codes. Thanks to the directives, dynamic properties are given to HTML codes.

Directive formats are v- …...

If we take a general look at the directives:

• v-text
• v-html
• v-show
• v-if
• v-else-if
• v-else
• v-for
• v-on
• v-bind
• v-model

Let’s take a closer look at these directives.

v-text

The v-text directive is a Vue.js directive used to update an element’s textContent with our data.

Example:

HTML

<span v-text="msg" id="app"></span>
<!-- same as -->
<span>{{msg}}</span>

Vue JS

var app = new Vue({
el: '#app',
data: {
message: 'Hello this is text.'
}
})

v-html

The v-html directive is a Vue.js directive used to update an element’s innerHTML with our data. This is what separates it from v-text which means while v-text accepts string and treats it as a string it will accept string and render it into HTML.

Example:

HTML

<div id="home">
      <p v-html="dataHtml"></p>
</div>

Vue JS

var app = new Vue({
el: "#home",
data:{
      dataHtml: "<b>Hello</b>"
}
})

v-show

The v-show directive is a Vue.js directive used to toggle the display CSS property of an element with our data. If the data is true it will make it visible else it will make it invisible.

Example:

HTML

<div id="home">
      <p v-show="data1">{{ data1 }}</p>
      <p v-show="data2">{{ data2}}</p>      
      <p v-show="data3">dont work</p>
</div>

Vue JS

var app = new Vue({
el: “#home”,
data:{
 data1: “Hello”,
 data2: true,
 data3: false
}
})

v-if

The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.

Considering v-if, v-else-if and v-else directives in one example

Example:

HTML

<div id="app">
<h2 v-if="data > 50">
data is greater than 50
</h2>

v-else-if

v-else-if directive is a Vue.js directive used to toggle the display CSS property of an element depending on a condition when if the condition is not satisfied.

HTML

<h2 v-else-if="data < 50">
data is smaller than 50
</h2>

v-else

v-else directive is used to display content only when the expression in adjacent v-if resolves to false.

HTML

<h2 v-else>
data is equal to 50
</h2>
</div>

Vue JS

var app = new Vue({
el: '#app',
data: {
data: 40
}
})

v-for

v-for directive is a Vue.js directive used to loop over a data usually an array or object.

Example:

HTML

<div id="app">
<h2 v-for="data in datas">
{{ data }}
</h2>
</div>

Vue JS

var app = new Vue({
el: '#app',
data: {
datas: [
'String1',
'String2',
'String3'
]
}})

The three strings in the array sequentially rotated and printed on the screen.

v-on

We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.

Example:

HTML

<div id="app"> 
<button v-on:click="counter += 1">Add 1</button>  
<p>The button above has been clicked {{ counter }} times.</p>
</div>

Vue JS

var app= new Vue({   
el: '#app',   
data: {     
counter: 0   
}})

With this code, as you press the button, the number on the screen increases by 1.

v-bind

With v-bind we can manipulate any attribute in an element and add optional attribute if we want.

Example:

HTML

<div id="home">
<p v-bind:class="className" v-bind:id="idValue">Name</p>
</div>

Vue JS

var app = new Vue({
el: "#home",
data:{
      className: "Hello",
      idValue: "12"
}
})

v-model

We can use the v-model directive to create two-way data bindings on form input, textarea, and select elements

Example:

HTML

<div id="home">
      <input type="text" v-model="inputt" />
      <p>{{ inputt }}</p>
</div>

Vue JS

var app = new Vue({
el: "#home",
data:{
      inputt: "Hello"
}
})

Yess! We have finished the most used Vue Js directives!

I hope this article has helped you.

See you in the next post.