Intro to Vue.js (Week 7, part #1) Flashcards
What is Vue.js?
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
What is templating?
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.
Explain the following:
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount(‘#counter’)
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
Vue models are POJOs. What is this?
Plain Old Javascript Objects
What is the difference between Directives and Filters?
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.
What happens when a vue instance is created?
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.
What is the viewModel in terms of Vue.js?
An object that syncs the model and the view
What are Vue directives considered to be? Give some examples.
custom attributes
v-if:
v-on:click
v-for:
v-bind:
What does Vue allow you to link together?
data and the Document Object Model, a.k.a.
DOM (via the virtual DOM)
What happens once the data and DOM are linked?
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
What do Vue directives provide?
Special reactive behaviour based on some logic
What are the values in data() called?
Properties
What is the general structure for Vue components?
const SomeComponent = {
data() {
return: {
someProperty: ‘hello!’
}
},
methods: {
…
}
}
Vue.createApp(SomeComponent).mount(‘#some-component’)
Give an example of a Vue directive in code.
Reverse Message
Then in the methods section, there is a method called reverseMessage()
In Vue components, what key word is used to access the variables that make up your model?
this
e.g. this.message = this.newMessage
Explain the ‘computed’ feature of Vue
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
Explain the ‘method’ feature of Vue
1) A traditional function/method of JavaScript
2) You must call it
3) You can pass parameter
What are some (5) other features of Vue?
1) computed
2) method
3) Vue lifecycle
4) watchers
5) components
What is interpolation?
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.
What are Vue Directives?
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.
What are Vue Filters?
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.
