Review the part 3
Last time we became familiar with the most relevant options of Vue object. We have seen some example as well, and as I mentioned last time, now I would like to introduce the template part of the Vue Framework.
We will talk about these topics
Interpolation
Interpolation is a term for exchanging a property to its assigned value or evaluate an expression or returning the result of a function etc.. For example, when Vue recognize a curly bracket in the template during the compilation phase, the modification is going to happen. Interpolation doesn't depend on curly brackets. In the following example, we changed the curly brackets to a v-once attribute and the output will be the same. You could say what a magic! But in reality, it is just a directive.
<span>Message: {{ msg }} </span>
<span v-once>This will never change: {{ msg }} </span>
What is a directive?
Well, it is an essential building block of Vue.js. It is an attribute with a value what we declare on a starting tag of an HTML element. It has a full notation which is 'v-' and a shorter one which is the : . The official term for the latter one is shorthand notation anyway. The other important thing we need to note is the notation of the events. VueJS similarly to the native JavaScript contains events. We can invoke them, ( eg. 'v-on:click' ). The shorthand version of this is the (@click).
The essential information about directives:
- they have regular v- type,
- they have event v-on:[eventname] type
- they have modifier type
- and they have full and shorthand notation v- = : v-on = @
Filters
Filters are useful when we need to filter or modify the output. We can use them in the curly brackets like this {{ message | capitalize }} and in the v-bind directive to change the result like this:
<div v-bind:id="rawId | formatId"></div>
Conditions
Our main.js contains the following code:
// content of main.js
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
valid:true,
fruit:"apple"
}
})
V-IF
<div id="app">
<div v-if="valid">Valid</div>
</div>
V-ELSE
<div id="app">
<div v-if="valid">Valid</div>
<div v-else>Not Valid</div>
</div>
V-ELSE-IF
<div id="app">
<div>
<div v-if="fruit=='apple'">apple</div>
<div v-else-if="fruit=='orange'">orange</div>
<div v-else>rest</div>
</div>
</div>
V-SHOW
<div id="app">
<div v-show="valid">visible</div>
</div>
V-IF vs V-SHOW
The difference between v-if and v-for is the working mechanism. The first one doesn't generate the HTML code into the DOM if the evaluated expression is false or we are in the false branch of a condition. But v-show does. So the DOM will contain the true and the false scenarios but only the true side will be visible for the user in the output. It is like a css based hiding.
Loops
Loops are good if you like to go through a list of something. Something refers to different composite data types here. A template of Vue can only have one type of loop, and that is the v-for loop. We can use for loops in different contexts. VueJS documentation about the for loops contextual usage is quite clear here.
What is coming next?
Next time, I am going to implement a sample application which is going to cover the knowledge what we have learned in the last couple of parts in this series.