Vue 2.0 Hello World
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<button v-on:click="addItem()">Add Item</button>
<div id="container" style="max-height:200px; overflow-y: auto;">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
</div>
JavaScript
var vm = new Vue({
el: '#app',
data: {
items: []
},
methods: {
addItem: function() {
this.items.push("Item #"+this.items.length);
this.scrollToEnd();
},
scrollToEnd: function() {
var container = this.$el.querySelector("#container");
container.scrollTop = container.scrollHeight;
},
populate: function() {
for(var i = 0; i<100; i++) {
this.items.push("Item #"+i);
}
}
}
});
vm.populate();