组合式API_模板引用

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

选项式API_模板引用

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

组合式API_模板应用

xxxxxxxxxx
<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. 下列代码中，画横线的地方应该填写的是：

xxxxxxxxxx
<template>
    <h3>组合式API</h3>
    <p ref="message">组合式API-模板引用</p>
</template>
<script setup>
import { ref,onMounted } from "vue"
const message = ref(null)
onMounted(() =>{
    message._1_._2_ = "组合式API-模板引用-修改"
})
</script>

A value html

B value innerHTML

C 空 html

D 空 innerHTML

答案

1=>B