Vue如何操作DOM元素

Vue的特点: 数据驱动页面更新, 无需操作DOM来更改数据

也就是说Vue不推荐我们直接操作DOM, 但是在开发中有时候我们确实需要拿到DOM操作DOM

如果不推荐使用原生的语法获取DOM元素, 我们应该如何获取DOM元素

使用Vue中的 ref 的方式 , 可以获取到当前元素的属性和方法

如何使用 ref 进行DOM元素操作

<template>
  <div>
    <!-- 视频元素 -->
    <video src="../assets/home/home3.mp4" ref="videobox"></video>
    <!-- 视频控件 -->
    <input type="button" value="播放" @click="play" />
    <input type="button" value="暂停" @click="stop" />
  </div>
</template>

<script>
export default {
  methods: {
    play() {
      //视频播放
      //能够获取到指定ref="videobox"的元素
      this.$refs.videobox.play();
    },
    stop() {
      //视频暂停
      this.$refs.videobox.pause();
    },
  },
};
</script>

当我们在某一个元素上定义一个ref值

我们可以通过this.$refs.(ref值) 来获取到指定的元素的属性和方法

注意点 : 如果是通过原生的语法来获取元素,

无论是原生的元素还是自定义的组件, 拿到的都是原生的元素

在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取

注意点 : ref如果是添加给元素的元素, 那么拿到的就是元素的元素

ref如果是添加给自定义的组件, 那么拿到的就是自定义的组件