<p>Agora que conhece um pouco sobre o Vue.js, vou mostrar o quanto é simples começar a utiliza-lo.</p>
<p>Caso não tenha visto meu post Conhecendo Vue.js, <a href="/conhecendo-vuejs/">clique aqui</a> e depois volte para este post.</p>
<p>Bom, vamos lá.</p>
<p>Na documentação do <a href="https://br.vuejs.org/v2/guide">Vue.js</a>, você pode instalar de duas maneiras:</p>
<ul>
<li>NPM</li>
<li>CDN</li>
</ul>
<p>Para este exemplo não será necessário a instalação através do NPM.</p>
<p>Vamos criar um index.html, onde no <code>&#x3C;head></code> adionaremos o link CDN:</p>
<ul>
<li>https://unpkg.com/vue@2.5.16/dist/vue.js</li>
</ul>
<p>No <code>&#x3C;body></code> colocaremos uma <code>&#x3C;div></code> com o <code>id=app</code></p>
<pre><code class="language-html">&#x3C;!DOCTYPE html>
&#x3C;html lang="en">
  &#x3C;head>
    &#x3C;meta charset="UTF-8" />
    &#x3C;title>Hello World - Vue.js 2&#x3C;/title>
    &#x3C;script src="https://unpkg.com/vue@2.5.16/dist/vue.js">&#x3C;/script>
  &#x3C;/head>
  &#x3C;body>
    &#x3C;div id="app">&#x3C;/div>
  &#x3C;/body>
&#x3C;/html>
</code></pre>
<p>Antes do fechamento do <code>&#x3C;body></code> abrimos a tag <code>&#x3C;script>&#x3C;/script>></code> para instanciar.
E quando instaciamos o objeto Vue <code>new Vue()</code>, devemos informa-lo através do parametro <strong>el</strong> qual o elemento html será montado nossa aplicação.</p>
<p>Como nosso elemento é identificado através de um id cujo nome é <code>"app"</code> colocamos <code>el: '#app'</code>.</p>
<p>Lembrando que podemos colocar qualquer nome de <strong>id</strong>.</p>
<p>Então nosso script ficaria assim:</p>
<pre><code class="language-javascript">new Vue({
  el: "#app",
})
</code></pre>
<p><strong>Pronto</strong>, nosso index.html já está pronto para utilizar o Vue.</p>
<p>Para renderizar nossas propriedades em nossa tela, precisamos declara-las através do objeto <code>data</code>.</p>
<pre><code class="language-javascript">    new Vue({
      el: '#app',
      data {
        msg: 'Hello Vue.js'
      }
    });
</code></pre>
<p>Agora como faço para renderizar essa propriedade <code>msg</code>?</p>
<p>Simples, a interpolação do Vue é <code>{ { } }</code>, ou seja, basta dentro da nossa <code>&#x3C;div id='app'></code> colocarmos <code>{ { msg } }</code></p>
<p>e o nosso resultado será o famoso Hello World.</p>
<p><img src="/assets/img/posts/directiva.png" alt="Way Data-bind"></p>
<p>Simples não?</p>
<p>Só para ter mais um gostinho da praticidades do Vue.js, vou mostrar para você outras coisas que ele é capaz de fazer.</p>
<h2 id="v-for"><a href="#v-for" class="anchor">v-for</a></h2>
<p>O <code>v-for</code> é o famoso <code>for</code> , onde varre todo um array em javascript.</p>
<p>Já aprendemos como declarar nossas propriedades, então vamos criar um array.</p>
<pre><code class="language-javascript">new Vue({
  el: "#app",
  data: {
    title: "Times de Futebol",
    times: [
      { name: "Corinthians" },
      { name: "Palmeiras" },
      { name: "São Paulo" },
      { name: "Santos" },
    ],
  },
})
</code></pre>
<p>Nosso html criamos uma <code>&#x3C;ul></code> e nela usamos o <code>v-for</code></p>
<pre><code class="language-html">&#x3C;div id="app">
  &#x3C;h3>{ { title } }&#x3C;/h3>
  &#x3C;ul v-for="time in times">
    &#x3C;li>{ { time.name } }&#x3C;/li>
  &#x3C;/ul>
&#x3C;/div>
</code></pre>
<p>Nosso resultado será:</p>
<p><img src="/assets/img/posts/hellovue1.png" alt="v-for"></p>
<h2 id="v-if-e-two-way-data-bind"><a href="#v-if-e-two-way-data-bind" class="anchor">v-if e two-Way Data-bind</a></h2>
<p>Neste exemplo vou aproveitar e já mostrar essas 2 maravilhas.</p>
<p>Vamos melhorar nosso array times e acrescentar mais uma informação origem no nosso objeto. Agora saberemos se o time é do Brasil ou Internacional.</p>
<pre><code class="language-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" },
    ],
  },
})
</code></pre>
<p>Vamos colocar um <code>checkbox</code> para mostrarmos apenas o que queremos ver, Brasil ou Internacional, ou até mesmo ambos.</p>
<pre><code class="language-html">&#x3C;div id="app">
  &#x3C;h3>{ { title } }&#x3C;/h3>
  &#x3C;input
    type="checkbox"
    id="brasil"
    value="Brasil"
    v-model="checkedOrigem"
  />&#x3C;label for="brasil">Brasil&#x3C;/label>
  &#x3C;input
    type="checkbox"
    id="internacional"
    value="Internacional"
    v-model="checkedOrigem"
  />&#x3C;label for="internacional">Internacional&#x3C;/label>
  &#x3C;ul v-for="time in times">
    &#x3C;li>{ { time.name } }&#x3C;/li>
  &#x3C;/ul>
