Nessa guerra de novos frameworks JavaScript, Vue.js aparece como mais um player promissor e agora chegou a hora de conferir uma introdução a vue.js.
A sua adoção vem crescendo dia-a-dia, mas essa não é a principal killer-point da plataforma. Ele promete ser um framework progressivo, não utilizar um único monolítico, os módulos podem ser adicionados conforme a sua necessidade, ou seja, podemos partir de aplicações simples até complexas aplicações adicionando os módulos Vuex(redux) e Vue-router.
Qual a diferença entre vue.js e outros frameworks
Uma grande diferença do Vue é sua organização os componentes agrupam HTML, CSS e JS em um mesmo arquivo, definido como separação por interesse.
Outro ponto para muitos uma vantagem que o framework não tem nenhuma empresa proprietário, como React(Facebook) e Angular(Google). O Vue é 100% opensource.
O que você precisa saber para seguir a introdução a vue.js
Se você possui conhecimento básico em HTML, CSS e JS Vue é uma boa pedida, você terá todas as ferramentas para acompanhar essa introdução a vue.js. Algumas empresas adotam a plataforma é aprender um novo framework antes do grande hype é um diferencial. Agora vamos ao que interessa, mostrarei alguns recursos básicos do Vue.js.
Temos a opção para acompanhar esse artigo de introdução a vue.js é utilizar vue-cli, mas para esse exemplo trabalharemos com a CDN.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>Code language: HTML, XML (xml)Adicionamos a Vue ao nosso HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Vue</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>Code language: HTML, XML (xml)Acabamos de criar o nosso primeiro app da nossa introdução a vue.js, ele é bem simples, mas já podemos ver algumas características importantes. Dentro da div app temos um elemento com chave duplas esse é o padrão utilizado pelo Vue para identificar as partes dinâmicas do nosso código, lembrando que esse trecho ficará conectado com a nossa aplicação qualquer alteração desse valor será refletida no nosso DOM.
Após a chamada da nossa CDN temos o nosso código JavaScript, criamos uma instância com os seguintes atributos, qual elementos a nossa aplicação irá apontar com el, qual os dados da nossa aplicação com data e assim a nossa aplicação é inicializada.
Condicionais e loops
v-if
O atributo v-if é uma condicional if ela funciona como um toogle, se o nosso valor for true o conteúdo na tag será exibido. Como podemos observar no exemplo acima, a variável can_i_see_it e can_i_see_it_2 são vinculados a dois elementos só o primeiro span será exibido por seu valor ser true. Notem quando utilizamos um atributo vue não precisamos utilizar as chaves duplas.
v-else
Temos a possibilidade de trabalhar com else utilizando a propriedade v-else, se não atribuirmos nenhum valor a propriedade funciona como um else normal podemos trabalhar com uma situação else if passando outra condicional.
Outro detalhe para esse exemplo em data passo um objeto question com dois atributos(title e are_you_ready). Por exemplo, para acessar o atributo title no objeto question utilizamos {{question.title}}.
Trabalhando com Inputs
No exemplo acima temos um input vinculado com uma propriedade message através do atributo v-model que cria uma conexão two-way data binding. Se testarmos o resultado a cada alteração do input será refletido no template tag {{message}}.
Para esse post temos nosso último exemplo:
Utilizamos o último exemplo e adicionamos um botão e vinculamos um método addMessage através do atributo v-on:click na nossa instância Vue adicionamos um novo atributo methods e passamos os métodos que a nossa aplicação irá possuir, nesse caso a cada click do botão salvar adicionamos o conteúdo do campo message a um array.
Com isso temos só um pouco que o framework pode fazer por nós com essa rápida introdução a vue.js, como nos exemplos acima não utilizei nenhum gerenciador de tarefas ou gestão de bundle, mas podemos utilizar o vue-cli para ter um markup de uma aplicação.
Essa foi uma introdução a vue.js, mas a documentação do Vue é bem completa e está totalmente traduzida para português você pode conferir no link abaixo:
https://br.vuejs.org/v2/guide/index.html
Deixe um comentário