class 8: vue.js 3组件化基础（1）

原创

已于 2024-10-12 15:54:17 修改 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-09-08 19:54:23 首次发布

组件的嵌套

当我们用脚手架搭建了一个vue项目之后，可以简单看看它的结构，src中的main.js是它的启动入口，文件内容如下

import {
   
    createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

首先导入根组件(App组件)，然后调用createApp函数创建Vue的实例，最后调用mount函数将页面渲染到index.html文件中id="app"的<div>元素上，这一步是将Vue的元素app挂载到DOM上，app元素对应的是App.vue文件，这个文件内容如下。当项目运行起来之后，显示在页面上的就将会是这个文件的template标签内的元素

<!--App.vue-->
<template>
  <div>
<!--    页面头部内容-->
    <div class="header">
      <h4>Header</h4>
      <h4>NavBar</h4>
    </div>
  </div>
  <div class="main">
<!--    页面中间内容-->
    <h4>Banner轮播图内容</h4>
    <ul>
      <li>商品信息1</li>
      <li>商品信息2</li>
      <li>商品信息3</li>
      <li>商品信息4</li>
      <li>商品信息5</li>
    </ul>
  </div>
<!--  页面尾部内容-->
  <div class="footer">
    <h4>Footer</h4>
  </div>
</template>

<script>
export default {
     
     
  name: 'App',
  components: {
     
     }
}
</script>

<style>
.header, .main, .footer{
     
     
  border: 1px solid#999;
  margin-bottom