<p>Sabemos que o momento é bom para o JavaScript. Com isso, vemos diversos plugins e frameworks surgindo e ganhando espaço nas comunidades.</p>
<p>E é ótimo para nós desenvolvedores FrontEnd, mas também começa a sugir duvidas.</p>
<p>Qual eu devo usar?</p>
<p>Qual devo aprender?</p>
<p>Os 3 Frameworks mais conhecidos, na data que posto este artigo, são:</p>
<ul>
<li><a href="https://angular.io/">Angular (Google)</a></li>
<li><a href="https://reactjs.org/">React (Facebook)</a></li>
<li><a href="https://vuejs.org/">Vue.js (Comunidade)</a></li>
</ul>
<p><strong>Mas qual devo escolher?</strong></p>
<p>Não vou me aprofundar em cada um deles, pois o que vi do Angular e React foi bem superficial.</p>
<p>Vou apenas dizer os motivos deu ter escolhido o VueJs.</p>
<h1 id="enfim-o-que-é-o-vuejs"><a href="#enfim-o-que-%C3%A9-o-vuejs" class="anchor">Enfim, o que é o VueJs?</a></h1>
<p>O vueJs foi criado em 2014 por <a href="https://medium.com/@youyuxi">Evan You</a>, que na época trabalhava na <a href="https://google.com">Google</a>, com o objetivo de criar uma ferramenta eficaz e curva de aprendizado bem baixa.</p>
<p>Com o crescimento e as cobranças da comunidade Vue, <a href="https://medium.com/@youyuxi">Evan You</a> passou a trabalhar apenas para o Vue, onde conseguiu através do <a href="https://www.patreon.com/evanyou">Patreon</a> uma arrecadação de $12,544.
Assim até eu pediria demissão da Google. rsrs</p>
<p>Segundo seu criador, o Vuejs é um framework progressivo para criação de interfaces interativas na web. Como ele se integra com outras bilbiotecas, fica facil combinar para alimentar aplicações de pagina unica (SPA).</p>
<p><strong>Por que VueJs?</strong></p>
<p>O que mais gostei do VueJs foi que a curva de aprendizagem dele.</p>
<p>Basta uma pequena lida na sua documentação e já sabe fazer um "HelloWord" sem dores de cabeça.</p>
<p>Segundo a comunidade Vue, as maiores dúvidas, em seus foruns, são mais relacionadas ao JavaScript que o próprio Vue.</p>
<h2 id="diretivas"><a href="#diretivas" class="anchor">Diretivas</a></h2>
<p><strong>Way Data-bind</strong>
O databind permite ligar um elemento do HTML à uma variável do JS. Basta alterar o valor da variavel e o Vue cuidará da atualização no elemento HTML.</p>
<pre><code class="language-html">&#x3C;div id="app">
  { { message } }
&#x3C;/div>
</code></pre>
<pre><code class="language-javascript">    &#x3C;script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
    &#x3C;script/>
</code></pre>
<p><img src="/assets/img/posts/directiva.png" alt="Way Data-bind"></p>
<p><strong>Two-way Data-bind</strong></p>
<p>O termo Two Way significa que uma variável pode estar ligada a um elemento e este elemento pode alterar a variável, como uma via dupla.</p>
<pre><code class="language-html">&#x3C;div id="app">
  &#x3C;p>{ { message } } { { name } }&#x3C;/p>
  &#x3C;input v-model="name" />
