组合式API_模板引用

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute，组合式API的实现更为简洁

选项式API_模板引用

<template>
  <h3>选项式API</h3>
  <p ref="message">选项式API-模板引用</p>
</template>
<script>
export default {
  mounted(){
    this.$refs.message.innerHTML = "选项式API-模板引用-修改"
   }
}  
</script>

1
2
3
4
5
6
7
8
9
10
11
12

组合式API_模板应用

<template>
  <h3>组合式API</h3>
  <p ref="message">组合式API-模板引用</p>
</template>
<script setup>
import { ref,onMounted } from "vue"
// 声明一个 ref 来存放该元素的引用,必须和模板里的 ref 同名
const message = ref(null)
onMounted(() =>{
  message.value.innerHTML = "组合式API-模板引用-修改"
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13