如果我们把组件篇比做是前端的 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 ,框架中的模板部分可以动态地绑定数据、事件和属性。
在接下来的章节中,我们将对模板的四个主题进行比较,它们分别是:
- 插值
- 绑定
- 引用
- 内置元素
文章参考链接: