1. 获取的静态DOM元素

• 总结

1. 模板中的名称必须和定义的ref(null)变量名相同
2. 这个变量名称必须return出去需要注意的是标签内的ref属性前不需要加冒号（如：错误:ref,正确ref）

• 使用

1. 模板中定义ref：<div ref="numDom" @click="getDom">{{ num }}</div>
2. 引入：import { ref } from "vue";
3. 接受DOM（与模板中ref绑定的名称必须相同）：const numDom = ref(null);
4. 返回给模板使用： return { numDom };

<template>
  <div>
    <div ref="numDom" @click="getDom">{{ num }}</div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const num = ref(100);

    // 模板中ref的名称，必须和变量名相同，且ref函数包裹null，必须return出去
    const numDom = ref(null);

    // 操作dom，numDom是ref()函数修饰的属性，调用用的时候必须numDom.value（切忌）
    const getDom = () => {
      console.log(numDom.value);
      numDom.value.style = "color:red;font-size: 100px";
    };

    // numDom必须return出去  
    return { num, getDom, numDom};
</script>