&#x3C;/div>
</code></pre>
<pre><code class="language-javascript">new Vue({
  el: "#app",
  data: {
    message: "Hello ",
    name: "",
  },
})
</code></pre>
<p><img src="/assets/img/posts/directiva2.png" alt="Two-way Data-bind"></p>
<p>Além da diretiva <strong>v-model</strong>, temos a <strong>v-for, v-on</strong>…</p>
<h1 id="conclusão"><a href="#conclus%C3%A3o" class="anchor">Conclusão</a></h1>
<p>Concluindo, procure saber um pouco mais sobre o Vue, pois ele vem ganhando muito espaço no mercado pela praticidade.</p>
<p>Só para você ter um pouco mais de noção do crescimento, deixo alguns dados do ano 2015 e 2016 (<a href="https://medium.com/the-vue-point/vue-in-2016-8df71d98bfb3">https://medium.com/the-vue-point/vue-in-2016-8df71d98bfb3</a>)</p>
<ul>
<li>Aumento de 300% de download no npm</li>
<li>Aumento de 240% de stars no repositório do github</li>
<li>Aumento de + 268% de Pull Request mergeados no core do Vue</li>
<li>84,098 usuários ativos semanais da Chrome DevTools</li>
</ul>
<p>Agora é só ler um pouco a documentação e entrar de cabeça!</p>
<p>Dúvidas ou sugestão? <a href="/contato">Vamos bater um papo</a></p>
<p>Segue abaixo alguns links que conheço daqui do Brasil.</p>
<p><a href="http://vuejs-brasil.com.br/">Vue Brasil</a></p>
<p><a href="https://vue-brasil.slack.com/">Slack Vue Brasil</a></p>
<p><a href="https://www.youtube.com/watch?v=ruH6R9Puj6o">Alura Live - Vue.js</a></p>



Agora que conhece um pouco sobre o Vue.js, vou mostrar o quanto é simples começar a utiliza-lo.

Caso não tenha visto meu post Conhecendo Vue.js, [clique aqui](/conhecendo-vuejs/) e depois volte para este post.

Bom, vamos lá.

Na documentação do [Vue.js](https://br.vuejs.org/v2/guide), você pode instalar de duas maneiras:

- NPM
- CDN

Para este exemplo não será necessário a instalação através do NPM.

Vamos criar um index.html, onde no `<head>` adionaremos o link CDN:

- https://unpkg.com/vue@2.5.16/dist/vue.js

No `<body>` colocaremos uma `<div>` com o `id=app`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World - Vue.js 2</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
```

Antes do fechamento do `<body>` abrimos a tag `<script></script>>` para instanciar.
E quando instaciamos o objeto Vue `new Vue()`, devemos informa-lo através do parametro **el** qual o elemento html será montado nossa aplicação.

Como nosso elemento é identificado através de um id cujo nome é `"app"` colocamos `el: '#app'`.

Lembrando que podemos colocar qualquer nome de **id**.

Então nosso script ficaria assim:

```javascript
new Vue({
  el: "#app",
})
```

**Pronto**, nosso index.html já está pronto para utilizar o Vue.

Para renderizar nossas propriedades em nossa tela, precisamos declara-las através do objeto `data`.

```javascript
    new Vue({
      el: '#app',
      data {
        msg: 'Hello Vue.js'
      }
    });
```

Agora como faço para renderizar essa propriedade `msg`?

Simples, a interpolação do Vue é `{ { } }`, ou seja, basta dentro da nossa `<div id='app'>` colocarmos `{ { msg } }`

e o nosso resultado será o famoso Hello World.

![Way Data-bind](/assets/img/posts/directiva.png)

Simples não?

Só para ter mais um gostinho da praticidades do Vue.js, vou mostrar para você outras coisas que ele é capaz de fazer.

## v-for

O `v-for` é o famoso `for` , onde varre todo um array em javascript.

Já aprendemos como declarar nossas propriedades, então vamos criar um array.

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians" },
      { name: "Palmeiras" },
      { name: "São Paulo" },
      { name: "Santos" },
    ],
  },
})
```

Nosso html criamos uma `<ul>` e nela usamos o `v-for`

```html
<div id="app">
  <h3>{ { title } }</h3>
  <ul v-for="time in times">
    <li>{ { time.name } }</li>
  </ul>
</div>
```

Nosso resultado será:

![v-for](/assets/img/posts/hellovue1.png)

## v-if e two-Way Data-bind

Neste exemplo vou aproveitar e já mostrar essas 2 maravilhas.

Vamos melhorar nosso array times e acrescentar mais uma informação origem no nosso objeto. Agora saberemos se o time é do Brasil ou Internacional.

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians", origem: "Brasil" },
      { name: "Palmeiras", origem: "Brasil" },
      { name: "São Paulo", origem: "Brasil" },
      { name: "Santos", origem: "Brasil" },
      { name: "PSG", origem: "Internacional" },
      { name: "Real Madrid", origem: "Internacional" },
      { name: "Barcelona", origem: "Internacional" },
      { name: "Manchester City", origem: "Internacional" },
    ],
  },
})
```

Vamos colocar um `checkbox` para mostrarmos apenas o que queremos ver, Brasil ou Internacional, ou até mesmo ambos.

```html
<div id="app">
  <h3>{ { title } }</h3>
  <input
    type="checkbox"
    id="brasil"
    value="Brasil"
    v-model="checkedOrigem"
  /><label for="brasil">Brasil</label>
  <input
    type="checkbox"
    id="internacional"
    value="Internacional"
    v-model="checkedOrigem"
  /><label for="internacional">Internacional</label>
  <ul v-for="time in times">
    <li>{ { time.name } }</li>
  </ul>
</div>
```

Repare que no `<input>` colocamos a tag `v-model`, que é o que precisamos para o nosso **Way Data-bind**.
Mas só isso não é suficiente e até mesmo nosso console mostrará um erro javascript. É preciso
declarar a propriedade `checkedOrigem` onde será um array

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians", origem: "Brasil" },
      { name: "Palmeiras", origem: "Brasil" },
      { name: "São Paulo", origem: "Brasil" },
      { name: "Santos", origem: "Brasil" },
      { name: "PSG", origem: "Internacional" },
      { name: "Real Madrid", origem: "Internacional" },
      { name: "Barcelona", origem: "Internacional" },
      { name: "Manchester City", origem: "Internacional" },
    ],
    checkedOrigem: [],
  },
})
```

Se colocarmos `{ { checkedOrigem } }` em nosso HTML aparecerá `[]` em nosso browser. Mas ao clicar em Brasil, ficará `[ "Brasil" ]` e em seguida clicar em Internacional, aparecerá `[ "Brasil","Internacional"]`. E isso é o que chamamos de **way data-bind**. Ao manipularmos nossa propriedade javascript, o Vue se encarrega de alterar os valores printados.

O **V-if** é o famosos `if` de qualquer linguagem, então colocamos o **v-if()** no `<li>`. Nossa condição será um simples `indexOf`.

```html
<li v-if="(!checkedOrigem.indexOf(time.origem))"></li>
```

Logo de cara, você vai ver que a nossa lista sumiu. Mas basta clicar em Brasil ou Internacional para o Vue resolver nosso problema.

![v-for](/assets/img/posts/hellovue2.png)

**Incrível** não?

Enfim, isso é apenas uma parcela do que você pode fazer com este FrameWork.

Por enquanto é isso galera.


Hello World Vue.js

Conhecendo Vue.js

Uma pequena introdução ao Framework em javascript, Vuejs.