Vue 2.0 Hello World
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app"></div>
JavaScript
Vue.component('test', {
template: '<div><span>some content</span></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>'
})