Взаимодействие с html элементами в Vue

Параметр refs во Vue позволяет напрямую работать с определенными html-элементами из шаблона. Например, можно изменять их стили, текст и т.д, в данном примере поменяем текст по клику на кнопку:

App.vue<script>
export default {
  methods: {
    change: function () {
      this.$refs.header.innerText = "Welcome to Vue 3";
    }
  }
}
</script>
<template>
  <h1 ref="header">Hello world!</h1>
  <button v-on:click="change">Change</button>
</template>

С помощью атрибута ref для html-элемента устанавливается ключ, через который потом можно ссылаться на этот элемент.

<h1 ref="header">Hello world!</h1>

В методах объекта Vue можно обратиться к элементу по установленному ключу через объект $refs:

this.$refs.header.innerText = "Welcome to Vue.js";

С объектом, который представляет html-элемент, в данном случае this.$refs.header фактически можно также работать, как и со стандартныи объектами JavaScript, которые представляют html-элементы. То есть мы можем обратиться к его свойствам innerText или innerHTML. В реальности объект this.$refs.header будет представлять надстройку над объектом js, который собственно и представляет html-элемент. Фактически через this.$refs.header мы сможем уравлять элементом h2 на веб-странице.