vue学习 --- 在vue中去使用真实dom元素

由于vue不建议使用使用真实dom元素，但是必要的时候，我们可以必须要用，因此,vue为我们提供了ref。我们通过，在组件的html部分。

<template>
  <div>
    <h1 ref="myHeading">Hello, world!</h1>
  </div>
</template>

然后，通过在组件的Js部分,通过$refs中来引用DOM元素。

<script>
export default {
  mounted() {
    const heading = this.$refs.myHeading;
    // 在这里可以对真实的 DOM 元素进行操作
    heading.style.color = 'red';
  }
};
</script>