3、Vue 3 （2024 版）基础笔记 - 模板语法

在实际开发中，一般使用脚手架进行构建。现在都已经是 Vue 3 了，组合式 API 已经大行其道了。因此呢，全系列直接全部使用 组合式 API。

准备工作

在开始记录之前，我们先对项目进行一个删减，删除那些用不到的文件。

• 1、删除整个 components

• 2、删除 assets 目录下 base.css

• 3、修改 main.ts的内容，如下：

  import { createApp } from 'vue'
  import App from './App.vue'
  
  createApp(App).mount('#app')
  

• 4、修改 src/App.vue 的内容，如下：

  <template>
  
  </template>
  
  <script setup lang="ts">
  </script>
  
  <style scoped>
  </style>
  

模板语法

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

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)。

src/App.vue

<template>
  <h1>{{ message }}</h1>
</template>

<script setup lang="ts">
  const message = "我的世界真奇妙"
</script>

<style scoped>
</style>

这就可以看到效果了。

JavaScript 表达式

在插值表达式中可以嵌入一些简单的 JavaScript 表达式。

src/App.vue

<template>
  <h1>{{ message }}</h1>
  <p>{{ number + 1 }}</p>
  <p>{{ ok ? "真" : "假" }}</p>
  <p>{{ hello.split("").reverse().join("") }}</p>
</template>

<script setup lang="ts">
  const message = "我的世界真奇妙"
  const number = 10
  const ok = true
  const hello = "我叫王美丽呀"
</script>

原始 HTML

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 [v-html 指令]：

src/App.vue

<template>
  ...
    
  <p v-html="rawHtml"></p>
</template>

<script setup lang="ts">
  ...
  
  const rawHtml = "<a href='#'>王美丽</a>"
</script>