VueJS é um framework Javascript reativo e é também conhecido como um framework progressivo, o que significa basicamente que você não vai precisar estudar toda a documentção do framework para começar a usar. Vamos ver um exemplo básico com o mínimo preciso para ter um código VueJS funcionando:
Declaramos, na aba HTML, uma div simples com o id de nossa aplicação e com o template __ que será substituido pelo valor da variável text.
- Na aba HTML importamos o código do framework do cdnjs
- Na aba Javascript criamos a instancia de nossa aplicação
- O parâmetro el é onde deve ser inormado um QuerySelector indicando onde a aplicação será renderizada.
- E por fim o parâmetro data que irá conter os valores utilizados em nossa aplicação, em nosso exemplo a variável text.
VueJS para usuários de JQuery
O jQuery tem um objetivo diferente do VueJS e por isso não devem ser considerados concorrentes, e por terem paradigmas muito diferentes, é recomendado que não sejam utilizados no mesmo projeto.
Enquanto o jQuery é uma ferramenta que tem como principal objetivo auxiliar na manipulação dirata do DOM ( HTML ) o VueJS se propoe a encapsular todo a manipulação do DOM. Neste momento surge a pergunta mais importante:
E como posso mudar a informação exibida na tela ?
O VueJS espera que seu desenvolvimento seja focado em manipular os dados e não o html, sendo assim, sempre que você lterar os valores do campo data definido no setup de nossa aplicação o framework irá alterar automaticamente todos os pontos do html que fazem referencia a este valor.
O objetivo é que você não precise mais se preocupar com a renderização de seus dados sobrando tempo para se dedicar aos pontos mais importantes de sua aplicação.
Agora um exemplo demonstrando o framework fazendo este trabalho de “comunicação” dos dados da tela para o seu objeto e de seu objeto para a tela o que é conhecido como Two Way Data Bind.
No exemplo acima, sempre que o iniput for alterado o texto dentro do span será automaticamente alterado, mostrando a “reatividade” do framework.