January 30, 2019
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
v-for Displaying a List – vue.js(Vuejs Examples)
index.html
<div id="liveapp"> <ul> <li> {{ item.web }} - ${{ item.rate }} </li> </ul> </div>
index.js
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} ] } });
Computed Properties and Watchers — Vue.js(Vuejs examples for beginners)
index.html
<div id="infinityknow"> result: {{ doubleX }} </div>
index.js
var vm = new Vue({ el: '#infinityknow', data: { j: 1 }, computed: { doubleX: function() { return this.j * 2; } } });
Demo Vuejs
v-on:click – Vuejs examples for beginners
index.html
<div id="vue-instance"> Please Enter your Cast: <button>Hey there!</button> </div>
index.js
var vm = new Vue({ el: '#vue-instance', data: { cast: '' }, methods: { sayHello: function(){ alert('Hey there, ' + this.cast); } } });
Example – 2
vue date filter Example – vuejs date format
index.html
<div> </div> <button type="button"> Your Get Data </button> <button type="button"> Your Send Data </button>
index.js
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'); } } });