Intro to Vue.js (Week 7, part #1)

Question 1

What is Vue.js?

Answer 1

1) A progressive JS framework for building user interfaces
2) Designed to be incrementally adoptable
3) Capable of powering sophisticated SPAs
4) A (powerful) layer of abstraction for JavaScript

Question 2

What is templating?

Answer 2

A way of separating HTML structure from the content {{…}}

E.g.

[div]

Counter: {{ counter }}

[/div]

Templating allows to bind values from the model into the view.

In Vue, this can be achieved using simple HTML bindings.

Question 3

Explain the following:

const Counter = {

 data() {

      return {

           counter: 0

     }

 }

}

Vue.createApp(Counter).mount(‘#counter’)

Answer 3

Create a new Vue object. The Vue object:

1) Is mounted to an element with value ‘#counter’. This property ‘binds’ this Vue instance to the element with id of ‘counter’.
2) A property called data() that returns a POJO with a programmer-defined name-value pair: name of counter, and a value of 0

Question 4

Vue models are POJOs. What is this?

Answer 4

Plain Old Javascript Objects

Question 5

What is the difference between Directives and Filters?

Answer 5

Directives:

custom HTML attributes that tell vue.js to do something to the DOM element (v-if:)

Filters :

can be used to apply common text formatting. In mustache interpolation of v-bind.

Question 6

What happens when a vue instance is created?

Answer 6

It adds all of its properties in the data object to Vue’s reactivity system.

When the values of those properties change, the view will “react”, updating to match the new values.

Question 7

What is the viewModel in terms of Vue.js?

Answer 7

An object that syncs the model and the view

Question 8

What are Vue directives considered to be? Give some examples.

Answer 8

custom attributes

v-if:

v-on:click

v-for:

v-bind:

Question 9

What does Vue allow you to link together?

Answer 9

data and the Document Object Model, a.k.a.

DOM (via the virtual DOM)

Question 10

What happens once the data and DOM are linked?

Answer 10

things are then reactive

1) User changes the DOM (e.g. enters information), the data is updated;
2) JavaScript changes the data, the DOM is updated

Question 11

What do Vue directives provide?

Answer 11

Special reactive behaviour based on some logic

Question 12

What are the values in data() called?

Answer 12

Properties

Question 13

What is the general structure for Vue components?

Answer 13

const SomeComponent = {

data() {

return: {

someProperty: ‘hello!’

}

},

methods: {

…

}

}

Vue.createApp(SomeComponent).mount(‘#some-component’)

Question 14

Give an example of a Vue directive in code.

Answer 14

Reverse Message

Then in the methods section, there is a method called reverseMessage()

Question 15

In Vue components, what key word is used to access the variables that make up your model?

Answer 15

this

e.g. this.message = this.newMessage

Question 16

Explain the ‘computed’ feature of Vue

Answer 16

1) A derived property
2) Has getters and (sometimes) setters
3) You don’t call a computed, you reference it
4) You don’t pass parameters to a computed
5) e.g. convert cents to dollars

Question 17

Explain the ‘method’ feature of Vue

Answer 17

1) A traditional function/method of JavaScript
2) You must call it
3) You can pass parameter

Question 18

What are some (5) other features of Vue?

Answer 18

1) computed
2) method
3) Vue lifecycle
4) watchers
5) components

Question 19

What is interpolation?

Answer 19

Interpolation refers to the act of taking one or more variables, evaluating their values, and displaying the result in the template.

It can be as simple as a ‘Hello World’ string, but it can also be the result of a more complex expression.

Question 20

What are Vue Directives?

Answer 20

Vue provides a set of built-in directives prefixed with v- that allow DOM manipulation inside the template in response to model changes.

For example, the v-if directive would show/hide an element based on the model value.

Question 21

What are Vue Filters?

Answer 21

Filters can be used with model values to modify the given value for displaying in the view.

For example, you may want to display some text in all caps.

Here, rather than modifying or duplicating the initial model value, we can apply a filter that will dynamically transform the value for the display.