如果我们把组件篇比做是前端的 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 ，框架中的模板部分可以动态地绑定数据、事件和属性。
在接下来的章节中，我们将对模板的四个主题进行比较，它们分别是：
- 插值
- 绑定
- 引用
- 内置元素
文章参考链接：
标签：Vue,React,HTML,编写,JSX,Angular,模板 From： https://blog.csdn.net/zhangjunfa123456/article/details/136904449