&#x3C;/div>
</code></pre>
<p>Repare que no <code>&#x3C;input></code> colocamos a tag <code>v-model</code>, que é o que precisamos para o nosso <strong>Way Data-bind</strong>.
Mas só isso não é suficiente e até mesmo nosso console mostrará um erro javascript. É preciso
declarar a propriedade <code>checkedOrigem</code> onde será um array</p>
<pre><code class="language-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: [],
  },
})
</code></pre>
<p>Se colocarmos <code>{ { checkedOrigem } }</code> em nosso HTML aparecerá <code>[]</code> em nosso browser. Mas ao clicar em Brasil, ficará <code>[ "Brasil" ]</code> e em seguida clicar em Internacional, aparecerá <code>[ "Brasil","Internacional"]</code>. E isso é o que chamamos de <strong>way data-bind</strong>. Ao manipularmos nossa propriedade javascript, o Vue se encarrega de alterar os valores printados.</p>
<p>O <strong>V-if</strong> é o famosos <code>if</code> de qualquer linguagem, então colocamos o <strong>v-if()</strong> no <code>&#x3C;li></code>. Nossa condição será um simples <code>indexOf</code>.</p>
<pre><code class="language-html">&#x3C;li v-if="(!checkedOrigem.indexOf(time.origem))">&#x3C;/li>
</code></pre>
<p>Logo de cara, você vai ver que a nossa lista sumiu. Mas basta clicar em Brasil ou Internacional para o Vue resolver nosso problema.</p>
<p><img src="/assets/img/posts/hellovue2.png" alt="v-for"></p>
<p><strong>Incrível</strong> não?</p>
<p>Enfim, isso é apenas uma parcela do que você pode fazer com este FrameWork.</p>
<p>Por enquanto é isso galera.</p>



Por mais root que seja, hoje é difícil encontrar um programador que não use um editor mais elegante, não é mesmo?

Bloco de notas, TextPad, entre outros, já ficaram para trás a muuuito tempo.

### Sublime Text

