Manipulando elementos HTML com refs - Vue.js

O parâmetro refs no Vue.js permite acessar e manipular diretamente elementos HTML definidos no template. Essa funcionalidade possibilita, por exemplo, modificar estilos, texto e outras propriedades desses elementos. Veja um exemplo de página HTML que utiliza essa abordagem:

<!DOCTYPE html>
<html>
<head>
    <title>$refs no Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
        <h2 ref="header">Hello world!</h2>
        <button v-on:click="change">Change</button>
    </div>
    <script>
        Vue.createApp({
            methods: {
                change() {
                    this.$refs.header.innerText = "Welcome to Vue.js";
                    this.$refs.header.style.color = "red";
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

Nesse exemplo, o atributo ref define uma referência para o elemento HTML, permitindo que ele seja acessado diretamente no código usando o objeto $refs.

O elemento <h2> no template é marcado com a referência header:

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

Nos métodos definidos no componente Vue, o elemento pode ser acessado por meio de this.$refs, utilizando a chave configurada no atributo ref:

O objeto retornado pelo $refs representa o elemento HTML referenciado. Ele pode ser manipulado como qualquer outro objeto JavaScript correspondente a um elemento HTML, permitindo o acesso a propriedades como innerText ou innerHTML. Embora this.$refs.header seja tecnicamente uma camada adicional sobre o objeto JavaScript nativo do elemento, isso não limita a interação ou manipulação direta.

No exemplo, o método change altera o texto e a cor do elemento h2. Antes da alteração:

Exemplo de uso de refs antes de alteração

Depois da alteração:

Exemplo de uso de refs depois de alteração

Outras propriedades e atributos do elemento HTML podem ser acessados e modificados da mesma forma, proporcionando flexibilidade para trabalhar com elementos diretamente na página.