Vue.js 2 template

by mjaric

HTML

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

<div id="app">
  <p>{{ test1 }}</p>
  <p>{{ test2 }}</p>
  <p>{{ test3 }}</p>
  <p>{{ test4 }}</p>
  <p>{{ debug1 || 'undefined' }}</p>
  <p>{{ debug2 || 'undefined' }}</p>
</div>

Babel + JSX

new Vue({
  el: '#app',
  mixins: [
  	{
    	data(){
      	return {
        	test0: 12
        }
      },
      computed: {
      	debug1 () { return this.test1 },
        test2 () { return this.test1 + 1 },
        debug2 () { return this.test3 },
        test4 () { return this.test3 + 1 },
      },
      mounted () {
      	this.doSome()
      },
      methods: {
      	doSome () {
        	console.log('do some')
        	setTimeout(this.doSome, 1000)
        }
      }
    }
  ],
  data(){
  	return {
    	test1: 1,
    }
  },
  props: {
  	test3: {
    	default: 2
    }
  }
})