Templates Flashcards
If greetings is a property of the component, you can display its value in your template using?
Interpolation: {{ greetings }}
If author is a property of a component App and contains { name: ‘Tatiana’ }, how can you display ‘Tatiana’?
{{ author.name }}
How do you add 1 to a reactive property defined as const count = ref(0)?
count.value = count.value + 1
How can you listen to a click event on a button?
<button @click=”doSomething” />
If author is a property of a component and contains { name: ‘Tatiana’ }, what does {{ user }} display?
{ “name”: “Tatiana” }
You can add/remove a class orange to a div when isOrange is true/false, using…?
<div :class=”{ orange: isOrange}”>
How can you stop the default behavior of an event? (for example don’t reload the page when submitting a form)
By using the .prevent modifier: @submit.prevent
How can you stop an event from propagation?
By using the .stop modifier: @click.stop
What does the .passive modifier do?
It tells the browser that the default behavior shouldn’t be prevented, and that it should be done without waiting for the listener function to return.
It can be very handy if you want to do something on an event that happens very often, like scroll or mousemove, but don’t want to slow down the scrolling of your application.
What modifier to use if you want an event listener to execute only when the event is from the element where you
declared it, and not bubbling from one of its children?
.self
What does the .capture modifier?
It allows to capture an
event bubbling from a child, and to handle it first in its handler before letting the child handling it
itself.
What directive to use if you want to display part of the template only if a certain condition is true?
v-show or v-if
What is the difference between v-if and v-show?
v-if removes the content from the DOM, and re-creates it if necessary.
v-show only hides/show the content using css display rule.
How to hide a component while Vue is compiling it? (what directive)
with v-cloak
How to loop through a list of element in the template?
using v-for directive
<div> </div>
