import { createApp } from 'vue'; const app = createApp({ ...
import { createApp } from 'vue';
const app = createApp({
data() {
return {
message: 'Olá, Vue!'
};
},
template: '<h1>message</h1'
{ ) ;
app.mount ('#app');
Com base no trecho de código precedente, referente ao framework Vue.js, julgue o item a seguir.
A execução do código criará uma aplicação Vue, que renderiza a mensagem Olá, Vue! no elemento com id=“app”, exibindo o conteúdo do template ,<h1> message </h1> na página.
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
A alternativa correta é Errado.
O tema central da questão é a utilização do Vue.js, um framework JavaScript progressivo para construção de interfaces de usuário. O Vue.js permite a criação de componentes interativos e reativos para aplicações web, e é amplamente utilizado devido à sua simplicidade e eficiência.
No trecho de código apresentado, há um erro que impede o correto funcionamento da aplicação. O problema reside na forma como o template está sendo definido. O código:
template: 'message
'
deveria estar utilizando a sintaxe de interpolação do Vue.js para exibir o valor da propriedade message. A sintaxe correta seria:
template: '{{ message }}
'
Essa interpolação é necessária para que o Vue.js substitua {{ message }} pelo valor real contido na propriedade message, que é 'Olá, Vue!'. Sem essa interpolação, o texto "message" será exibido literalmente na página, ao invés do valor esperado.
Portanto, o item julgado está Errado, pois o código, como está, não renderiza a mensagem esperada, mas sim o texto estático "message".
Estratégia de interpretação: sempre que um enunciado de questão abordar frameworks como Vue.js, é essencial verificar a sintaxe e a lógica da interação entre HTML e JavaScript. Erros comuns envolvem a falta de uso das convenções do framework, como interpolação de variáveis.
Gostou do comentário? Deixe sua avaliação aqui embaixo!
```Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo