Angular React Vue 比较 – 模板篇之插值

插值是指在模板中动态地使用指定的值，本章将基于标签中最基本的文本插值和 JavaScript 表达式来对三大框架进行比较。

Angular 插值

在 Angular 中，插值使用双大括号并作为分隔符。{{}}

文本插值

为了说明插值的工作原理，下面的代码演示了一个包含变量的 HelloWorld 组件：

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

@Component({
  selector: 'app-hello-world',
  template: `
    <p>{{ msg }}</p>
    <div><img src="{{ logoUrl }}" /></div>
  `
})
export class HelloWorldComponent {
  msg = 'Hello, World!';
  logoUrl = './assets/logo.png';
}

使用插值在相应的组件模板中显示 msg 变量的值：

<p>{{ msg }}</p>

使用插值在相应的组件模板中显示 img 属性的值：

<div><img src="{{ logoUrl }}" /></div>

虽然我们可以使用插值的方式来动态设置标签属性值，不过在 Angular 中通常使用绑定的方式来为属性赋值，更详细的说明我们会在接下来的绑定一章来做详细介绍。

通过属性绑定来显示 img 属性的值：

<div><img [src]="logoUrl" /></div>

JavaScript 表达式

在 Angular 的模板中，我们可以使用 JavaScript 表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

React 插值

React 中的模板使用地是 JSX 语法，用大括号 { } 来实现插值。

文本插值

为了说明插值的工作原理，下面的代码演示了一个包含变量的 HelloWorld 组件：

import { useState } from 'React';

export default function HelloWorld() {
  const [msg, setMsg] = useState('Hello, World!');
  const [logoUrl, setLogoUrl] = useState('./assets/logo.png');

  return (
    <>
      <p>{ msg }</p>
      <div><img src={ logoUrl } /></div>
    </>
  )
}

使用插值在相应的组件模板中显示 msg 变量的值：

<p>{ msg }</p>

使用插值在相应的组件模板中显示 img 属性的值：

<div><img src={ logoUrl }" /></div>

JavaScript 表达式

在 React 的模板中，我们可以使用 JavaScript 表达式：

{ number + 1 }

{ ok ? 'YES' : 'NO' }

{ message.split('').reverse().join('') }

Vue 插值

在 Vue 中，插值使用的是“Mustache”语法 (即双大括号)。

文本插值

为了说明插值的工作原理，下面的代码演示了一个包含变量的 HelloWorld 组件：

<script setup>

import { ref } from 'vue';
const msg = ref("Hello, World!");
const logoUrl = ref("./assets/logo.png");
</script>

<template>
  <p>{{ msg }}</p>
  <div><img src="{{ logoUrl }}"</div>
</template>

使用插值在相应的组件模板中显示 msg 变量的值：

<p>{{ msg }}</p>

请注意，这段对 img 属性插值的代码编译时会报错：

<div><img src="{{ logoUrl }}" /></div>

在 Vue 中不允许对属性直接插值，需要使用绑定的方式来为属性赋值，更详细的说明我们会在接下来的绑定一章来做详细介绍。

通过属性绑定来显示 img 属性的值：

<div><img :src="logoUrl" /></div>

JavaScript 表达式

Vue 在所有的数据绑定中都支持完整的 JavaScript 表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

小结

本章介绍了三大框架模板中的插值，对文本插值与 JavaScript 表达式做了说明。

Angular 和 Vue 都是使用的“Mustache”语法 (即双大括号)，React 使用的是大括号{ }来实现插值。其中 Angular 与 React 都可以对标签属性进行直接插值，Vue 要使用绑定指令来对属性进行插值。

文章参考链接：

• Template Syntax • Overview • Angular
• Text interpolation • Angular
• 使用 JSX 书写标签语言 – React 中文文档
• 在 JSX 中通过大括号使用 JavaScript – React 中文文档
• 模板语法 | Vue.js (vuejs.org)