Angular、React、Vue 都遵循组件开发标准,组件是构建用户界面(UI)的基础。
三大框架允许我们将 HTML 标签、CSS 和 JavaScript 组合成自定义组件,即 应用程序中可复用的 UI 元素。
组件篇的系列文章我们将比较三大框架组件中的 JavaScript 部分,HTML 标签和 CSS会在模板篇中进行比较。
Angular 中组件的定义与使用
在 Angular 中,组件有以下几部分组成:
- 一个 HTML 模板,用于声明页面要渲染的内容
- 一个用于定义行为的 TypeScript 类
- 一个 CSS 选择器,用于定义组件在模板中的使用方式
- (可选)要应用在模板上的 CSS 样式
定义
在 Angular 中定义一个 HelloWorldComponent
组件的代码示例如下:
hello-world.component.ts 文件
import { Component } from '@angular/core';
@Component({
// CSS 选择器
selector: 'app-hello-world',
template: `
<p>Hello, world!</p>
`
})
export class HelloWorldComponent {
// JavaScript 逻辑代码可以写在这里
}
使用
在 Angular 在使用 HelloWorldComponent
组件示例如下:
app.module.ts 文件
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world.component';
@NgModule({
declarations: [
AppComponent,
HelloWorldComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts 文件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-hello-world></app-hello-world>
`
})
export class AppComponent {}
React 中组件的定义与使用
在 React 中,组件是一段可以使用标签进行扩展 的 JavaScript 函数。
定义
在 React 中定义一个 HelloWorld
组件的代码示例如下:
HelloWorld.js 文件
export default function HelloWorld() {
// JavaScript 逻辑代码可以写在这里
return (
<p>Hello, World!</p>
)
}
使用
在 React 中使用 HelloWorld
组件示例如下:
App.js 文件
import HelloWorld from './HelloWorld.js';
export default function App() {
return (
<HelloWorld />
);
}
Vue 中组件的定义与使用
在 Vue 中使用构建步骤时,我们一般会将 Vue 组件定义在一个单独的 .vue
文件中,这被叫做单文件组件 (简称 SFC)。
定义
在 Vue 中定义一个 HelloWorld
组件的代码示例如下
HelloWorld.vue 文件
<script setup>
// JavaScript 逻辑代码可以写在这里
</script>
<template>
<p>Hello, world!</p>
</template>
使用
在 Vue 中使用 HelloWorld
组件示例如下:
App.vue 文件
<script setup>
import HelloWorld from './HelloWorld.vue'
</script>
<template>
<HelloWorld />
</template>
小结
在三大框架中,组件是为了在应用程序中可复用 UI 元素。无论使用哪个框架,组件化的开发才是当今前端开发的核心思想。
在接下来的章节中,我们将对组件的七个主题进行比较,它们分别是:
文章参考链接: