用HTML定义三个组件MyHeader,MyBody,MyFooter,并在Vue.app主文件中引入组件标签,显示组件中的内容
时间: 2024-05-12 20:14:38 浏览: 22
HTML定义三个组件MyHeader,MyBody,MyFooter的代码如下:
```html
<!-- MyHeader组件 -->
<template id="my-header">
<header>
<h1>Welcome to My Website</h1>
</header>
</template>
<!-- MyBody组件 -->
<template id="my-body">
<section>
<h2>About Us</h2>
<p>We are a team of developers who love building awesome websites.</p>
</section>
</template>
<!-- MyFooter组件 -->
<template id="my-footer">
<footer>
<p>© 2021 My Website. All rights reserved.</p>
</footer>
</template>
```
在Vue.app主文件中引入组件标签,显示组件中的内容的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
<my-body></my-body>
<my-footer></my-footer>
</div>
<script type="text/javascript">
Vue.component('my-header', {
template: '#my-header'
});
Vue.component('my-body', {
template: '#my-body'
});
Vue.component('my-footer', {
template: '#my-footer'
});
var app = new Vue({
el: '#app'
});
</script>
</body>
</html>
```
在上面的代码中,我们首先定义了三个组件MyHeader、MyBody和MyFooter,然后在Vue.app主文件中引入这三个组件,并在页面中使用组件标签来显示组件的内容。最后,我们通过Vue.component()方法将三个组件注册到Vue实例中。