Vue3-17-ref 模板引用的基本使用

什么是模板引用

简单来说，就是在 js 代码中 获取到 html 中的dom元素的完整信息，
从而实现直接操作dom元素的效果。

模板引用的语法

1、给 dom 元素添加 ref='名称' 属性，指定一个独有的名称；
2、js 中 声明一个 与 dom 元素的 ref 同名的 变量。
此时 这个变量 就和 dom 元素关联起来了，可以直接操作dom元素了。

基本使用 ：
1、dom 元素
<div ref="abcdiv">这是一个div</div>
2、js
import {ref} from 'vue'
const abcdiv = ref()

带数据类型的使用：
1、dom 元素
<div ref="abcdiv">这是一个div</div>
2、js
import {ref} from 'vue'
const abcdiv = ref<HTMLDivElement>()

使用案例

为了更好的贴合 ts 的语法，本案例使