Diretivas Vuejs
Nathan Silva
Posted on April 20, 2024
- 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
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 @.
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.
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
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
November 30, 2024