Você sabe o que é um Vue js? Vue.js é um framework javascript, de código aberto, e que se tornou muito famoso na criação de componentes reativos para interfaces web.
Considerado moderno e flexível, ele se destaca pela simplicidade e por uma boa performance, inclusive em aplicativos móveis.
Mas, afinal, como ele funciona? Nessa primeira aula, você aprenderá a instalá-lo e, acima de tudo, vai compreender o que é a reatividade que tanto se fala nesse contexto.
Confira no texto abaixo, mas se você é daqueles que gosta de vídeos… Boooom 
Confira o vídeo dessa aula.
Só não se esqueça de se inscrever no canal e mandar aquele like bonitão.
Instalando vue js
O primeiro passo é criar um arquivo HTML basicão. Depois, é preciso fazer a instalação do Vue.js adicionando simplesmente o pacote dentro da tag script. Apenas isso será o suficiente para instalar de forma simples e prática.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula 01 - Vue.js do jeito ninja</title>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
</body>
</html>
Agora, vamos instanciar o Vue.js para que ele funcione corretamente na sua estrutura de componentes que é tipo uma pirâmide, e é exatamente isso que será feito a partir agora.
Calma meu jovem, você irá entender mais a fundo sobre componentes e a estrutura completa to Vue.js nas próximas aulas.
Para isso, é necessário criar uma nova tag script e, dentro dela, criar uma variável para pendurar a instância do Vue.js (vou explicar por que é necessário e interessante pendurar em uma variável global no final deste artigo). Dentro da instância do Vue.js, nós colocaremos todas as configurações necessárias para a nossa aplicação:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula 01 - Vue.js do jeito ninja</title>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue();
</script>
</body>
</html>
O Vue.js precisa de dois elementos basicamente obrigatórios para funcionar: o el, onde será definido o elemento pai do aplicativo, e o data, onde ficarão as variáveis:
var app = new Vue({
el: '#app',
data: {}
});
Para que isso funcione, o el precisa receber o id do elemento pai da sua aplicação, #app no nosso caso. É importante ter em mente que o Vue.js só interpreta o que está dentro dessa div que acabamos de declarar com o id #app. Então, todo o conteúdo da sua aplicação tem que de fato estar dentro dela, caso contrário, o conteúdo não será interpretado pelo Vue.js e será renderizado como um conteúdo HTML normal.
Com os passos acima, o nosso aplicativo Vue.js basicão já começa a funcionar, o que só salienta o quanto Vue.js é realmente simples 
.
O que é a Reatividade?
Depois de instalar o Vue.js, é preciso entender sobre a Reatividade. Esse conceito consiste em dizer que tudo o que é produzido ou alterado no Vue.js será reativo, como uma reação em cadeia. Assim, por exemplo, quando uma variável do data é alterada, todo os locais que essa variável estiver sendo impressa serão atualizadas instantaneamente, não é interessante? Sim, isso mesmo, o Vue.js vai fazer uma “atualização global” do conteúdo daquela variável.
Agente pendurou a instancia do Vue.js numa variável app pelo simples motivo de poder acessar externamente suas propriedades. Faça um teste, abra o console e digite app e verás a instancia do Vue.js
Se essa aula foi importante e te ajudou a compreender o início do Vue.js, então não deixe de acompanhar a próxima etapa para para ficar ninja no Vue.js.
Próximo capítulo O que são diretivas no Vue.js?
