# Cheat Sheet

# 1. Fundamentos

# 2. Diretivas e Hooks

# 3. Componentes

## Events

## Dynamic

> Possibilidade de alternar entre elementos no Vue, destruindo-os ou não.

### Passos:

1. Necessário criar uma variável de controle em data(){}. Essa variável recebe uma valor inicial, que será o nome de um dos componentes.

data(){
      return {
        componenteAtivo: "AulaDescricao"
      }

2. A alternância entre elementos pode se dar por botões, ou qualquer outra forma que mude o elemento *componenteAtivo*:

    <button @click="componenteAtivo = 'AulaDescricao'">Descrição</button>
    <button @click="componenteAtivo = 'AulaDownload'">Download</button>

- Para manter o componente vivo usa-se a *tag* *<keep-alive>*:

    <keep-alive>
      <component v-bind:is="componenteAtivo"></component>
    </keep-alive> 

## Sync - compontes assíncronos

Importar elementos do código de forma assíncrona, para facilitar o carregamento de arquivos maiores.

A importação via webpack do componente não se dá através da linha:

import ContatoEmpresa from "./components/ContatoEmpresa.vue"

Mas através da sintaxe abaixo:

### Sintaxe

#### Importação de componentes locais

/*Importando localmente dentro do arquivo App.vue*/

  components: {
   ServicosEmpresa: function(){
     return import("./components/ServicosEmpresa.vue");
   }
  },
  
/* ou, resumidamente, como arrow function: */

components: {
   ServicosEmpresa: () => import("./components/ServicosEmpresa.vue");
  },

#### Importação de componentes globais

/*Dentro do aquivo main.js*/

Vue.component("ServicosEmpresa", () =>
  import("./components/ServicosEmpresa.vue")
);

# 4. Animações

## 4.1 Componentes únicos

tag *<transition>*

- Pode ser nomeada ou não;
- São adicionadas classes automaticamente aos elementos;

As classes adicionadas são:

1. v-enter (adicionda antes do elemento ser inserido)
2. v-enter-active (adicionada durante a animação)
3. v-enter-to (adicionada assim que a animação termina)
4. v-leave (adicionada assim que o elemento começa a sair)
5. v-leave-active (adicionada enquanto o elemento está saindo)
6. v-leave-to (adicionada quando o elemento saiu)

O nome inicial 'v' depende do atributo *name* adotado.
Necessário ter animação associada no arquivo css, senão não serão adicionadas as classes.

- Pode-se substituir a classe padrão do vue, por outra. Abaixo o exemplo com *enter-active-class="animar"*.

- Ao se adicionar determinarda classe, métodos também podem ser evocados, passando-se, ou não, o elemento do evento como parâmetro.

- Utilizando-se *appear* no lugar de *v-if* o efeito é o mesmo, porém não tem como utilizar váriável com valor true ou false;

### 4.1.1 Sintaxe

/*No elemento a animar*/

    <transition name="fade" enter-active-class="animar">
      <h1 v-if="ativo">Serviços</h1>
    </transition>

/* No css */

<style>
/* .fade-enter-active, */
.fade-leave-active {
  transition: opacity 2s;
}

.animar {
  transition: opacity 2s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

/* Pode-se utilizar appear para a transição*/

    <transition appear name="fade" enter-active-class="animar">
      <h2>Outro texto</h2>
    </transition>

/* Métodos *enter* e *leave* sendo adicionados*/
 <transition name="fade" enter-active-class="animar" @enter="enter" @leave="leave">
      <h1 v-if="ativo">Serviços</h1>
    </transition>

  methods:{
    enter(element){
      console.log(element)
    },
    leave(){
      console.log("elemento sumiu")
    }
  }

## 4.2 Entre componentes

- Necessidade de definir *key*;
- Aconselhável utilizar o *mode="out-in"* para transição mais suave;
- Pode ser utilizado em estruturas com *if, else* ou com estruturas **<component></component>** e utilizando-se a diretiva *:is*;

### 4.2.1 Sintaxe

/* com if else */

    <transition mode="out-in">
      <p v-if="estoque >= 5" key="estoque">{{estoque}} - Item em estoque</p>
      <p v-else-if="estoque >= 1 && estoque < 5" key="acabando">{{estoque}} - Itens quase acabando</p>
      <p v-else key="esgotado">Produto fora de estoque</p>
    </transition>

/* com componentes */

 <template>
  <div>
    <ul>
      <li @click="componenteAtivo = 'PaginaSobre'">Sobre</li>
      <li @click="componenteAtivo = 'PaginaServicos'">Serviços</li>
    </ul>
    <transition mode="out-in">
      <component :is="componenteAtivo"></component>
    </transition>
  </div>
</template>

## 4.3 Animando elementos de listas

tag *<transition-group>*

- Possível determinar qual tag envolverá os elementos a serem animados. A tag padrão é *span*;

- Com a classe *v-move* é possível manipular elementos que são movidos dentro de uma lista e que não excluídos.

### 4.3.1 Sintaxe

/* Utilização da tag ul para envolver elementos*/

    <transition-group tag="ul">
      <li v-for="(produto, index) in carrinho" :key="produto">
        <p>{{produto.nome}}</p>
        <p>{{produto.preco}}</p>
        <button @click="remover(index)">Retirar</button>
      </li>
    </transition-group>

<style>
    .v-move {
      transition: transform 0.3s;
      }
</style>

# 5. Vue Router

## 5.1 Router

- Possbilidade de criação de SPA (single page applications);
- Um arquivos index.html lido pelo navegador;
- As rotas dividem a aplicação em 'páginas';
- No Vue é o client-side router;
- Mas, geralmente, esse roteamento é feito no backend;
-Instalação do *vue-router* através do comando:

npm install vue-router

//ou 


yarn add vue-router

- Criação do arquivo router.js com a estrutura básica:

### 5.1.1 Sintaxe

/* router.js */

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Cursos from "./views/Cursos.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/cursos",
      component: Cursos,
    },
  ],
});

