• vue组件的基本介绍

    在学习组件之前，我们先了解一下项目的结构

    一.项目的结构

    1.项目的总体结构

    在这里插入图片描述
    （1）node_modules:用来存放第三方依赖包
    （2）public：公共的静态资源目录
    （3）src：项目的源代码目录(程序员写的源代码都放在此目录下)
    （4）.gitignore：是Git的忽略文件
    （5）index.html：是SPA单页面应用程序中唯一的HTML页面
    （6）package.json是项目的包管理配置文件

    2.src目录结构

    在这里插入图片描述
    （1）assets目录用来存放项目中的静态资源文件(css、fonts等)
    （2）components目录用来存放项目中的自定义组件
    （3）App.vue是项目的根组件
    （4）index.css是项目的全局样式表文件
    （5）main.js是整个项目的打包入口文件

    3.项目运行流程

    在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
    其中：
    ① App.vue 用来编写待渲染的模板结构
    ② index.html 中需要预留一个 el 区域
    ③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
    实例：
    （1）在 App.vue 中编写模板结构
    清空 App.vue 的默认内容，并书写如下的模板结构：

    <template>
  <h1>这是App组件h1>
template>

    • 1
    • 2
    • 3

    （2）在 index.html 中预留 el 区域

    <body>
  <div id="app">div>
  <script type="module" src="/src/main.js">script>
body>

    • 1
    • 2
    • 3
    • 4

    （3）在 main.js 中进行渲染

    // 1.从vue中按需导入 creatApp函数
// creatApp函数的作用：创建vue的“单页面应用程序实例”
import { createApp } from "vue";
// 2.导入待渲染的APP组件
import App from "./App.vue";
import "./index.css";
// 3.调用createApp函数，返回值是“单页面应用程序的实例”，用常量spa_app进行接收
const spa_app = createApp(App);
// 4.调用spa_app实例的mount方法，用来指定vue实际要控制的区域
spa_app.mount("#app");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    二.Vue组件

    1.什么是组件化开发

    （1）组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。
    （2）前端组件化开发的好处主要体现在以下两方面：
    ⚫ 提高了前端代码的复用性和灵活性
    ⚫ 提升了开发效率和后期的可维护性
    （3）vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质
    上就是一个 vue 的组件。

    2… vue 组件组成结构

    每个 .vue 组件都由 3 部分构成，分别是：
    ⚫ template -> 组件的模板结构
    ⚫ script -> 组件的 JavaScript 行为
    ⚫ style -> 组件的样式
    其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

    2.1 template -> 组件的模板结构

    （1）组件的 template 节点
    vue 规定：每个组件对应的模板结构，需要定义到