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

 <div id="liveapp">
  <ul>
    <li>
      {{ item.web }} - ${{ item.rate }}
    </li>
  </ul>
</div>

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;
    }
  }
});

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);
    }
  }
});

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');
        	}
        }
 });      

Example – 3