VueJS - Introdução
Vueé uma estrutura JavaScript para construir interfaces de usuário. Sua parte central está focada principalmente na camada de visualização e é muito fácil de entender. A versão do Vue que usaremos neste tutorial é 2.0.
Como o Vue é basicamente construído para o desenvolvimento de front-end, vamos lidar com muitos arquivos HTML, JavaScript e CSS nos próximos capítulos. Para entender os detalhes, vamos começar com um exemplo simples.
Neste exemplo, vamos usar a versão de desenvolvimento de vuejs.
Exemplo
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>Resultado
Este é o primeiro aplicativo que criamos usando o VueJS. Como visto no código acima, incluímos vue.js no início do arquivo .html.
<script type = "text/javascript" src = "js/vue.js"></script>Há um div que é adicionado ao corpo que imprime “My first VueJS Task” no navegador.
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>Também adicionamos uma mensagem em uma interpolação, ou seja, {{}}. Este interage com o VueJS e imprime os dados no navegador. Para obter o valor da mensagem no DOM, estamos criando uma instância de vuejs da seguinte maneira -
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})No trecho de código acima, estamos chamando a instância Vue, que leva o id do elemento DOM, ou seja, e1: '# intro', é o id do div. Existem dados com a mensagem à qual é atribuído o valor‘My first VueJS Task’. VueJS interage com DOM e altera o valor no DOM {{mensagem}} com’My first VueJS Task’.
Se acontecer de alterarmos o valor da mensagem no console, o mesmo será refletido no navegador. Por exemplo -
Detalhes do console
No console acima, imprimimos o objeto vue_det, que é uma instância de Vue. Estamos atualizando a mensagem com“VueJs is interesting” e o mesmo é alterado no navegador imediatamente, conforme visto na imagem acima.
Este é apenas um exemplo básico que mostra a vinculação do VueJS com o DOM e como podemos manipulá-lo. Nos próximos capítulos, aprenderemos sobre diretivas, componentes, loops condicionais, etc.