Vue.js 不会在屏幕上显示多个组件

Question

我目前正在开发一个 vue.js 应用程序。我使用的是 CDN，而不是 CLI 安装。

我刚刚创建了这个组件

Vue.component('intro', {
    template: '<div id="intro">\n' +
    '<div class="content">\n' +
    '    <img src="images\\logo.svg" alt="" id="logo">\n' +
    '<h2>Hello! My name is Juliana Villegas. I am an interactive media designer. I love mobile, web and creative development. <br> <span id="welcome">Welcome to my portafolio!</span></h2>\n' +
    '</div>\n' +
    '</div>'
})

我让它像这样出现在我的 html 中：

<div id="app">
    <intro></intro>

</div>

组件在屏幕上显示得很好，但我创建的其他所有内容都不可见。

我尝试复制它，甚至在<intro> 标记之后放置一个简单的<p>，但除了第一个组件之外，屏幕上没有显示任何内容。 我也尝试过使组件位置相对，但仍然没有。

是不是和vue有关，还是我css写错了？ 这是css如何走远

body{
    background-color: black;
    overflow: scroll;
}
#stars-container{
    z-index: 0;
}
#intro{
    z-index: 99;
    width: 100vw;
    height: 100vh;
    display: flex;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
}
#logo{
    width: 30vw;
margin-bottom: 5vh;
}
img{

}
h2{
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    color: #FFFFFF;
    font-size: 16pt;
}
#welcome{
    font-weight: 700;
}
p{
color: #FFFFFF;
}

Answer 1

如果您想向组件添加数据，则可以将数据传递给它，以便它可以显示在其中。这就是道具的用武之地。

Props 是您可以在组件上注册的自定义属性。当一个值被传递给一个 prop 属性时，它就成为该组件实例上的一个属性。要将标题传递给您的组件，然后它可以使用道具将其包含在该组件接受的道具列表中

对于您的问题，我们可以通过以下方式将数据传递给组件。

Vue.component('intro', { 模板：<div id="intro"> <h4>{{title}}</h4> <div class="content"> <img src="images\\logo.svg" alt="" id="logo"> <h2>Hello! My name is Juliana Villegas. I am an interactive media designer. I love mobile, web and creative development. <br> <span id="welcome">Welcome to my portafolio!</span></h2> </div> </div>, 道具：['标题'] });

然后通过以下方式将此模板包含在您的网页中。

然后页面看起来像这样..

This image show out put after template included in the webpage.

If you want to know more details then refer this once