Vue.js é uma estrutura micro JavaScript para criar componentes reutilizáveis e reativos em seu site.
Os frameworks front-end variam muito em tamanho e escopo, onde o Vue.js se destaca em seu design minimalista e foco na adaptabilidade. Você tem a opção de construir todo o seu site usando o Vue.js, apenas fazendo um único elemento de seu site reativo ou qualquer coisa entre eles. Por causa disso, é muito acessível com uma curva de aprendizado superficial.
Neste artigo, vamos dar uma olhada nos componentes principais do Vue.js e em como configurar e iniciar, mas primeiro vamos dar uma olhada em quando você gostaria de usar um framework front-end como o Vue.js e o porquê .
Estruturas front-end, como a maioria das estruturas, abstraem as tarefas comuns, o denominador comum que você encontra entre os projetos. Vue.js especificamente vem para abstrair o processo de criação de componentes HTML que são atualizados dinamicamente através de JavaScript.
Alguns dos pontos problemáticos que o Vue.js resolve para você é gerar o HTML dinâmico, vincular as ações dos elementos HTML aos seus dados, mantendo o escopo e o contexto, e acompanhar quando o HTML precisa ser re-renderizado automaticamente.
Por exemplo, digamos que você tenha uma página em que você tenha uma lista dinâmica de nomes. Você pode ter escrito um código parecido com isto:
Quando você constrói o HTML manualmente - além do fato de que o código rapidamente se torna difícil de gerenciar em exemplos maiores - não há conexão real entre os dados e o HTML gerado. Se a matriz de nomes mudar, você deve estar ciente disso e renderizar novamente a lista. Tudo isso também é apenas para exibir dados dinâmicos, se você deseja adicionar manipuladores de eventos como um manipulador on-click, para salvar o escopo, você continuará aninhando seu código mais e mais em:
Com o Vue.js, você separa o HTML como um modelo que representa o que gerar com base nos dados fornecidos, e o Vue.js o renderiza automaticamente.
Esse mesmo exemplo no Vue.js seria semelhante ao seguinte:
Temos uma separação total entre os aspectos HTML do código JavaScript e a lógica do código JavaScript, tornando tudo independente e muito mais gerenciável. Nós estamos um pouco à frente de nós mesmos, vamos dar um passo para trás e ver como o núcleo do Vue.js alcança isso…
No núcleo do Vue.js, você define uma correlação entre seu HTML e alguns dados, e sempre que os dados forem alterados, o HTML será atualizado. A maneira como isso funciona é quando instanciando um componente Vue.js você passa alguns dados na forma de um objeto JavaScript, então este objeto é modificado, substituindo suas propriedades por métodos getter e setter rastreáveis.
O Vue.js analisa o objeto de dados enquanto constrói o HTML e vê quais dados você usou em ordem para renderizar os diferentes elementos HTML dentro dele. Usando isso, ele monitora as alterações feitas no objeto de dados e sabe exatamente o que atualizar e quando.
Ter uma ligação tão rígida entre os dados e a exibição simplifica drasticamente o desenvolvimento de aplicativos de front-end e minimiza erros devido a falsas representações. Essa separação de interesses permite que você se concentre na lógica do seu aplicativo sem precisar lidar com a atualização da exibição.
A instalação do Vue.js é tão simples quanto incluir a biblioteca:
Agora, como mencionei, um aplicativo Vue.js é composto de um objeto de dados e um modelo HTML no qual os dados são incorporados. Então, para o nosso primeiro aplicativo ver o Vue.js em ação, vamos adicionar ao body :
Primeiro definimos um div qual será o nosso modelo HTML para o nosso aplicativo Vue.js. No interior, usamos as chaves duplas para interpolação de dados no HTML.
Dentro do aplicativo real do Vue.js, simplesmente definimos os dados e conectamos div como o elemento para o aplicativo para renderizar e usar como o modelo. Em seguida, para aumentar a intensidade, incrementamos a variável de contagem em nosso aplicativo uma vez por segundo.
Isso é tudo o que existe para criar um aplicativo Vue.js, abrindo isso no seu navegador, você verá a página atualiza automaticamente toda vez que atualizamos a propriedade data.
Agora, na maioria dos aplicativos que têm o DOM reagindo aos dados sendo alterados é apenas metade da história, você também precisa de uma maneira de atualizar os dados, o Vue.js cuida disso com eventos e métodos. Os métodos são funções armazenadas executadas no contexto do seu aplicativo Vue.js.
Vamos atualizar nosso exemplo de contador para adicionar a capacidade de iniciar e parar o cronômetro em vez de simplesmente executar:
No modelo HTML, adicionamos um botão para iniciar e parar o contador. Para conseguir isso, precisamos que o texto no botão seja dinâmico e precisamos de um manipulador de eventos para quando o botão for clicado.
Para declarar um evento em Vue.js em um elemento, você prefixará o nome de qualquer evento HTML DOM padrão com v-on: , então o mouseover evento se torna v-on:mouseover ou o keyup evento se torna v-on:keyup . Em nosso exemplo, estamos usando o v-on:click atributo para lidar com o click evento.
Algo que você deve ter notado é que, para o texto do botão, estamos chamando um método em vez de apenas referenciar uma propriedade armazenada. Em muitas situações, os dados que você armazena não estão necessariamente no formato que você deseja exibir na página. Os métodos podem ser usados aqui para processar os dados, e toda a reatividade que você obtém das propriedades se aplica ao usar métodos. Se as alterações de dados subjacentes, o modelo será atualizado de acordo.
No aplicativo Vue.js, agora temos uma nova propriedade contendo a variável timer e alguns métodos. o toggle método que é ligado ao evento de clique do botão verifica se ou não o timer propriedade é definida, iniciando ou parando o temporizador, respectivamente, ea counterAction O método é usado para exibir a ação correta no botão, novamente com base na variável do timer.
Como o método de alternância altera a propriedade do timer e o método counterAction - que está no modelo Vue.js - usa a propriedade timer, a alternância de qualquer hora é chamada de modelo que renderiza novamente o texto do botão.
Vale a pena notar que, mesmo que não tenhamos um valor inicial para a propriedade timer , ele ainda precisa ser declarado ao criar o aplicativo Vue.js. Se você não declarar a propriedade desde o início, a propriedade não será reativa e não fará com que o HTML seja renderizado novamente quando alterado.
Em nosso exemplo, a visualização é atualizada uma vez por segundo enquanto o cronômetro está em execução, e assim, uma vez por segundo, nosso método counterAction também será chamado quando o botão for redesenhado. O Vue.js nos permite otimizar isso armazenando em cache o resultado de um método e apenas recuperando o método se os dados subjacentes usados especificamente no método forem alterados. Isso também é útil se você usar a mesma propriedade computada em vários locais na página, em vez de processar o valor várias vezes, armazenando em cache o valor, poderá reduzir muito a sobrecarga.
Vamos atualizar o exemplo para incluir propriedades armazenadas em cache:
A principal diferença, além do cache, é que os métodos sob computed são referenciados como propriedades em oposição a métodos, portanto, no modelo HTML, tivemos que remover os colchetes de counterAction .