Estou criando um projeto básico com Vue 3 e estou tentando renderizar uma mensagem dinâmica usando o recurso de interpolação {{ message }}
. O problema é que, em vez de exibir o valor da variável message
, ele exibe o texto literal {{ message }}
na página.
Aqui está meu código:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Test</title>
</head>
<body>
<main id="app">
<h4>{{ message }}</h4>
</main>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const SelfServiceMachine = {
data() {
return {
message: "Hello World"
};
}
};
Vue.createApp(SelfServiceMachine).mount('#app');
</script>
</body>
</html>
texto em negrito
Problema:
Quando carrego a página, o texto {{ message }}
aparece literalmente no lugar do valor esperado "Hello World"
.
O que eu já tentei:
- Verifiquei que o Vue 3 está sendo carregado corretamente no navegador.
- Testei se o JavaScript está sem erros. Não há mensagens de erro no console.
- Usei o recurso de limpeza de cache do navegador (Ctrl + F5).
- Recriei um projeto básico para testar, mas o problema persiste.