组合式API_模板引用

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

选项式API_模板引用

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

组合式API_模板应用

bash 复制代码
<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>
相关推荐
百锦再2 分钟前
Razor编程中@Html的方法使用大全
前端·html
啪叽4 分钟前
JavaScript可选链操作符(?.)的实用指南
前端·javascript
Ian在掘金5 分钟前
bat+python实现easy connect自动连接
前端·python
代码搬运媛8 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
小桥风满袖10 分钟前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif13 分钟前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化
咸虾米16 分钟前
在uniCloud云对象内使用unipay的微信退款出现错误“uniPayCo.refund Error: token校验未通过”的解决方案
前端·后端
前端Hardy22 分钟前
HTML&CSS:产品卡片动画效果
前端·javascript
货拉拉技术27 分钟前
货拉拉开源:鸿蒙路由 TheRouter
android·前端·harmonyos
中杯可乐多加冰30 分钟前
工业4.0数字孪生新引擎:星图云开发者平台全景评测
前端·低代码·掘金·金石计划