组合式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>
相关推荐
不浪brown2 分钟前
开源!矢量建筑白模泛光特效以及全国77个大中城市的矢量shp数据获取!
前端·cesium
山有木兮木有枝_3 分钟前
JavaScript 数据类型与内存分配机制探究
前端
小小小小宇9 分钟前
前端 异步任务并发控制
前端
bysking23 分钟前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js
LuckySusu23 分钟前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html
CAD老兵24 分钟前
在 TypeScript 中复用已有 Interface 的部分属性:完整指南
前端
一头小鹿26 分钟前
【JS】原型和原型链 | 笔记整理
javascript
龚思凯28 分钟前
Vue 3 中 watch 监听引用类型的深度解析与全面实践
前端·vue.js
于冬恋39 分钟前
Web后端开发(请求、响应)
前端
red润1 小时前
封装hook,复刻掘金社区,暗黑白天主题切换功能
前端·javascript·vue.js