Module2-events Flashcards
<p>How do you react to an event in html in Vue</p>
<p>You need to use the v-on:click for example to respond to the click event and connect it to a method in the methods section v-on:click="handleClick"</p>
a short hand instead of v-on=”click” is @click
<p>Should v-on:event point to ="add()" or ="add"?</p>
<p>Both syntax work. If there are no params you usually use the later syntax but you need the parenthesis version if you want to pass values to the function</p>
What is the default argument provided by js to an event handler
JS provide the event handler with an object that describes the event itself as an argument.
<p>how do you get access to the element that the event occurred on?</p>
<p>once you get the default event object you can use event.target to receive the element that the event was triggered on.</p>
<p>How do you keep the behavior of getting the default event object?</p>
<p>You keep the default behavior by not calling the method with () but just pointing to the method name.</p>
<p>how do you get the value of an element that an event occurred on?</p>
<p>You connect the element and event by using v-on. you point the v-on to the name of the method you want to invoke so you don't override the default behavior of getting the event object. once you get the event object you need to call event.target.value to get the value.</p>
<p>how do we send the event object to the method if we want to pass an additional parameter (ex. last name)?</p>
<p>In order to send the event object and another value to a method in the event handler we need to use the following syntax: v-on:click="add($event,lastName);</p>
<p>how do you prevent a form from doing its default behavior of submit when we click a button in the form?</p>
<p>we can call a method on v-on:submit and then use the event object to call event.preventDefault(); OR
<br></br>We can use an event modifier on the event like v-on=submit.prevent</p>
What are buttons event modifiers for
.left .middle .right (don’t need the .left since this is the default behavior)
What are keys event modifiers
<p>.tab <br>.delete <br>.esc <br>.space <br>.up <br>.down <br>.left <br>.right <br>.ctrl <br>.alt <br>.shift <br>.meta</p>
How do you make an event fire just once
use the .once event modifier
<p>how do you stop an event from propagating</p>
<p>use event.stop event modifier</p>
<p>how to Only trigger if event.target is element itself</p>
<p>use the event.self event modifier</p>
<p>what does v-once do?</p>
<p>v-once is a directive that tells vue to evaluate the data binding only once .</p>
<p>what does v-model directive do</p>
<p>v-model creates a 2 way binding. it replaces the need to write the following (if myField is the binded field to the input) v-bind:value=,v-on="input "=</p>
<p>why using methods just to show calculated fields is not a good idea?</p>
<p>methods are rerun every time the page refreshes since Vue does not know if the method changes a value that is displayed. It is better to use a computed field where vue knows to recalculated the value based on the data fields it is based on which helps performance</p>
<p>What is computed</p>
<p>computed is a reserved work in Vue that is an object containing methods that compute values based on fields in the data function. it only computes if one of the underlying fields in data change.</p>
<p>what is watch</p>
<p>watch is another object inside the configuration of the Vue app. it is used to keep track of changes of fields in data (same function name in watch as the field to watch in data) and do operations based on those changes. Usually is suited for situations where the change in the data triggers some backend logic and does not require changes in the UI (watched fields are usually not part of the template) where computed fields might be a better match.</p>
<p>What is the shorthand for v-on:hover=</p>
<p>@hover=</p>
<p>What is the shorthand for v-bind:value=</p>
<p>:hover=</p>
<p>can we watch computed fields?</p>
<p>yes we can watch computed methods by naming the method in watch the same as the computed method</p>
<p>how do you run something in delay?</p>
<p>use setTimeOut(func, time)</p>
How do you add multiple bound classes to the class variable
use an array to hold the different data elements and assign it to the bound class attribute
how you can bind a style attribute
you can use the following syntax for example
:style={“hidden” : “isHidden”}
how do you use v-model
in order to use v-model you need to have a field in the data object and then point v-model at that field
How do you activate based on a condition several classes on a bound class attribute
you can use the following syntax
:class=”{demo:true, active:isActive}” - demo will always show because it is true and active will be active if isActive is true. Another example is <span>{{logItem.what}} {{logItem.value}}</span>
how do you set inline styles?
Use the following syntax as example:
:style=”{borderColer:isBoxASelected ? red : blue}”
Why avoid using inline styles
inline styles override everything else so unless this is the specific reason why you are using it, it is better to avoid using them.
What should we use instead of inline styles.
use classes
What is the special syntax that vue supports for class binding?
you can use the following syntax
\:class="{"demo:true, active:isActive}" - you bind to an object of key:values where the key is the class name and the value is a boolean value/expression and that will decide which classes will be active.Do we need to specify a class that is always true in the object we bind the class to
No, a class that should always appear can be omitted. only class that has logic related should be specified and those that are always true can be set in a regular class attribute. Vue will take the regular class and append to it the values in the bound objects that are truethy
Can you inline style based on a computed field
yes
(p)Style me with computed!(/p)
computed: {
backgroundColorStyle() {
return this.backgroundColor;
},
Can you bind class attribute to an array
You can bind a class attribute to an array where each object in the array is either a string with a name OR a class of an object with nameOfClass:isActive pair which will be calculated dynamically
how do you add an element to the beginning of an array?
use the unshift method
when do you use the lazy event modifier
When working with form elements and the v-model directive,
To make the model update when the change event occurs, and not any time the user presses a key, you can use v-model.lazy instead of just v.model.
When do you use the trim event modifier
When working with form elements and the v-model directive
Working with input fields, v-model.trim is useful because it automatically removes whitespace.
When do you use v-model.number
When working with form elements if you’re expecting only a number instead of a string, make sure you use v-model.number.
