Vuejs Examples – Vuejs examples for beginners – application Vuejs 2

Vuejs Examples – Vuejs examples for beginners – application Vuejs 2

A nice or easy collection of often some very useful examples done using Vue.js

There are Following List of VueJs: The Basics

-Creating a Vue Instance with new Vue(),
-2-Way Data Binding with v-model,
-Handling Events with v-on,
-Conditional Rendering with v-if and v-show,
-Rendering Lists in Vue with v-for,
-Computed Properties

Example – 1

v-for Displaying a List – vue.js(Vuejs Examples)

index.html
[php]

[/php]
index.js
[php]
var vm = new Vue({
el: ‘#liveapp’,
data: {
products: [
{web: ‘infinityknow’, rate: 1000},
{web: ‘infinityknow/tutorials’, rate: 1800},
{web: ‘infinityknow/status’, rate: 1400},
{web: ‘new infinityknow’, rate: 300}
]
}
});
[/php]

Computed Properties and Watchers — Vue.js(Vuejs examples for beginners)

index.html
[php]

[/php]

index.js
[php]
var vm = new Vue({
el: ‘#infinityknow’,
data: {
j: 1
},
computed: {
doubleX: function() {
return this.j * 2;
}
}
});

[/php]
Demo Vuejs

v-on:click – Vuejs examples for beginners

index.html
[php]

[/php]

index.js
[php]
var vm = new Vue({
el: ‘#vue-instance’,
data: {
cast: ”
},
methods: {
sayHello: function(){
alert(‘Hey there, ‘ + this.cast);
}
}
});
[/php]
Example – 2

vue date filter Example – vuejs date format

index.html
[php]

Your Get Data

Your Send Data

[/php]

index.js
[php]
new Vue({
el: ‘body’,
data: {
date: null,
},
methods: {
simpleDataGet: function() {
var serverDate = ‘2015-06-26’;
this.date = this.frontEndDateFormat(serverDate);
},
DataSaveNew: function() {
var serverDate = this.backEndDateFormat(this.date);
alert(serverDate);
},
frontEndDateFormat: function(date) {
return moment(date, ‘YYYY-MM-DD’).format(‘DD/MM/YYYY’);
},
backEndDateFormat: function(date) {
return moment(date, ‘DD/MM/YYYY’).format(‘YYYY-MM-DD’);
}
}
});
[/php]

Example – 3