Vue.js - Propriedades e métodos de um componente

O Vue.js é um framework para front end que vem ganhando muito espaço na comunidade de desenvolvimento por sua baixa curva de aprendizado e por suas excelentes qualidades.

É possível desenvolver em Vue.JS utilizando o Vue cli, que é uma ferramenta de 'transpiler', ou apenas importando scripts com a tag <script>, que no geral colocamos no header da página.

Para facilitar o desenvolvimento de aplicações abaixo segue um breve resumo das opções dentro de um componente Vue.js.

 {

   // Referência para o container HTML 
   // (utilizado no desenvolvimento sem vue-cli)
   el: '#app',

   // HTML que deve ser renderizado junto com variáveis e etc. 
   // (utilizado no desenvolvimento sem vue-cli)
   template: '<p>Minha aplicação {{ nome }}</p>',

   // Define as variáveis disponíveis no componente   
   data() {
      return {
         nome: 'Meu nome'
      }
   },

   // Define métodos disponíveis no componente
   methods: {
      meuMetodo() {
         console.log('Este é meuMetodo');
      }
   },

   // Dispara métodos antes mesmo de renderizar os elementos/componentes na tela
   created() {
      this.meuMetodo();
   },

   // Dispara métodos depois que os elementos/componentes foram renderizados na tela
   mounted() {
      this.meuMetodo();
   },

   // Modifica o v-model do componente
   model: {
      prop: 'variavelVModel',
      event: 'eventoConfirmado',
   }

   // Valores fornecidos por um componente pai
   props: {
      variavel: {
         type: Number | Boolean | String | Array | Object,
         required: true | false,
         default: 'valor padrão'
      }
   },

Mixins

Carrega código compartilhado com todos os componentes.
Deve ser importando dentro do componente com um import NomeDoMixin from '@/mixins/NomeDoSeuMix'

   mixins: [
      NomeDoMixin
   ],

Computed

Computed cria uma propriedade com um determinado valor e a cacheia.
Computed atualiza somente quando a propriedade que a modificou mudar (reativo)

   computed: {
      nomeCompleto() {
        return this.nome + ' Sobrenome';
      },
      outroNome: {
        get() {
          return this.nome + ' Sobrenome';
        },
        set(newValue) {
          return this.nome + ' ' + newValue;
        },
      }
   },

Watch

Observa quando o valor de uma variável é modificada. Dispara um evento qualquer

   watch: {
      nomeDaVariavelObservada() {
         console.log('A variável nomeDaVariavelObservada foi modificada');
      },
      nomeDeOutraVariavelObservada(val, oldVal) {
         console.log("O valor antigo ${oldVal} foi substituído pelo novo valor ${val}");
      },
      deepWatchingVariavel: {
         handler() {
            console.log("Exibe o objeto deepWathingVariavel por inteiro ${val}");
         },
         deep: true,
      }
   },

Filters

Define filtros personalizados no componente

   filters: {
      maiuscula(value) {
         if (!value) return '';
         return value.toUpperCase();
      }
   },

Components

Importa componentes para o componente atual

   components: {
      'meu-componente': MeuComponente,
   },

 }