Vue组件的data必须是一个函数、单个根元素、局部组件

<div id="app">
<my-button></my-button>
</div>
<script>
Vue.component('my-button', {
template: '<button @click="count++">{{ msg }} {{ count }}</button>'
,data: function () {
return {
count: 0,
msg: '点我啊'
}
}
})

let vm = new Vue({
el: '#app'
,data: {
msg: 'liang'
}
})
</script>

<div id="app">
<my-button></my-button>
</div>
<script>
Vue.component('my-button', {
template: `
<ul>
<li>1</li>
<li>2</li>
</ul>
`
})

let vm = new Vue({
el: '#app'
,data: {
msg: 'liang'
}
})
</script>

<div id="app">
<my-span></my-span>
</div>
<script>
var mySpan = {
template: '<p>12345</p>'
,data: function(){
return {

}
}
}

let vm = new Vue({
el: '#app'
,data: {
msg: 'liang'
}
,components: {
'my-span': mySpan
}
})
</script>