Javascript Vue组件在html中不可见
我在学校刚开始学习Vue.js，在我的第一个作业中，我将从Vue组件打印h2，但我无法让它工作。我已经创建了vue组件，如下所示Javascript Vue组件在html中不可见,javascript,html,vue.js,Javascript,Html,Vue.js,我在学校刚开始学习Vue.js，在我的第一个作业中，我将从Vue组件打印h2，但我无法让它工作。我已经创建了vue组件，如下所示 var app = new Vue({ el: '#app' }) Vue.component('titleMsg', { template: '<h1>{{ title }}</h1>', data: { title: 'Vue startsida'
var app = new Vue({
el: '#app'
})
Vue.component('titleMsg', {
template: '<h1>{{ title }}</h1>',
data: {
title: 'Vue startsida'
}
})
var-app=新的Vue({
el:“#应用程序”
})
Vue.组件（'titleMsg'{
模板：“{{title}}”，
数据：{
标题：“Vue startsida”
}
})
<body>
<div id="app">
<titleMsg></titleMsg>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
</body>
有人能告诉我我缺少什么吗？它不显示，因为
数据 data() {
return {
title: 'Vue startsida'
}
}
<div id="app">
<title-msg></title-msg>
</div>
它不显示，因为
数据 data() {
return {
title: 'Vue startsida'
}
}
<div id="app">
<title-msg></title-msg>
</div>
为了达到预期的结果，使用指令名称格式（kebabCase）作为组件名称，并根据官方文档“组件的数据选项必须是一个函数”
示例工作代码供参考-
Vue.component（'titleMsg'{
模板：“{{title}}”，
数据：函数（）{
返回{
标题：“Vue startsida”
}
}
})
新的Vue（{el:'#app'}）#应用程序分区{
边框：1px纯黑；
宽度：200px；
}为了达到预期的结果，请使用指令名称格式（kebabCase）作为组件名称，并根据官方文档“组件的数据选项必须是一个函数”
示例工作代码供参考-
Vue.component（'titleMsg'{
模板：“{{title}}”，
数据：函数（）{
返回{
标题：“Vue startsida”
}
}
})
新的Vue（{el:'#app'}）#应用程序分区{
边框：1px纯黑；
宽度：200px；
}