The very first Vue.js example
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'><</button>{{formattedSelectedDate}}<button v-on:click='increment'>></button></div>",
methods: {
increment: function () {
this.selectedDate = moment(this.selectedDate).add(1, "days")
},
decrement: function () {
this.selectedDate = moment(this.selectedDate).subtract(1, "days")
}
},
computed: {
formattedSelectedDate: function() {
return this.selectedDate.format("dddd, YYYY-MM-DD");
}
}
});
var PointTracker = new Vue({
el: "#PointTracker",
data: {
date: 0
},
components: {
datePicker
}
});