Vue

Question 1

Vue

Answer 1

Framework progresivo

Question 2

Por qué es progresivo?

Answer 2

Conocemos a Vue como el Framework progresivo justamente por su vesatilidad. Es una pequeña librería que se encarga de resolver el problema de la vista dentro de lo que es el patrón MVC (Modelo, Vista, Controlador), pero también puede ser muy potente cuando la combinamos con parte de su ecosistema, es decir,que Vue puede ir escalando a medida que nuestro proyecto vaya incrementando los requerimientos o vaya incrementando su complejidad.

Question 3

Vue es una librería enfocada a la vista que utiliza el Virtual DOM y es totalmente reactiva. Tiene dos caracteristicas principales, ___ y ___

Answer 3

Tiene dos caracteristicas principales, el sistema declarativo y el sistema de componentes.

Question 4

___ is a state management pattern and library for the application using Vue JS. it acts as a centralized store for all the different components in your Vue JS application. It has rules to ensure that the state can be only mutated in a predictable fashion.

Answer 4

VueX

Question 5

____ helps in applying common text formatting. It is used in two places, mustache interpolations, and v-bind expressions. It mainly filters the data on the DOM level. So you get data that is still intact in the storage but is represented in the custom specified manner. I

Answer 5

Filters

Question 6

____ in Vue JS are a single, independent unit of an interface. They have their own state, markup, and style.

Answer 6

Components

Question 7

A Vue component can be defined in four ways.

Answer 7

The first is new Vue({ /*options */ }).

The second is Vue.component(‘component-name’, { /* options */ }).

The third way is by using the local components.

The fourth is in the .vue files or Single File Components.

Question 8

Vue js comes with following features

Answer 8

Templates

Reactivity

Components

Transitions

Routing

Question 9

Create new vue instance

Answer 9

You can create Vue instance with the Vue function:

var vm = new Vue({ // options })

Question 10

Explain one way data in Vue

Answer 10

In one-way data flow the view(UI) part of application does not updates automatically when data Model is change we need to write some custom code to make it updated every time a data model is changed.

Question 11

In Vue js ___ is used for one-way data flow or binding.

Answer 11

v-bind

Question 12

two-way data binding the view(UI)

Answer 12

In two-way data binding the view(UI) part of application automatically updates when data Model is changed.

Question 13

In Vue.js ___ directive is used for two way data binding.

Answer 13

v-model

Question 14

13) How to create Two-Way Bindings in Vue.js?

Answer 14

Question 15

In Vue js ___ are used to transform the output that are going to rendered on browser.

Answer 15

filters

Question 16

How create a custom filter

Answer 16

Vue.filter(‘reverse’, function (value) { return value.split(‘’).reverse().join(‘’) })

Question 17

what is component and how to create one in the main

Answer 17

Vue Components are one of most powerful features of Vue js.In Vue components are custom elements that help you extend basic HTML elements to encapsulate reusable code.

Question 18

Directivea

Answer 18

Maneras de extender el HTML con nuevos atributos y tags

Question 19

Directivas de vue

Answer 19

v-show

v-if

v-model

v-else

v-on

Question 20

Ciclo de vida de vue

Answer 20

Pbservar la data, iniciar eventos, created y compilar, indicar cuando está ready en el document, y tenemos el destroyed

Question 21

Crear un app hola mundo en el app , como sería el HTML

Answer 21

Question 22

Hacer app hola mundo en #app como sería el JS con el title

Answer 22

Question 23

{{ title }}

Answer 23

expresion que llama al data title

Question 24

El ___ es la opción que nos propone VueJS para interactuar con el DOM, principal con el concepto de Two Way Data Binding, esto quiere decir que vamos a tener:

Vista: aquí tenemos el HTML.

Estado: aquí tenemos nuestros datos de JS.

Usuario: es el que introduce cambios en la vista.

Answer 24

Declarative Rendering

Question 25

Permite mantener sincronizados los datos con el DOM sin tener que hacer nada.

Answer 25

Two-way data binding

Question 26

Dentro de una expresión se evalua algo y devuelve algo, no se pueden usan

Answer 26

if, loop, while

Question 27

El shorthand para v-bind es :
Podemos user el shorthand así:

Question 28

Usar v-if (condición)

Answer 28

v-bind:src=”” –>Para las imágenes v-if=”condición” –> para poner una condición EJ: v-if=”changePercent > 0” v-else-if=”sino se cumple la condición” –> cuando no se cumple el v-if Ej: v-else-if=”changePercent < 0” v-else –> tambien puede ir solo el else sin una condicion v-show –>igual que un if, la unica diferencia es que me muestra las etiquetas pero en display none.```

Question 29

v-show

Answer 29

sew muestra si se cumple condición

Question 30

v-for

Answer 30

para mostrar cosas de un array

Question 31

We can use the ___ directive to listen to DOM events and run some JavaScript when they’re triggered.

Answer 31

v-on

Question 32

Ejemplo de v-on de counter

Answer 32

Question 33

v-on con metodo

Answer 33

Question 34

registering a component

Answer 34

Vue.component(‘my-component-name’, { /* … */ })

Question 35

Global registartion

Answer 35

Question 36

local registration

Answer 36

Question 37

Clases en tiempo real

Answer 37

0 ? ‘green’: ‘red’”>{{name}}

Question 38

v-style

Question 39

Propiedades computadas (Computed)

Answer 39

propiedades que se calculan en tiempo real en base a los valores de otras propiedades.

Answer 40

computed: {

title(){ return this.name + ' ' + this.symbol }

}

Question 41

Donde llamar un API en vue ciclo

Answer 41

Mounted

Question 42

Crea un componente counter y que partes necesita

Answer 42

• new component
• methods
• template

Question 43

Como decirle a un hijo que cosas le comparte el padre

Answer 43

con props, aquí salen los que el componente padre le va a setear

Question 44

<!-- \_\_\_in HTML -->

and

// ___in JavaScript

Answer 44

kebab-case

<blog-post></blog-post>

camelCase

postTitle

Question 45

comunicación de padre a hijo por props y de hijo a padre por eventos

Answer 45

En el hijo emitimos

this.$emit(‘change-color’)

en el HTML asignamos como lo escucha el padre

v-on:change-color=”updateColor”

y el padre tiene ese metodo

methods:{ updateColor(){ this.color = this.color.split(‘’).reverse().join(‘’) } } })

Question 46

slots

Answer 46

nos permite hacer como props.children inyectar contenido del padre al hijo

Question 47

Lifecycle Hooks

Answer 47

beforeCreate

created

beforeMount

Mounted

beforeUpdate

updated

beforeDestroy

destroyed