Estudos de Vue3

vue3.md

Estudo VueJS

Diferenças do Vue2 pro Vue3

• Como ele é criado (scaffold)
• Multiplos componentes raiz no mesmo arquivo
• Fragments (Estados) -> estudar mais
• Nova possibilidade de fugir do Options API (n gostei)
• Beleza já entendi que vo te q aprender esse tal de Composition API
• Novo jeito de acessar os ciclos de vida de um hook onMounted()
• Propriedades Computadas são legais obrigado vue3.
• Você pode passar as props diretamente no setup, isolar contexto e evitar de chamar o this em tudo que é lado.
• Portal ?????????????????????

Sumário

• Vue3 é mais rapido, menor e mais fácil de manter que o Vue2
• Vue3 é marromeno a mesma coisa que o Vue2 porém com mais features significativas
• A sintaxe não mudou muito, já que você pode usar a Option API do jeito que ela foi desenhada no Vue2.

Como iniciar o Vue3

Você pode iniciar tanto usando o NPM/Yarn e baixar o Vue3 quanto pegar diretamente de um CDN como o unpkg.

Uma coisa bem interessante na sua construção do método é que ele passa uma função mount() esperando um parâmetro de algum elemento dentro da sua pagina pra ser a referência.

Por padrão, a comunidade chama de #app.

<div id="app">
  <!--Elementos a serem adicionados a sua aplicação VUE-->
</div>
<script>
  Vue.createApp({
    // suas funções do app Vue
  }).mount("#app");
</script>

Diferenças entre Options API vs Composition API

Options API separa partes da sua aplicação de uma maneira não tão agradável, com alguns vários métodos e etapas.

Com Composition API você consegue carregar tudo no setup e criar um ambiente reativo usando hooks disponíveis. Além disso é possível compartilhar código com "Composables".

Composition API

TODO: boa pergunta

Diretivas básicas do Vue3

Diretiva: v-html

Por padrão, o Vue insere tudo que você colocar como plaintext, mas caso você precise fazer um append de algo com html dá pra usar o v-html

<p>Usando interpolação de texto: {{ rawHtml }}</p>
<p>Usando a diretiva: <span v-html="rawHtml"></span></p>

Diretiva: v-bind

A diretiva v-bind indica pro elemento sincronizar o valor com a propriedade do componente.

Se o valor for null ou undefined o atributo vai ser removido do elemento renderizado.

<!-- Forma padrão -->
<div v-bind:id="dynamicId"></div>

<!-- Forma rápida -->
<div :id="dynamicId"></div>

Quando o atributo é boleando ele tem outra propriedade

Criando um Hello World

Propriedades de um componente (props)

Se você precisar dar um formato pra um componente ou pagina, você pode usar as props pra inicializar e dar um contexto maior, com tipos e regras pré estabelecidas pela framework.

Os tipos de propriedades aceitas pelo VueJS:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

export default {
  props: {
    name: String,
    age: Number,
  },
};

Métodos

Dentro do seu objeto de app você tem um atributo chamado methods que dentro dela você pode declarar funções para chamar dentro do seu componente VueJS.

Vue.createApp({
  data() {
    return {
      buttonClasses: "text-green",
      count: 0,
    };
  },

  methods: {
    toggle() {
      this.count++;
      if (this.count > 5) {
        alert("minha pica");
      }
    },
  },
}).mount("#app");

Existem algumas possibilidades pra você chamar uma função, porém a mais simples é utilizando a diretiva v-on:click pra cada vez que meu elemento for clicado, acontecer o que está na minha função.

<div id="app">
  <p>{{ count }}</p>
  <button :class="buttonClasses" v-on:click="toggle">Vai caralho</button>
</div>

Diretivas de loop: v-for

Se você tiver uma lista/array e quiser loopar nela, você pode usar o v-for no elemento raiz do seu loop.

<ul>
  <li v-for="assignment in assignments">
    <label>
      {{ assignment.name }}
      <input type="checkbox" v-model="assignment.complete" />
    </label>
  </li>
</ul>
<script>
  let app = {
    data() {
      return {
        assignments: [
          { name: "Estudar VueJS", complete: false },
          { name: "Escrever Artigo", complete: false },
          { name: "Freelazinho", complete: false },
        ],
      };
    },
  };
  Vue.createApp(app).mount("#app");
</script>

Referencias

• Guide to Vue Props