gpt4 book ai didi

javascript - Vue组件在html中不可见

转载 作者:行者123 更新时间:2023-11-30 10:58:40 24 4
gpt4 key购买 nike

我刚开始在学校使用 Vue.js,在我的第一个作业中,我打算从 vue 组件打印一个 h2,但我无法让它工作。我已经创建了 vue 组件,如下所示。

   var app = new Vue({
el: '#app'

})

Vue.component('titleMsg', {
template: '<h1>{{ title }}</h1>',
data: {
title: 'Vue startsida'
}
})

还有我的 html 代码。

   <body>
<div id="app">
<titleMsg></titleMsg>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
</body>

有人可以告诉我我缺少什么吗?

最佳答案

为了达到预期的结果,根据官方文档使用指令名称格式(kebabCase)作为组件名称和“组件的数据选项必须是一个函数”
https://v2.vuejs.org/v2/guide/components.html

Instead, a component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object:

示例工作代码供引用-

 Vue.component('titleMsg', {
template: '<h1>{{ title }}</h1>',
data:function() {
return {
title: 'Vue startsida'
}
}
})

new Vue({ el: '#app' })
#app div{
border: 1px solid black;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
<div id="app">
<title-msg></title-msg>
</div>
</body>

codepen - https://codepen.io/nagasai/pen/GRRereG

关于javascript - Vue组件在html中不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58962614/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com