vue组件的基本介绍_${height} vue 是什么样式组件

作者：AllinToyou | 2024-03-21 09:53:36

踩

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

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

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

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

2.2 组件的 script 节点

（1）vue 规定：组件内的 <script> 节点是可选的，开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。
<script > 节点的基本结构如下：
在这里插入图片描述
（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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

2.2 组件的 style 节点

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