Vue 2.0 Hello World

by nkovacs

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <testlist></testlist>
</div>

CSS

.list-item {
  display: inline-block;
  margin-right: 10px;
}

.list-enter-active,
.list-leave-active {
  transition: all 1s;
}

.list-enter,
.list-leave-to
/* .list-leave-active below version 2.1.8 */

  {
  opacity: 0;
  transform: translateY(30px);
}

JavaScript

var testlist = {
	data: function() {
  	return {
    	items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    	nextNum: 10,
    }
  },
  methods: {
  	randomIndex: function() {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function() {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function() {
      this.items.splice(this.randomIndex(), 1)
    },
  },
  template: `<div><button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group></div>`,
}

new Vue({
  el: '#app',
  components: {
  	'testlist': testlist,
  }
})