Aprenda Vue.js do ZERO

• Vue.js é um framework progressivo, assim como seu próprio slogan o define. É focado no desenvolvimento de interfaces de usuário(Front-end) e aplicativos de página única conhecido com single-page application, ou simplesmente: SPA.

• O Vue foi criado pelo desenvolvedor independente chinês Evan You, após trabalhar para o Google usando o AngularJS em vários projetos.

• Posteriormente, ele resumiu o pensamento por trás do processo de criação do Vue: "Pensei, e se eu pudesse retirar somente a parte que realmente gostava do Angular e criar algo muito leve?".

• O primeiro commit ao código-fonte do projeto data de julho de 2013, e o framework foi lançado oficialmente em fevereiro do ano seguinte, em 2014.

• Seu diferencial dos demais frameworks é o fato de possuir um código mais limpo e organizado, tornando-o mais facilmente visível e mais fácil de trabalhar.

• Diferentemente do jQuery que utiliza seletores e similar a frameworks como: React e Angular, por exemplo, o Vue.js utiliza componentes que possui o seguinte conteúdo:

Nesse vídeo vamos criar o nosso Hello, World com Vue.js

Utilizando o Vue.js você verá diversos atributos de tags HTML iniciados com a letra v seguido de um traço, exemplo: v-bind, v-click, v-show e entre outros que falaremos mais à frente. Esse prefixo v seguido de um traço - significa que é um atributo(chamados de diretivas) utilizado pelo Vue.js .

Além da "variável" mensagem, podemos adicionar outros à data separados por vírgulas, inclusive arrays. Você ainda pode criar expressões e condições ternárias com os objetos .

Nesse vídeo vamos saber como criar formas de exibição de um elemento baseado no conteúdo do mesmo.

Fazendo um loop(laço) numa lista e exibindo dinamicamente suas listas, baseado no exemplo de listas de listas

Suas funções podem ser exibidas através de methods. Você pode acessar esses métodos(funções) diretamente na instância de "app"(dependendo do nome que você escolheu da instancia pode ser outro nome) ou usá-los em expressões de diretiva. Todos os métodos terão seu contexto automaticamente vinculado à instância Vue.

Assim como methods existem outros hooks que possuem "tempo de uso" ou como o próprio Vue chama: com Ciclos de Vida, são eles: created(), mounted, computed e entre outros que podem ser encontrados aqui .

Todos os gatilhos de ciclo de vida automaticamente possuem seus contextos this vinculados à instância, assim você pode acessar dados, propriedades computadas e métodos. Isso significa que você não deve usar Arrow Function para definir este tipo de método (por exemplo, created: () => this.fetchTodos()) . Isto porque arrow functions vinculam o contexto pai, assim this não será a instância Vue como você espera e this.fetchTodos será undefined.

Em resumo component é subdividir o documento HTML para melhor manipulá-los

Vamos praticar nosso primeiro exercício nesse capítulo.

Vamos praticar nosso segundo exercício com ferramentas diferentes do exercício anterior.

Vamos aprender como instalar o vue-cli, mas antes de qualquer coisa você vai precisar do npm instalado no seu sistema, alternativamente você pode usar o yarn .

Vamos consumir API que criamos do Laravel, mas os conceitos servirão para qualquer outra API de outras linguagens de programação: Node.js, Go, Drogon C++ e entre outras .

O Bootstrap-Vue tem algumas peculiaridades como nome de elementos(tags) e alguns atributos .

Vamos seguir os passos:

Assumindo que o servidor não está rodando e não deve estar!

• 01. Entre no diretório do seu projeto Vue, para nosso exemplo: cd artigos/

• 02. Rode o comando: npm run build, isso irá diminuir o tamanho da sua aplicação, pois o modo produção não precisa de tudo aquilo do modo desenvolvimento.

• 03. Após terminada a construção o projeto final fica na pasta artigos/dist/, se você tentar abrir o index.html ficará em branco, então vamos mover para o diretório do Apache, exemplo no meu caso: mv dist/ /var/www/localhost/htdocs/

Agora se acessarmos o endereço: http://localhost/dist/ perceba que estará tudo vazio. Então, vamos fazer o seguinte:

• Primeiro é interessante formatar o código HTML do arquivo index.html , para isso você pode usar o site: https://www.freeformatter.com/html-formatter.html, copie todo o código do arquivo index.html e cole em Option 1 depois clique em FORMAT HTML IN NEW WINDOW será aberta uma nova aba, então copiei o código, depois remova todo o código do index.html e cole esse formatado que você copiou do site.

Vamos para mais um exercícios, mas agora vamos conhecer conceitos de variáveis especiais do Vue.js e outras técnicas .

# Deploy na Heroku

+ 1. Crie uma conta na heroku

> <https://heroku.com/>

+ 2. Instale o HEROKU-CLI:

Para Ubuntu acima da versão 16.04:

```sh

sudo snap install --classic heroku

```

> Para outras distros ou sistemas operacioais veja [esse link](https://devcenter.heroku.com/articles/heroku-cli).

+ 3. Rode o build:

```sh

cd mytodo

npm run build

```

+ 4. Agora edite o arquivo: `vim package.json` e em:

```json

"scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  }

```

Adicione:

```json

"postinstall": "npm run build",

"start": "node server.js"

```

Deixando assim:

```json

"scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "postinstall": "npm run build",

    "start": "node server.js"

  }

```

+ 5. Agora crie no diretório raiz do seu projeto um arquivo de nome: `vim server.js` e coloque esse conteúdo dentro:

```js

var express = require('express')

var path = require('path')

var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic(path.join(__dirname, 'dist')))

var port = process.env.PORT || 5000

app.listen(port)

console.log('server started ' + port)

```

+ 6. Configure seu Heroku para:

```sh

heroku config:set NPM_CONFIG_PRODUCTION=false

```

+ 7. Agora basta fazer o deploy:

```sh

heroku login

heroku git:remote -a [NOME_DO_SEU_APP_NA_HEROKU]

git add .

git commit -m "Fazendo o deploy"

git push heroku main

```

Agora é só acessar seu aplicativo no endereço:

> <https://[nome-do-seu-app].herokuapp.com>