今天写Vue的时候遇到了件怪事,按类似如下这样的方式定义了几个组件,该写的都写了。结果死活生不了效:
<div id="app">
<myHello></myHello>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("myHello", {
template: '<div>你好</div>'
});
var vm = new Vue({
el: "#app",
data: {
type: 'A'
}
})
</script>
最后问题是出在组件命名方式上面,改成小写字母就好,因为html不区分大小写:
<div id="app">
<myhello></myhello>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("myhello", {
template: '<div>你好</div>'
});
var vm = new Vue({
el: "#app",
data: {
type: 'A'
}
})
</script>
网上查了下,如果用大写字母的话,在html标签中就得用短横线来分割单词,下面这样的写法也可以:
div id="app">
<my-hello></my-hello>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("myHello", {
template: '<div>你好</div>'
});
var vm = new Vue({
el: "#app",
data: {
type: 'A'
}
})
</script>
</body>