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 Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more