Understand the basic use of ref and $refs

The simple understanding of ref is that you can get the dom element. If you use the traditional js method to get the element, you can use getElementById and other methods.

Case: Clicking a button makes the p tag change color

Set a ref to the element p. In the following method, use $refs to get the dom element

<template>
  <div class="news">
    <p ref="myP">侦听器</p>
    <button @click="changeColor">变色</button>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      
    };
  },
  methods: {
    changeColor(){
      this.$refs.myP.style.color = 'red'
    }
  },
};
</script>