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