
In this article I am running through the basics
v-for
To loop through data in an array or object you can use the directive v-for
data: () => ({
info_set: [
'first',
'second',
'third'
]
}),
/* and the list */
<ul>
<li v-for='element in info_set'>{{element}}</li>
</ul>
v-on
v-on can be triggered with an event such as a click of a button
<button v-on:click="sayhi('hello')">click me</button>
/* and the method */
methods: {
sayhi: function(v){
alert(v);
}
},
v-show
v-show is a boolean directive, showing the content only if what is passed to it renders true.
<button @click="message = !message">click me</button>
<p v-show='message'>New P tag</p>
and the script
data: () => ({
message: true,
...
v-if, v-else, v-else-if
v-if is similar to v-show as it is also a conditional and will display the same result however v-show hides the element with css whereas v-if doesn't render the element if the value is false. v-if comes with v-else and v-if-else.
v-model
V-model works together with the input tag where its value is a placeholder. The placeholder is a property name for either data or computed.
<input type="text" v-model='input'>
<h1>{{input}}</h1>
data: () => ({
input: '',
You can use v-model.lazy modifier and the data value will change only when that input is out of focus.
You can use the number modifier to change the data being sent from being a string '123' to being a number 123 with v-model.number
filter
You can use filters for simple alterations to a value.
<input type="text" v-model='input'>
<h1>{{input|capitalize}}</h1>
filters: {
capitalize: function(v){
return v.toUpperCase();
}
},
Computed
For more complicated alterations you can use computed. Computed takes one or more data properties and returns a different property.
<input type="text" v-model='input'>
<h1>{{computed_message}}</h1>
computed:{
computed_message: function(){
return this.input.split('').reverse().join('');
}
},
You can also set up a two way communication between input values by using a getter and setter.
<p>First name: <input type="text" v-model='first'></p>
<p>Last Name<input type="text" v-model='last'></p>
<p>Full Name<input type="text" v-model='full'></p>
computed:{
full:{
get: function(){
return this.first + ' ' + this.last
},
set: function(v){
var array = v.split(' ');
this.first = array[0];
this.last = array[array.length-1];
}
}
},
So you can alter the full name with the first and/or last name and visa versa.
v-bind:class
With Vue.js you can bind a placeholder, an array or a json object.
<h1 v-bind:class='class_name'>This is class bound</h1>
data: () => ({
class_name: 'red_font',
}),
...
<style scoped>
.red_font{
color: red
}
An array:
<h1 v-bind:class=[class_one,class_two]>This is class bound</h1>
data: () => ({
class_one: 'red_font',
class_two: 'blue_background'
}),
...
<style scoped>
.red_font{
color: red
}
.blue_background{
background-color: blue;
}
A Json Object:
<h1 v-bind:class={red_font:true,blue_background:true}>This is class bound</h1>
A Json object allows us to conditionally bind styles based on a data property or computed property.
Rather than writing it inline you can refer to a data property object.
<h1 v-bind:class='class_object'>This is class bound</h1>
data: () => ({
class_object:{red_font:true,blue_background:true}
}),
And in computed:
computed:{
class_object:function(){
return {red_font:true,blue_background:true}
}
},
v-bind:style
You can also bind styles dynamically.
<h1 v-bind:style='{color: colour_choice, background: bg_colour}'>This is class bound</h1>
data: () => ({
colour_choice: 'pink',
bg_colour: 'lightblue'
}),
Or just use a style object
<h1 v-bind:style='style_object'>This is class bound</h1>
data: () => ({
style_object: {
color: 'pink',
background: 'lightblue'
}
}),