Vue 2.0 Hello World

by Kingdaro

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

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

JavaScript

Vue.component('test', {
	template: '<div>some content</div>'
})

Vue.component('app', {
  name: 'app',
  template: `
    <div id="app">
      <button @click="visible = !visible">toggle elements</button><br>
      <label>use component? <input type="checkbox" v-model="useComponent"></label>
      <template v-if="visible">
        <template v-if="useComponent">
          <test v-for="i in 1000" :key='i' />
        </template>
        <template v-else>
          <span v-for="i in 1000" :key='i'>{{ i }}<br></span>
        </template>
      </template>
    </div>
  `,
  data () {
    return {
      visible: false,
      useComponent: false
    }
  },
  beforeUpdate () {
    console.time('render')
  },
  updated () {
    console.timeEnd('render')
  }
})

new Vue({
  el: '#app',
  template: '<app></app>'
})