/* App.vue */

<template>
  <div id="app">
    <h1 @click="mostrarRouter">Logo</h1>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/cursos">Cursos</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  methods:{
    mostrarRouter(){
      console.log(this.$route)
    }
  }
}
</script>

<style>
.router-link-exact-active {
  color: #84e;
  font-weight: bold;
}

a {
  padding: 10px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

- tag **<router-view></router-view>** para associar o App.vue às views de cada rota;
- Definição do modo ***history*** no **router.js**;
- Definição de links com a tag **<router-link></router-link>** em **App.vue**;
- Definição do link base em *router.js*;
- a base padrão é '/', dada por ***process.env.BASE_URL***, via node;
- Acesso ao elemento (objeto) **this.$route** que têm parâmetros da rota;

## 5.2 Dynamic route

- Passagem de propriedades para definição de rotas dinâmicas;
- Propriedade a ser passada é antecedida por dois pontos ':' na definição da rota;
- ***$route.params.curso*** pode ser definida como uma computed propertie ou através um prop;
- Os hooks do vue-router são os ***navigation guards***;
- É possível a criação de ***nested routes***, ou seja, rotas aninhadas com a propriedade ***children***;
- Necesário adicionar o **<router-view></router-view>** em cada elemento **pai** que tem elementos filhos.
- As rotas podem ser nomeadas (através de uma propriedade *name*). São as ***named routes***. No ***router-link*** o link ***to*** é passado como um objeto. Necessário o **bind** no ***to***;

### 5.2.1 Sintaxe

/* propriedade :curso */

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/cursos/:curso",
      component: Cursos,
    },
  ],
});

/* no template */

<template>
  <div>
    <h1>Curso ativo: {{$route.params.curso}}</h1>
  </div>
</template>

/* computed */

  computed:{
    curso(){
      return this.$route.params.curso;
    }
  }
  
  
/* prop no arquivo router.js */

    {
      path: "/cursos/:curso",
      component: Cursos,
      props: true,
    },
    
/* prop no arquivo Cursos.js */

export default {
  props: ['curso'],
  
  ...
  

/* rota aninhada */

    {
      path: "/cursos",
      component: Cursos,
      props: true,
      children: [
        {
          path: ":curso",
          component: Curso,
        },
      ],
    },

## 5.3 Navigation guard

- São, basicamente, hooks;
- Há os globais e locais.
- Os globais irão acontecer sempre que o router mudar;
- Os globais são ***router.beforeEach()*** e ***router.afterEach()***;
- Os locais são definidos em cada rota;
- Essa definição de hooks pode se dar também na definição do componente;
- Para os hooks de componentes há os tipos:
- ***beforeRouteEnter*** - Antes de entrar no router. Não tem acesso ao **this**.
- **beforeRouteUpdate*** - Quando um router já ativo é atualizado.
- ***beforeRouteLeave*** - Antes de sair do router. É possível passar outros caminhos para o **next()**.

### 5.3.1 Sintaxe

/* Globais, dentro do arquivo main.js */

/* Antes da mudança */

router.beforeEach((to, from, next) => {
  console.log("to:", to);
  console.log("from:", from);
  next();
} 
  
  
/* Depois da mudança */

  router.afterEach((to, from) => {
  console.log("to:", to);
  console.log("from:", from);
  });

...

/* locais, dentro das rotas */

      path: "/cursos",
      component: Cursos,
      props: true,
      beforeEnter(to, from, next) {
        console.log("foi para cursos");
...

falta 4:13 aula 0703