VUE3.x教程（六）模板引用

1、DOM

DOM 是文档对象模型（Document Object Model）的简称，DOM 主要用于将Web页面以文档的形式描述。DOM 是一种描述和操作文档的标准接口，使得开发者可以通过编程语言来动态访问和修改页面内容。

DOM 通常被视为一棵树，其中每个节点代表页面的一部分，如元素节点、属性节点、文本节点等。

DOM 允许开发者通过编程语言（如 JavaScript）来操作文档，包括创建、删除、修改节点及其属性。

2、模板

在Web开发中，“模板”用来生成HTML页面，可以通过编辑模板简化HTML页面的开发。

模板可以包含静态内容以及动态内容，这些动态内容通常是通过后端服务器，或者前端 JavaScript 框架（如 Vue.js、React 等）来填充的。

Vue.js 使用一种基于 HTML 的模板语法来描述 UI，允许开发者在 HTML 中嵌入 JavaScript 表达式和其他指令。

• 插值表达式（Interpolation）：使用 {{ expression }} 插入 JavaScript 表达式的值。
• 指令（Directives）：以 v- 开头的特殊属性，如 v-if、v-for、v-bind、v-on 等。

3、模板引用

使用ref将模板中的数据引用到前端开发框架（js）中，进行赋值或修改后，并将修改在Web页面中显示出来。

<script setup>
import { ref, onMounted } from 'vue'

//注意此处ref使用空值来初始化。这是因为当<script setup>执行时，DOM元素还不存在。
//模板引用 ref 只能在组件挂载后访问。
//只需命名与模板中的元素一致，ref就可以找到对应的元素
const pElementRef = ref()
const pElementRef2 = ref()

onMounted(() => {
  pElementRef.value.textContent = 'Hello1!'
  pElementRef2.value.textContent = 'Hello2!'
})
</script>

<template>
  <p ref="pElementRef">Hello</p>
  <p ref="pElementRef2">Hello2</p>
</template>