Module2-events

Question 1

<p>How do you react to an event in html in Vue</p>

Answer 1

<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

Question 2

<p>Should v-on:event point to ="add()" or ="add"?</p>

Answer 2

<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>

Question 3

What is the default argument provided by js to an event handler

Answer 3

JS provide the event handler with an object that describes the event itself as an argument.

Question 4

<p>how do you get access to the element that the event occurred on?</p>

Answer 4

<p>once you get the default event object you can use event.target to receive the element that the event was triggered on.</p>

Question 5

<p>How do you keep the behavior of getting the default event object?</p>

Answer 5

<p>You keep the default behavior by not calling the method with () but just pointing to the method name.</p>

Question 6

<p>how do you get the value of an element that an event occurred on?</p>

Answer 6

<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>

Question 7

<p>how do we send the event object to the method if we want to pass an additional parameter (ex. last name)?</p>

Answer 7

<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>

Question 8

<p>how do you prevent a form from doing its default behavior of submit when we click a button in the form?</p>

Answer 8

<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>

Question 9

What are buttons event modifiers for

Answer 9

.left .middle .right (don’t need the .left since this is the default behavior)

Question 10

What are keys event modifiers

Answer 10

<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>

Question 11

How do you make an event fire just once

Answer 11

use the .once event modifier

Question 12

<p>how do you stop an event from propagating</p>

Answer 12

<p>use event.stop event modifier</p>

Question 13

<p>how to Only trigger if event.target is element itself</p>

Answer 13

<p>use the event.self event modifier</p>

Question 14

<p>what does v-once do?</p>

Answer 14

<p>v-once is a directive that tells vue to evaluate the data binding only once .</p>

Question 15

<p>what does v-model directive do</p>

Answer 15

<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>

Question 16

<p>why using methods just to show calculated fields is not a good idea?</p>

Answer 16

<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>

Question 17

<p>What is computed</p>

Answer 17

<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>

Question 18

<p>what is watch</p>

Answer 18

<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>

Question 19

<p>What is the shorthand for v-on:hover=</p>

Answer 19

<p>@hover=</p>

Question 20

<p>What is the shorthand for v-bind:value=</p>

Answer 20

<p>:hover=</p>

Question 21

<p>can we watch computed fields?</p>

Answer 21

<p>yes we can watch computed methods by naming the method in watch the same as the computed method</p>

Question 22

<p>how do you run something in delay?</p>

Answer 22

<p>use setTimeOut(func, time)</p>

Question 23

How do you add multiple bound classes to the class variable

Answer 23

use an array to hold the different data elements and assign it to the bound class attribute

Question 24

how you can bind a style attribute

Answer 24

you can use the following syntax for example

:style={“hidden” : “isHidden”}

Question 25

how do you use v-model

Answer 25

in order to use v-model you need to have a field in the data object and then point v-model at that field

Question 26

How do you activate based on a condition several classes on a bound class attribute

Answer 26

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>

Question 27

how do you set inline styles?

Answer 27

Use the following syntax as example:

:style=”{borderColer:isBoxASelected ? red : blue}”

Question 28

Why avoid using inline styles

Answer 28

inline styles override everything else so unless this is the specific reason why you are using it, it is better to avoid using them.

Question 29

What should we use instead of inline styles.

Answer 29

use classes

Question 30

What is the special syntax that vue supports for class binding?

Answer 30

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.

Question 31

Do we need to specify a class that is always true in the object we bind the class to

Answer 31

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

Question 32

Can you inline style based on a computed field

Answer 32

yes
(p)Style me with computed!(/p)

computed: {
backgroundColorStyle() {
return this.backgroundColor;
},

Question 33

Can you bind class attribute to an array

Answer 33

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

Question 34

how do you add an element to the beginning of an array?

Answer 34

use the unshift method

Question 35

when do you use the lazy event modifier

Answer 35

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.

Question 36

When do you use the trim event modifier

Answer 36

When working with form elements and the v-model directive

Working with input fields, v-model.trim is useful because it automatically removes whitespace.

Question 37

When do you use v-model.number

Answer 37

When working with form elements if you’re expecting only a number instead of a string, make sure you use v-model.number.