Angular React Vue 比较 – 模板篇

最新推荐文章于 2024-09-10 19:15:36 发布

小白马编程

最新推荐文章于 2024-09-10 19:15:36 发布

阅读量1k

点赞数 16

分类专栏： Angular-React-Vue 文章标签： angular.js react.js vue.js javascript 前端

本文链接：https://blog.csdn.net/zhangjunfa123456/article/details/136904449

版权

Angular-React-Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

如果我们把组件篇比做是前端的 JavaScript ，那么模板篇则是 HTML 。

三大框架中的模板在应用中呈现用户界面，就像常规 HTML 一样，但是它具有更多功能。

Angular 的模板

在 Angular 中，*template* 是 HTML 的一个块。在模板中我们可以使用 Angular 的语法来构建更多的功能。

编写

在 Angular 的组件中加载的模板，有两种编写方式，它们分别是行内与单独文件编写方式。

在行内编写的模板，我们需要把模板做为 @Component 装饰器对象中 template 属性的值。下面这段代码演示了行内编写的模板：

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `
    <p>Hello, world!</p>
  `
})
export class HelloWorldComponent {
  
}

行内模板一般用于实现简单的用户界面，对于复杂一些的用户界面，我们可以使用单独文件的方式来编写模板。使用独立文件编写模板时，需要把文件地址做为 @Component 装饰器对象中 templateUrl 属性的值。下面的这段代码演示了单独文件编写的模板：

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  templateUrl: './hello-world.component.html'
})
export class HelloWorldComponent {
  
}

<!-- hello-world.component.html -->
<p>Hello, world!</p>

与 HTML 的区别

在模板中可以使用 Angular 语法来扩展应用中的 HTML。例如，我们可以通过 Angular 内置模板函数、变量、事件侦听和数据绑定等功能来动态获取和设置 DOM 值。

几乎所有的 HTML 语法都是有效的模板语法。但是，由于 Angular 模板是整个网页的一部分，而不是整个页面，所以我们不需要包含 <html><body><base> 等元素，只需要专注于正在开发的页面部分。

出于安全考虑， Angular 会忽略 <script> 标签并向浏览器控制台输出警告。

React 的模板

在 React 中，组件是一个 JavaScript 函数，而模板是做为函数的值返回的。

编写

React 的模板是使用 JSX 来编写的，JSX 是 JavaScript 语法扩展，可以让我们在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写模板，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。本系统文章不对其他的编写方式进行探讨。

下面这段代码演示了基于 JSX 编写的模板：

export default function HelloWorld() {
  return (
    <p className="red">Hello, World!</p>
  )
}

JSX 与 HTML 的区别

JSX 语法更加严格并且相比 HTML 有更多的规则，下面我们介绍一下 JSX 的规则。

1. 只能返回一个根元素

如果我们想要在一个组件返回的模板中包含多个元素，需要用一个父标签把它们包裹起来。

错误的示例：

export default function HelloWorld() {
  return (
    <h2>Template</h2>
    <p className="red">Hello, World!</p>
  )
}

正确的示例：

export default function HelloWorld() {
  return (
    <div>
      <h2>Template</h2>
      <p className="red">Hello, World!</p>
    </div>
  )
}

如果我们不想使用额外的 <div>，可以用 <> 和 </> 元素来代替：

export default function HelloWorld() {
  return (
    <>
      <h2>Template</h2>
      <p className="red">Hello, World!</p>
    </>
  )
}

2. 标签必须闭合

JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img />。

错误的示例：

export default function Avatar() {
  return (
    <img src="https://i.imgur.com/yXOvdOSs.jpg">
  )
}

正确的示例：

export default function Avatar() {
  return (
    <img src="https://i.imgur.com/yXOvdOSs.jpg" />
  )
}

3. 使用驼峰式命名法给所有大部分属性命名！

JSX 最终会被转化为 JavaScript，而 JSX 中的属性也会变成 JavaScript 对象中的键值对。在我们编写的组件中，经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 - 符号或者像 class 这样的保留字。

这就是为什么在 React 中，大部分 HTML 和 SVG 属性都用驼峰式命名法表示。例如，需要用 strokeWidth 代替 stroke-width。由于 class 是一个保留字，所以在 React 中需要用 className 来代替。这也是 DOM 属性中的命名:

export default function Avatar() {
  return (
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      className="photo"
    />
  )
}

Vue 的模板

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

编写

在 Vue 中，模板的两种编写方式，把模板与组件写在一起的方式称之为单文件方式（SFC），另一种方式可以把模板做为单独文件方式来编写。

下面是一个 SFC 方式的编写模板的示例：

<script setup>
</script>

<template>
  <p>Hello, world!</p>
</template>

SFC 方式是 Vue 编写组件与模板的主流实现方式，并且在大部分代码库中也是使用的这种方式。对于一些习惯 JavaScript 与 Html 分离的用户可以通过资源导入功能来导入单独文件。下面是一个单独文件编写模板的示例：

<script src="./HelloWorld.js"></script>
<template src="./hellow-world.template.html"></template>

<!-- hello-world.component.html -->
<p>Hello, world!</p>

与 HTML 的区别

在 Vue 中，我们可以使用特殊语法（如v-on用于事件绑定，v-bind用于属性绑定，v-if用于条件渲染，v-for用于列表渲染等）来动态地绑定数据、事件和属性。

Vue 模板是整个网页的一部分，而不是整个页面，所以我们不需要包含 <html><body><base> 等元素，只需要专注于正在开发的页面部分。

小结

在三大框架中，模板是组件中的 UI 部分。它们都是基于 HTML 的规则编写的，相比较传统的静态 HTML ，框架中的模板部分可以动态地绑定数据、事件和属性。

在接下来的章节中，我们将对模板的四个主题进行比较，它们分别是：

插值
绑定
引用
内置元素

文章参考链接：

小白马编程

关注

16
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
Angular React Vue 比较 – 模板篇

如果我们把组件篇比做是前端的 JavaScript ，那么模板篇则是 HTML 。三大框架中的模板在应用中呈现用户界面，就像常规 HTML 一样，但是它具有更多功能。
复制链接

扫一扫