Questão de Programação — Linguagens de marcação — CESPE / CEBRASPE 2024

Vue.js: seleção do elemento raiz com el

Gabarito: letra D. O código que deve substituir os caracteres ### é el: '#app2', porque o Vue.js, ao montar a aplicação, procura o elemento HTML cujo id corresponda ao seletor informado na propriedade el — e, no arquivo index.html, o elemento que deve receber a mensagem "Programa Exemplo" é o que possui id="app2". A alternativa correta é a letra D.

O Vue.js é um framework JavaScript progressivo para construção de interfaces de usuário. Quando você cria uma instância Vue, a propriedade el define qual elemento do DOM (Document Object Model) a aplicação vai controlar. O valor dessa propriedade é um seletor CSS — ou seja, para referenciar um elemento pelo seu id, é obrigatório usar o prefixo # (cerquilha). Sem esse prefixo, o Vue não encontra o elemento e a aplicação não é montada corretamente.

A confusão mais comum nesse tipo de questão é esquecer o # ou trocar o id do elemento. O # é o que diferencia um seletor de id de uma simples string. Se o HTML tem <div id="app2">, o seletor correto é '#app2'. Se você escrever apenas 'app2', o Vue vai procurar um elemento <app2> (que não existe) e a aplicação falhará.

Vamos analisar o cenário: o arquivo index.html contém dois elementos com id diferentes — app e app2. O objetivo é exibir a mensagem "Programa Exemplo" no elemento app2. Portanto, o Vue precisa ser instruído a montar a aplicação nesse elemento específico. A propriedade el recebe o seletor '#app2', que aponta diretamente para o elemento correto.

A pegadinha da banca está em duas frentes: (1) omitir o #, o que torna o seletor inválido para id; e (2) apontar para o elemento errado (app em vez de app2). A alternativa que combina o seletor correto com o id correto é a letra D.

Alternativa A — ❌ Incorreta

el: 'app', — O erro aqui é duplo: falta o # (o seletor deveria ser '#app') e o id apontado é o app, não o app2. Sem o #, o Vue interpreta 'app' como seletor de tag, não de id, e não encontrará o elemento.

Alternativa B — ❌ Incorreta

el: 'app2', — O id está correto (app2), mas falta o #. O Vue não reconhece 'app2' como um seletor de id; ele procuraria uma tag <app2>, que não existe no HTML. O seletor correto é '#app2'.

Alternativa C — ❌ Incorreta

el: '#app', — O # está presente, mas o id apontado é o app, não o app2. A mensagem "Programa Exemplo" deve ser exibida no elemento app2, então o Vue montaria a aplicação no elemento errado.

Alternativa D — ✅ Correta ⟵ GABARITO

el: '#app2', — Esta é a combinação perfeita: o # indica que é um seletor de id e app2 é exatamente o id do elemento que deve exibir a mensagem. O Vue monta a aplicação nesse elemento e a página apresenta "Programa Exemplo".

Alternativa E — ❌ Incorreta

el: 'message', — Não há nenhum elemento com id="message" no HTML (o id correto é app2). Além disso, falta o #. Esta alternativa não tem relação com o elemento que deve receber a mensagem.

Gabarito: letra D