Já tentei usar vários outros editores, [Atom](https://atom.io/), [Eclipse](https://www.eclipse.org/downloads/), [VisualStudio](https://www.visualstudio.com), mas nenhum deles me deixou mais satisfeito que o **[Sublime Text](https://www.sublimetext.com)** que hoje esta na sua **3 versão**.

O que mais me atrai nele é o quanto ele é leve, mesmo intalando plugins para nos ajudar.

Claro, se para você um dos que citei acima é melhor, continue com ele. Afinal, não existe o **Melhor Editor** e sim o melhor editor para **VOCÊ**!

Vamos para de papo furado e vamos falar do plugins que mais uso e gosto do Sublime.

### Material Theme

![Material](https://camo.githubusercontent.com/972bd5d93779fdaf95e02cf0326b429be93adcba/687474703a2f2f692e696d6775722e636f6d2f395079784a4d4e2e676966)

Este plugin é capaz de deixar seu **Sublime** com um visual incrível.

Na [Documentação](https://github.com/equinusocio/material-theme) é possível ver todas as modificações que você poderá ser feita.

Vou deixar aqui o como costumo deixar o meu.

```javascript
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
  "theme": "Material-Theme.sublime-theme",
  "material_theme_accent_blue": true,
  "material_theme_accent_scrollbars": true,
  "material_theme_accent_titlebar": true,
  "material_theme_arrow_folders": false,
  "material_theme_big_fileicons": true,
  "material_theme_bold_tab": true,
  "material_theme_bright_scrollbars": false,
  "material_theme_bullet_tree_indicator": true,
  "material_theme_compact_panel": true,
  "material_theme_compact_sidebar": false,
  "material_theme_contrast_mode": false,
  "material_theme_disable_fileicons": false,
  "material_theme_disable_folder_animation": true,
  "material_theme_disable_tree_indicator": true,
  "material_theme_panel_separator": false,
  "material_theme_small_statusbar": true,
  "material_theme_small_tab": true,
  "material_theme_tabs_autowidth": true,
  "material_theme_tabs_separator": true,
  "material_theme_titlebar": true,
  "material_theme_tree_headings": true,
  "show_full_path": true,
  "translate_tabs_to_spaces": true,
  "always_show_minimap_viewport" : true,
  "bold_folder_labels"           : true,
  "font_options"                 : ["gray_antialias", "subpixel_antialias"], // On retina Mac & Windows
  "indent_guide_options"         : ["draw_normal", "draw_active"], // Highlight active indent
  "line_padding_bottom"          : 3,
  "line_padding_top"             : 3,
  "overlay_scroll_bars"          : "enabled",
```

### Emmet

Se você é um desenvolvedor Web, Este maravilhoso plugin irá diminuir e muito seu tempo. Afinal, quem nunca precisou escrever varias `<div>`, ou numa `<table>`, precisou escrever varias `<tr>` e `<td>`?

Digamos que você precise escrever isso:

```html
<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
</div>
```

Com o [Emmet]() basta digitar `div.row>div.col-md-3*4` e depois clicar no `TAB`.

### Alignment

Este plugin é para desenvolvedores que assim como eu, gosta de deixar o código bem alinhado.

Como assim?

Vou dar um exemplo:

```php
  $a = 1;
  $abc = 5;
  $abcd = 3;
  $ab = 8;
```

Com o [Alignment](https://packagecontrol.io/packages/Alignment) basta selecionar todas as linhas e clicar em `Ctrl + Alt + A` e seu código ficará assim:

```php
  $a    = 1;
  $abc  = 5;
  $abcd = 3;
  $ab   = 8;
```

### Wakatime

Este último na verdade não é um Plugin que vai lhe ajudar na hora de programar. o [Wakatime](https://wakatime.com/) é uma ferramenta que metrifica tudo que você faz no seu editor, como projetos que trabalhou, linguagens que usou, horas gastas, etc.

### Outros plugins

Bom, para finalizar, existem diversos plugins com Snippets para facilitar na hora do auto-complete.
Se está escrevendo em PHP, procure "php snippets", se precisa daquela ajuda em com classes do bootstrap, procure 'Bootstrap snippets'.

É isso aí galera! Este são alguns dos Plugins que uso.

E aí, qual você indicaria?



Meus Plugins Sublime

Os plugins que mais gosto do Sublime Text 3.


Sabemos que o momento é bom para o JavaScript. Com isso, vemos diversos plugins e frameworks surgindo e ganhando espaço nas comunidades.

E é ótimo para nós desenvolvedores FrontEnd, mas também começa a sugir duvidas.

Qual eu devo usar?

Qual devo aprender?

Os 3 Frameworks mais conhecidos, na data que posto este artigo, são:

- [Angular (Google)](https://angular.io/)
- [React (Facebook)](https://reactjs.org/)
- [Vue.js (Comunidade)](https://vuejs.org/)

**Mas qual devo escolher?**

Não vou me aprofundar em cada um deles, pois o que vi do Angular e React foi bem superficial.

Vou apenas dizer os motivos deu ter escolhido o VueJs.

# Enfim, o que é o VueJs?

O vueJs foi criado em 2014 por [Evan You](https://medium.com/@youyuxi), que na época trabalhava na [Google](https://google.com), com o objetivo de criar uma ferramenta eficaz e curva de aprendizado bem baixa.

Com o crescimento e as cobranças da comunidade Vue, [Evan You](https://medium.com/@youyuxi) passou a trabalhar apenas para o Vue, onde conseguiu através do [Patreon](https://www.patreon.com/evanyou) uma arrecadação de \$12,544.
Assim até eu pediria demissão da Google. rsrs

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).

**Por que VueJs?**

O que mais gostei do VueJs foi que a curva de aprendizagem dele.

Basta uma pequena lida na sua documentação e já sabe fazer um "HelloWord" sem dores de cabeça.

Segundo a comunidade Vue, as maiores dúvidas, em seus foruns, são mais relacionadas ao JavaScript que o próprio Vue.

## Diretivas

**Way Data-bind**
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.

```html
<div id="app">
  { { message } }
</div>
```

```javascript
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
    <script/>
```

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

**Two-way Data-bind**

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.

```html
<div id="app">
  <p>{ { message } } { { name } }</p>
  <input v-model="name" />
</div>
```

```javascript
new Vue({
  el: "#app",
  data: {
    message: "Hello ",
    name: "",
  },
})
```

![Two-way Data-bind](/assets/img/posts/directiva2.png)

Além da diretiva **v-model**, temos a **v-for, v-on**…

# Conclusão

Concluindo, procure saber um pouco mais sobre o Vue, pois ele vem ganhando muito espaço no mercado pela praticidade.

Só para você ter um pouco mais de noção do crescimento, deixo alguns dados do ano 2015 e 2016 ([https://medium.com/the-vue-point/vue-in-2016-8df71d98bfb3](https://medium.com/the-vue-point/vue-in-2016-8df71d98bfb3))

- Aumento de 300% de download no npm
- Aumento de 240% de stars no repositório do github
- Aumento de + 268% de Pull Request mergeados no core do Vue
- 84,098 usuários ativos semanais da Chrome DevTools

Agora é só ler um pouco a documentação e entrar de cabeça!

Dúvidas ou sugestão? [Vamos bater um papo](/contato)

Segue abaixo alguns links que conheço daqui do Brasil.

[Vue Brasil](http://vuejs-brasil.com.br/)

[Slack Vue Brasil](https://vue-brasil.slack.com/)

[Alura Live - Vue.js](https://www.youtube.com/watch?v=ruH6R9Puj6o)


Conhecendo Vue.js

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