DEV Community

Nathan Silva
Nathan Silva

Posted on • Edited on

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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)