Vue 2.0 Hello World

HTML

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

<div id="app">
  {{ foo }}
  <testlist @foo="dofoo"></testlist>
</div>

CSS

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

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

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

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

.list-move {
  transition: all 0.4s;
}

JavaScript

var testlist = {
	data: function() {
  	return {
    	pitems: [{ id: 1 }, { id: 2, }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }],
    	nextNum: 10,
      foo: 1,
      transitionname: "list",
      op: 1,
    }
  },
  methods: {
  	randomIndex: function() {
      return Math.floor(Math.random() * this.pitems.length)
    },
    add: function() {
      //this.$emit('foo')
      /**/
      var that = this;
      that.$nextTick(function() {
      	that.$nextTick(function() {
          if (that.op === 1) {
          	that.op = 0.5
          } else {
          	that.op = 1
          }
        })
      })
      /**/
      this.pitems.splice(this.randomIndex(), 0, { id: this.nextNum++ })
    },
    remove: function() {
      this.pitems.splice(this.randomIndex(), 1)
    },
  },
  computed: {
  	items: function() {
    	return this.pitems
    },
  },
  template: `<div><button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group v-bind:name="transitionname" tag="p" v-bind:style="{ opacity: op }">
    <span v-for="item in items" v-bind:key="item.id" class="list-item">
      {{ item.id }}
    </span>
  </transition-group></div>`,
}

new Vue({
  el: '#app',
  data: {
    foo: 1,
  },
  components: {
  	'testlist': testlist,
  },
  methods: {
    dofoo: function() {
    	var that = this;
      that.$nextTick(function() {
        that.$nextTick(function() {
        	debugger
          that.foo++
          console.log('dofoo')
        })
      })
    },
  }
})