组合式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>
相关推荐
不会飞的鲨鱼1 分钟前
FastMoss 国际电商Tiktok数据分析 JS 逆向 | MD5加密
javascript·python·数据挖掘·数据分析
怪大叔95271 分钟前
vue组件之远程组件
前端·javascript·vue.js
邢同学爱折腾2 分钟前
长安的荔枝小说阅读器——程序员的浪漫与效率
前端·javascript
墨夏4 分钟前
Tauri + NextJS 扫码登录
android·前端·ios
天生我材必有用_吴用6 分钟前
Three.js开发必备:灯光详解附带案例
前端
Hilaku24 分钟前
用好了 watchEffect 才算会用 Vue3 —— 那些让人误解的响应式陷阱
前端·javascript·vue.js
GISer_Jing28 分钟前
Zustand 状态管理库:极简而强大的解决方案
前端·javascript·react.js
zacksleo28 分钟前
鸿蒙Flutter实战:25-混合开发详解-5-跳转Flutter页面
前端·flutter·harmonyos
zacksleo34 分钟前
鸿蒙Flutter实战:23-混合开发详解-3-源码模式引入
前端·flutter·harmonyos
三年三月35 分钟前
018-场景遍历和世界坐标系
前端·three.js