Diretivas Vuejs

nathanndos

Nathan Silva

Posted on April 20, 2024

Diretivas Vuejs
  • v-if: Cria uma condição em uma tag
  • v-show: Boleano para exibir ou não um elemento.

Diferença entre v-show e v-if: O v-show apenas deixa o display do elemento como none, ou seja, o elemento html continua disponivel na DOM da página, porém sem estar visível. Já o v-if é responsável por uma renderização condicional, aonde caso não seja verdadeira simplesmente não exibe na tela e nem na DOM.

  • v-vind:href: Cria um link
  • v-for: Faz um looping de repetição

Image description

  • v-bind:key : Informa o indice de repetição da lista

  • props: É a ação de passar a informação do componente pai para o componente filho

  • emit: É possivel "ouvir" o evento de um componente filho no componente pai

  • v-on: Diretiva para pegar eventos de click/submit/mouseover/keyup/scroll e realizar uma ação. A forma simplificada é utilizando um @.
    Image description

O v-on aceita modificadores em sua chamada, e por sua vez podem ser encadeados
@click.prevent
@click.once
@keyup.a
@click.prevent.once

  • v-html: Possibilita colocar elementos HTML dentro de determinadas tags. Caso a tag já possua outros elementos html dentro dele, o mesmo será substituido pelos valores que serão passados atravez da diretiva.

Image description

  • v-once: Executa o elemento HTML apenas uma vez, ou seja, não recebe mais atualizações de tela após a primeira execução.

  • <component :is="nome_componente": Funciona com um componente generico que pode se "transformar" qualquer coisa

💖 💪 🙅 🚩
nathanndos
Nathan Silva

Posted on April 20, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related