Vue3 第三十二篇：JSX中直接操作dom元素

获取元素的方式分为两种

1.通过选择器直接获取dom元素。

document.querySelector("#元素id")

console.log(document.querySelector("#hhh").clientWidth);

 

注意：这里无法使用class选择器。因为jsx在编译的过程中，会为class名称加上哈希后缀，也就是说，无法直接通过class选择器来获取元素。

2.通过ref标记来获取元素。

定义变量

// 定义变量名
    const abc = ref()

将变量通过ref绑定到dom元素上 

<div ref = { abc } ></div>

这样就可以操作dom元素了 

console.log(abc.value.clientWidth);