最新版vue3+TypeScript开发入门到实战教程之DOM操作

1、概述

Vue3框架的核心思想是数据驱动视图，应当避免直接操作DOM，但在实际开发中，必定会有特定的场景去直接与DOM元素打交道。如video标签等

2、Vue3中如何获取DOM

在Vue3中，获取DOM的方式有两种。虽然在Vue3中可用Vue2的语法获取DOM，但是不推荐使用Vue2语法。

• 通过document.getElementById函数获取DOM
• 通过ref标签属性来获取DOM

1.1通过document.getElementById的弊端

在组件中，通过document.getElementById获取DOM标签是可以，但有一个很大弊端，若父组件中有相同id的标签，优先获取父组件的标签。所以通过document.getElementById获取DOM必须要求项目唯一。

• 创建组件Fish，并在App组件引入使用Fish组件
• 在App组件与Fish组件创建id相同的标签
• 在Fish组件中获取DOM

App组件内容

<template>
  <div class="app">
    <h2 id="fish">草鱼</h2>
  <Fish/>

  </div>
</template>
<script setup>
import Fish from './components/Fish.vue';
</script>

Fish组件内容

<template>
  <h2 id="fish">鲫鱼</h2>
  <h2 id="cat">狸花猫</h2>
  <button @click="getDOMFish()">获取DOM</button>
  <button @click="getDOMCat()">获取DOM</button>
</template>
<script setup>
function getDOMFish() {
  let fish= document.getElementById('fish');
  console.log(fish);

}
function getDOMCat() {
  let cat= document.getElementById('cat');
  console.log(cat);

}
</script>

运行操作如下图： 大

• 点击获取鱼的DOM，优先获取的App组件（父组件）的DOM
• 点击获取猫的DOM,获取是本组件内容

1.2通过ref标签属性来获取DOM

既然document.getElementById有次弊端，可以使用ref规避，只需要给DOM标记ref即可，即是Vue3的使用方法。

• 将组件中id都改成ref
• 通过ref函数获取DOM，注意ref不要传参且变量名称必须与标签ref的值相同 App组件内容

<template>
  <div class="app">
    <h2 ref="fish">草鱼</h2>
  <Fish/>

  </div>
</template>
<script setup>
import Fish from './components/Fish.vue';
</script>

Fish组件内容

<template>
  <h2 ref="fish">鲫鱼</h2>
  <h2 ref="cat">狸花猫</h2>
  <button @click="getDOMFish()">获取鱼的DOM</button>
  <button @click="getDOMCat()">获取猫DOM</button>
</template>
<script setup>
import { ref } from 'vue';
  let fish = ref();
  let cat = ref();
function getDOMFish() {
  console.log(fish.value);
}
function getDOMCat() {
  console.log(cat.value);
}
</script>

运行效果如下图： 当点击按钮，获取的DOM就是想要的了。

给组件标记ref获取到的是什么

给组件标记ref，获取的是组件实例。父组件获取实例后，可以得到Fish展示的数据。 在Vue3中，默认父组件获取子组件实例后，是无法获取到数据的，需要子组件将数据展示出来。

• App组件引入Fish
• Fish展示数据a，b，c
• 获取Fish实例，打印数据 App组件内容

<template>
  <div class="app">
  <Fish ref="fish"/>
  <button @click="getDOMFish()">获取鱼的DOM</button>

  </div>
</template>
<script setup>
import { ref } from 'vue'
import Fish from './components/Fish.vue';
let fish = ref();
  function getDOMFish() {
    console.log(fish.value);
    console.log(fish.value.fish);
    console.log(fish.value.a);
    console.log(fish.value.b);
  }
</script>

Fish组件内容

<template>
  <h2>{{fish}}</h2>
</template>
<script setup>
import { ref,defineExpose } from 'vue';
  let fish = ref('鲫鱼');
  let a = ref('1');
  let b = ref('2');
  let c = ref('2');
  //将数据展示给父组件
defineExpose({ fish, a, b });
</script>

运行效果下图：