Vue.js

Question 1

What are the 5 steps to initializing a Vue web application?

Answer 1

1. Install vue-cli globally with: npm install -g vue-cli
2. Initialize the project from a template with: vue init
3. Change directory: cd
4. Install dependencies: npm install
5. Run in development mode: npm run dev

Question 2

What command is used to start the application in development mode?

Answer 2

npm run dev

Question 3

What commands are used to run the application for production?

Answer 3

npm run build

npm run start

Question 4

Name all of the Vue lifecycle hooks

Answer 4

created
mounted
updated
destroyed

Question 5

What are lifecycle hooks in Vue?

Answer 5

Lifecycle hooks are the defined methods which get executed in a certain stage of the Vue object lifespan

Question 6

In Nuxt.js, how would you pull data from an API call to use when a component is created?

Answer 6

Use an async created() lifecycle hook with axios to make the API call

Question 7

In Vue.js, what does @submit.prevent do?

Answer 7

It prevents the default behavior of a submit button when it is clicked (the way that preventDefault() does in JavaScript to an event)

Question 8

What is the syntax for an “emit” statement in Vue.js?

Answer 8

this.$emit(‘var-name’, this.varName);

Question 9

In Vue.js, what do you need to do in a parent template in order to receive an emitted variable?

Answer 9

add an event listener with the following syntax:
“ComponentName @emitted-var-name=”receivingMethod” /”
Then, create the receiving method:
receivingMethod(varName) {
this.parentVar = varName;
}

Question 10

In Vue.js, which directive is used in order to make a two–way data binding connection between an element and a variable in the data()?

Answer 10

v-model