The very first Vue.js example

by Saurabh Mimani

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>


        <div id="PointTracker">
            <date-picker />
            <br>
            <span> hey {{date}} </span>
        </div>

JavaScript

var datePicker = Vue.component("datePicker", {
    data: function() {
        return { selectedDate: moment() }
    },
    template: "<div><button v-on:click='decrement'>&lt;</button>{{formattedSelectedDate}}<button v-on:click='increment'>&gt;</button>{{selectedDate}}</div>",
    methods: {
        increment: function () {
            console.log(JSON.stringify(this.selectedDate))        
            this.selectedDate.add(1, "days")
            console.log(JSON.stringify(this.selectedDate))
        },
        decrement: function () {
            this.selectedDate.subtract(1, "days");
        }
    },
    computed: {
        formattedSelectedDate: function() {
            return this.selectedDate.format("YYYY-MM-DD");
        }
    }
});

var PointTracker = new Vue({
    el: "#PointTracker",
    data: {
        date: 0
    },
    components: {
    	datePicker
    }
});