vue组件的基本介绍

ゝ一纸荒年。 2024-04-08 08:18 89阅读 0赞

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

## 一.项目的结构 ##

### 1.项目的总体结构 ###

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

### 2.src目录结构 ###

![在这里插入图片描述][3c2f10f92dbb4eb2967a4ad756a5cc87.png]  
（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>

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

（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");

## 二.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 规定：每个组件对应的模板结构，需要定义到 `<template>` 节点中。  
注意：`<template>` 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素。  
（2）在 template 中定义根节点  
①在 vue 2.x 的版本中，`<template>` 节点内的 DOM 结构仅支持单个根节点：

<template>
      <div>//该实例以div为根节点
        <h1>这是App组件1</h1>
        <h2>>这是App组件2</h2>
      </div>
    </template>

②但是，在 vue 3.x 的版本中，`<template>` 中支持定义多个根节点：

<template>
      <h1>这是App组件1</h1>
      <h2>>这是App组件2</h2>
    </template>

#### 2.2 组件的 script 节点 ####

（1）vue 规定：组件内的 `<script>` 节点是可选的，开发者可以在 `<script>` 节点中封装组件的 JavaScript 业务逻辑。  
`<script >` 节点的基本结构如下：  
![在这里插入图片描述][9939427696444ac894d4fde9958af1bb.png]  
（1）script 中的 name 节点  
①可以通过 name 节点为当前组件定义一个名称：  
②在使用 vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件。  
（2） script 中的 data 节点  
①vue 组件渲染期间需要用到的数据，可以定义在 data 节点  
②vue 规定：组件中的 data 必须是一个函数，不能直接指向一个数据对象。

<template>
      <div>
        <h1>这是App组件1</h1>
        <h2>这是App组件2---{
       { username }}}</h2>
      </div>
    </template>
    <script>
    export default {
          
      //name属性指向的是当前组件的名称(建议：每个单词的首字母大写)
      name: 'MyApp',
      data() {
          
        return {
          
          username: 'zhangsan',
        }
      },
    }
    </script>

（3）script 中的 methods 节点  
组件中的事件处理函数，必须定义到 methods 节点中，示例代码如下：  
![在这里插入图片描述][5979e763936140039211c4de8012af67.png]

#### 2.2 组件的 style 节点 ####

(1)vue 规定：组件内的 `<style>` 节点是可选的，开发者可以在 `<style>` 节点中编写样式美化当前组件的 UI 结构。  
`<script >` 节点的基本结构如下：  
![在这里插入图片描述][56230988f5b14882aab7e46d01200588.png]  
(2)其中 `<style>` 标签上的 lang=“css” 属性是可选的，它表示所使用的样式语言。默认只支持普通的 css 语法，可  
选值还有 less、scss 等。  
(3)如果希望使用 less 语法编写组件的 style 样式，可以按照如下两个步骤进行配置：  
① 运行 npm install less -D 命令安装依赖包，从而提供 less 语法的编译支持  
② 在 `<style>` 标签上添加 lang=“less” 属性，即可使用 less 语法编写组件的样式

![在这里插入图片描述][c73db87efb604efdaa07fe9a5b8de612.png]

## 三.Vue组件的使用步骤 ##

### 1.组件之间的父子关系 ###

（1）组件在被封装好之后，彼此之间是相互独立的，不存在父子关系  
![在这里插入图片描述][8ff78b02b6584aa58adce80a108fcb3d.png]  
（2）在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系  
![在这里插入图片描述][552e3d9945324a919445e593018391e7.png]

### 2.使用组件的三个步骤 ###

![在这里插入图片描述][9d5cdc39ddbd4e6196764a778ae9969f.png]  
注意：此处的@代表src路径

### 3.通过components注册的是私有组件 ###

![在这里插入图片描述][0d878a525cf641918e40d07a66f90500.png]

### 4.注册全局组件 ###

（1）在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件。例如：  
![在这里插入图片描述][d62e669c30084f7a9ab395d48e34878b.png]  
（2）在其他组件中不需要注册，就可以使用这个全局组件了

![在这里插入图片描述][e26b27647a97490b90c448d043468e62.png]

[5274777ed0ac42088fd3276f7e1833a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/11d0f1faf2b04cd0969ae1b06534b462.png
[3c2f10f92dbb4eb2967a4ad756a5cc87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/f8d68e50bbc247f4a6904ad8c0bfb701.png
[9939427696444ac894d4fde9958af1bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/bafe1222feef4118af947911a687d254.png
[5979e763936140039211c4de8012af67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c5ed5dd297a443f99b545e83ee26d9ea.png
[56230988f5b14882aab7e46d01200588.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1bd89b874e094f729fe5a9a79b6e5ad8.png
[c73db87efb604efdaa07fe9a5b8de612.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0916edec8dd14575b4ce39acc1dbb9f0.png
[8ff78b02b6584aa58adce80a108fcb3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/dfcd71b813ff4f6f836891cda3083488.png
[552e3d9945324a919445e593018391e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/37cd8cc4b52c4a348a910d2dc54fcacc.png
[9d5cdc39ddbd4e6196764a778ae9969f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/42af7bdf1af94a338db5f9a1904cfa7b.png
[0d878a525cf641918e40d07a66f90500.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ee2d17f7c2a74a649c138a9b9b2bf8e6.png
[d62e669c30084f7a9ab395d48e34878b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1b0cd8eaeaaa4a37bcf492708453b63b.png
[e26b27647a97490b90c448d043468e62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0439cdceb21e446fabe493f18b12b382.png