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>

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

我试图复制它，甚至在<p>标记后放置一个简单的<intro>，但是除了第一个组件以外，什么都没有显示在屏幕上。我还尝试过使组件位置相对，但还是一无所获。

这是与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

如果要将数据添加到组件，则可以将数据传递给它，以便可以在其中显示。那就是道具进来的地方。

道具是可以在组件上注册的自定义属性。将值传递给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>，道具：['title'] }）;

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

然后页面显示如下。

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

If you want to know more details then refer this once

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

1 个答案: