Vue.js

Question 1

What is reactivity? (In a nutshell)

Answer 1

Vue watches the ‘data’ object for changes and updates the DOM appropriately.

Question 2

What Vue function runs when the app is initiated?

Answer 2

created()

Question 3

What is two-way data binding?

Answer 3

The ability of input to update Vue’s data. For example,

using the v-model directive on form input creates a two-way data biding.

Question 4

What caveat to remember when using the v-model directive on form elements?

Answer 4

The value, checked and selected attributes set in HTML will be ignored. The Vue instance data (data object) will take priority, so set initial values in JS.

Question 5

Say you’re calling an API that returns HTML; how would you display that within a div using Vue?

Answer 5

Vue automatically escapes values, so it will not display as intended - you need to use the special directive:
< div v-html=”yourHtml”>< /div>

Question 6

How to make functions available in your HTML templates?

Answer 6

You can add functions by storing them as properties of the ‘methods’ object (in the Vue instance data).

Question 7

Within functions on the methods object, how to access properties on the data object?

Answer 7

In a method, ‘this’ refers to the component that the method is attached to. Access simply with this.property. Access other functions on the methods object in the same way.

Question 8

How to add computed properties to your template?

Answer 8

Add them as functions on the computed object.
computed: {
    myValue() {
        return this.
    /// etc.

Question 9

How do you call computed properties in your template?

Answer 9

Just like a property - without “()”.

Question 10

What is the difference between running a computed property and a method?

Answer 10

Computed properties are cached - their code will be run again only when a dependency of the method changes.

Question 11

How to create a getter and setter for a computed property?

Answer 11

computed: {
    numberProperty: {
        get() {
            return x;
        },
        set(newValue) {
            this.numbers.push(newValue);
       }
    }
}

Question 12

What are watchers? (In a nutshell.)

Answer 12

They allow us to watch a property of the data object or a computed property for changes. However, Macrae advises that usually using a computed property with a setter is often a better way to do it.

Question 13

How to set a watcher on a regular property?

Answer 13

Add the name of the property to watch into the watche object (as a function). eg:
data: { count: 0 },
watch: {
    count() {
        // this.count has changed!

Question 14

If you have a whole object stored in your data, how to watch just a single property of that object?

Answer 14

Use dot syntax on the watcher definition, enclosed in single quotes:
data: {
    formData: {
        username: '',
    },
watch: {
    'formData.username'() {
        // this.formData.username has changed!
    }
}

Question 15

What arguments are passed to watchers when a property is changed?

Answer 15

The new value and the old value (in that order):
watch: {
    inputValue(newVal, oldVal) {
        // can also use this.inputValue in place of newVal
    }
}

Question 16

How to watch an entire object for changes?

Answer 16

By default, a watcher won't fire if only a property in an object changes. Only if you replace the entire object. Watching the entire object is known as a deep watch, done like so:
watch: {
    formData: {
        handler() {
            // object has changed!
        },
        deep: true
    }
}

Question 17

What is a component?

Answer 17

A self-contained piece of code that represents a part of a page. They have their own data, JS and ofter their own styling. They can contain other components, and can communicate with each other.

Question 18

How to register and use a component globally (code example)?

Answer 18

< custom-button>< /custom-button>
< script>
Vue.component('custom-button', {
    template: '< button>Custom< /button>'
});
// start Vue...
< /script>

Question 19

Comment on the object used to define a component.

Answer 19

Similar to the object used to define the Vue instance, but the data property on components in a function (on the Vue instance it’s an object). This is so that multiple instances of the same component don’t share the same data.

Question 20

What’s the difference between v-if and v-show?

Answer 20

A falsy v-if element isn’t output to the DOM. A falsy v-show is added to the DOM with style=”display: none”.
Therefore, v-if is better for hiding stuff that hasn’t loaded yet, or data that doesn’t exist yet.
v-show has less performance cost on the DOM, also useful for downloading things in the background.

Question 21

Give a one-line code example of using a for-loop directive.

Answer 21

< li v-for=”dog in dogs”>{{ dog }}< /li>

Question 22

What if we want the index of the array while going through a v-for loop?

Answer 22

< li v-for=”(dog, i) in dogs>Number {{ i }} is {{ dog }}< /li>
Note the order of arguments is (value, key).

Question 23

Write a for loop that counts from 1 to 10

Answer 23

< span v-for=”n in 10”>{{ n }} < /span>

Question 24

What is : shorthand for?

Answer 24

v-bind:

Question 25

If you edit an element in an array and find that is isn’t behaving reactively, what could be wrong?

Answer 25

You must use either .splice() or Vue.set() to edit elements in an array, or Vue won’t know that the array was edited.

Question 26

What are the caveats / limitations to Vue’s reactivity? (name 3)

Answer 26

Adding new properties to an object (the getter/setter functions are added when the instance is initialized, new added properties won’t be reactive).

Setting items on an array. Using the index to set items will not work. Use either .splice() or Vue.set().

Setting the length of an array. Will not work as in JS (padding or truncating). You may truncate using .splice().

Question 27

How to add new properties to an object (after Vue is initialised) so that they’re reactive?

Answer 27

Use the Vue.set() function. Inside a component this is available as this.$set

Question 28

Write code for a simple function that returns your name.

Answer 28

new Vue({
    el: '#app',
    methods: {
        myName() {
            return 'your name';
        }
    }
});

Question 29

True/false: computed properties can accept arguments.

Answer 29

False, only methods can accept arguments.

Question 30

What are filters?

Answer 30

A convenient way of manipulating data in your templates (like formatting currency, dates, names, for example).
Usually filters are registered globally so can easily be reused across an entire app. Methods are for local component use only.

Question 31

Write code to define a simple filter.

Answer 31

// in html...
< p>Product two cost: {{ productTwoCost | formatCost }}< /p>

// in vue instance:
    filters: {
        formatCost(value) {
            return (value / 100).toFixed(2);
        }
    }

Question 32

How to chain multiple filters in the same expression?

Answer 32

{{ productCost | round | formatCost }}

Round is called first, then that value is passed to formatCost.

Question 33

Write code to define a filter that receives an argument.

Answer 33

// in html...
< p>Product two cost: {{ productTwoCost | formatCost('$') }}< /p>

// in vue instance:
    filters: {
        formatCost(value, symbol) {
            return symbol + (value / 100).toFixed(2);
        }
    }

Question 34

Where else can you use filters other than in interpolation?

Answer 34

You can use filters with v-bind when binding values to arguments:
< input type=”text” v-bind:value=”productCost | formatCost(‘$’)”>

Question 35

How to register a filter globally instead of on a per-component basis?

Answer 35

Vue.filter(‘filterName’, function(value) {
return whatever;
});

Question 36

What are the two caveats to using filters?

Answer 36

(1) In a filter, you cannot use this to refer to methods and data on the components. They are meant to be pure functions.
(2) You can only use filters in interpolations and v-bind directives (as opposed to being able to use them in any expression).

Question 37

What is v-on?

Answer 37

Event Binding.
It allows you to listen to DOM events, and trigger a method when the event happens.
It takes the name of the event as the argument, and the event listener as the passed value.

Question 38

Write a simple one-line event binding on a button.

Answer 38

< button v-on:click=”counter++”>Click to increase counter< /button>

Question 39

When binding events, describe a significant difference between specifying a method and putting the code inline.

Answer 39

Using a method, then event is passed in as the first argument. This is the native DOM event that you would get if you had added the event listener using JS .addEventListener().

Question 40

What is @ shortcut for?

Answer 40

v-on: event binding.

You can replace v-on:click with just @click

Question 41

How to pass data into components in your HTML?

Answer 41

Using props passed into the components as attributes on the HTML. (eg color=”red”), then list all the props in an array in the ‘props’ property of the component’s object. It’s value becomes available using this.color

Question 42

Must you pass an array into the ‘props’ property?

Answer 42

You can also pass an object containing information about the props, e.g. types, required, defaults and validation.

Question 43

How do you ‘case’ prop identifiers?

Answer 43

In the HTML, use kebab-case (my-prop=”…”) and in JS use camel-case (myProp). Vue handles this automatically.