Vue basics

Question 1

What is reactivity?

Answer 1

• Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner.

Question 2

What is a Proxy?

Answer 2

1. Proxy is an object that encases another object or function and allows you to intercept it.
2. The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.

A Proxy is created with two parameters:

• target: the original object which you want to proxy
• handler: an object that defines which operations will be intercepted and how to redefine intercepted operations.

Question 3

Why are proxy’s important to understand when using Vue?

Answer 3

• They are core funcationality of Java script that Vue uses to make it reacative
• Proxy is an object that encases another object or function and allows you to intercept it.

Question 4

How many vue apps can you have per page

Answer 4

as many as you want. Imporant they will work independitly from each other They cannot share data

Question 5

What are templates

Answer 5

They are used to insert template html in a vue app.

Question 6

What is the purpose of $Ref in relation to Vue?

Answer 6

We use the $ref in our Vue.js code. to provide and object which provides a complete list of the references defined in the HTML code.

Example:

referencing the input “text”

ref=”input”>

• to log the out put in vue js*
  console. log(this.$refs.input)

would log the value of “input”

Question 7

what does $ represent.

Answer 7

A dollar sign $ will refer to Vue instance properties and methods.

• They are prefixed to differentiate the from user-defined properties
• Examples : this.$refs vm.$data vm.$props

reference

https://vuejs.org/v2/api/#Instance-Properties

Question 8

Why would you use .value in javascript?

Answer 8

.values() is used to coovert on an object to return into an array containing the values as an an array.

const object1 = {
 a: 'somestring',
 b: 42,
 c: false
};

**console.log(Object.values(object1));**
// expected output: Array ["somestring", 42, false]

Question 9

What is Virtual Dom?

Answer 9

The Virtual Dom:

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library This process is called reconciliation.

It is used :

To tell what state you want the UI to be in, and it makes sure the DOM matches that state.

Question 10

What is the Vue instance Lifecycle?

Answer 10

It describes the life cycle of an app

• what the step processes for mounting
• before mount \ mounted before
• update updated
• before unmount
• unmounted

Question 11

what are Vue components?

Answer 11

• They are used when you want to reuse HTML blocks
• They are normally broken up into specific functionality specific to that block.
• splitting up a large app or min apps

Question 12

what is the:key attribute why is it important?

Answer 12

• The key attribute is used on lists.
• It indicates the unique variable ( primary key ) that the list can iterate over
• *

Question 13

How do you create a component?

Answer 13

app.component(‘name-something’);

• The name should always have a dash
• e.g foo-barr my-name
• This avoids clashing with bulit in elements

Question 14

How do you use components?

Answer 14

You insert the same way as you would use a normal div

*

Question 15

why build ann interface with components

Answer 15

• Components are building blocks that simplify the structure of apps.
• They proved a communication mechanism that allows components to speak across components, this does not happen with multiple apps.

// check this and come back when you’re sure.

: study components

Question 16

What are Directives can you name three?

Answer 16

• Directives are special attributes provided by Vue.
• Indicated by ‘v-‘ They apply special reactive behaviour to the rendered
• examples
  
  • v-bind
  • v-on
  • v-if
  • v-for

Question 17

what is the v-on directive?

Answer 17

Attaches an event listener to the element.

List of events

*

Question 18

what does v-model do

Answer 18

two way bindig bettwen form input and app state so it will allow you to change the data in an app easily for example.

Question 19

how do you stop exisitng properties from being changed

Answer 19

Object.freeze(obj) it also stof the reactive system from tracking changes

Question 20

What is an Interpolation

Answer 20

the insertion of something of a different nature into something else. for example {{ mustache }} is insterted instead of txt the value will be replaced with mustache property on the corresponding data object

Question 21

What does v-html do

Answer 21

The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored

Question 22

Describe Computed properties in vue

Answer 22

computed properties are methods that can be called by their dame through the project

• computed properties are cached based on their reactive dependencies.
• A computed property will only re-evaluate when some of its reactive dependencies have changed.

Question 23

what is a slug in coding terms?

Answer 23

A slug is a human-readable, unique identifier, used to identify a resource instead of a less human-readable identifier like an id . You use a slug when you want to refer to an item while preserving the ability to see, at a glance, what the item is.

Question 24

What is declarative programming?

Answer 24

Declarative programming is a non-imperative style of programming in which programs describe their desired results without explicitly listing commands or steps that must be performed. Functional and logical programming languages are characterized by a declarative programming style.

Question 25

What is a Programming paradigm?

Answer 25

Programming paradigms are a way to classify programming languages based on their features.

… Some paradigms are concerned mainly with implications for the execution model of the language, such as allowing side effects, or whether the sequence of operations is defined by the execution model.

Question 26

What is an instance method

Answer 26

All Person objects will have this method

this is due to the prototype structure of javascript

Person.prototype.setName = function(nameIn) {

this.name = nameIn;

Question 27

Canonical

Answer 27

Canonical means :

• the simplest form of something specifically
• : the form of a square matrix that has zero elements everywhere except along the principal diagonal.

Question 29

what types do props support

Answer 29

​Props support the following eight types

1. String
2. Number
3. Boolean
4. Array
5. Object
6. Date
7. Function
8. Symbol