Vue Intro

Question 1

¿Qué es Vue?

Answer 1

Vue es un framework progresivo para construir interfaces de usuario.
Vue está diseñado desde cero para ser utilizado incrementalmente
Podemos crear SPA single web application.
La librería central está enfocada solo en la capa de visualización, y es fácil de utilizar e integrar con otras librerías o proyectos existentes.

Question 2

v-bind

Answer 2

Para crear vínculos reactivos entre nuestros datos y los “atributos de HTML” utilizamos una directiva de Vue llamada v-bind

<a>Youtube</a>
Abreviado:
<a>Youtube</a>

 data() {
        return {
            cuenta: 'Vista',
            cantidad: 0,
            enlaceYoutube: 'https://youtube.com/bluuweb',
        }

Question 3

v-if v-else

Answer 3

<h2>Cuenta activada</h2>
<h2>Cuenta desactivada</h2>
return {
    cuenta: 'Vista',
    cantidad: 0,
    estado: true,

Question 4

v-for

Answer 4

Podemos recorrer array y array de objetos con directivas de Vue: v-for

<ul>
    <li>
        {{index + 1}} - {{item}}
    </li>
</ul>

data() {
    return {
        cuenta: 'Vista',
        cantidad: 200,
        estado: true,
        servicios: ['Transferencias', 'Pagos', 'Giros']
    }
}

Question 5

v-on:click

Answer 5

Agregar Saldo

Abreviado:

Agregar Saldo

Question 6

Class dinámico

Answer 6

<h2>
Cantidad: {{cantidad}}
</h2>

Question 7

Computed Properties

Answer 7

Las propiedades computadas nos sirven para generar calculos en nuestros componentes, por ejemplo no se recomienda colocar demasiada lógica en nuestras plantillas HTML, ya que dificulta la interpretación de nuestros componentes.

:class=”[cantidad > 100 ? ‘text-success’ : ‘text-danger’]”

computed: {
    colorCantidad() {
        return this.cantidad > 100 ? 'text-success' : 'text-danger'
    }
}

Es mejor:
:class=”colorCantidad”

Question 8

Componentes

Answer 8

Son instancias reutilizables, así podemos ir estructurando la lógica de nuestro proyecto en diferentes secciones o partes.

Question 9

Props

Answer 9

Si quisieramos enviar información desde nuestro componente padre a nuestro nuevo componente, podemos utilizar los props

CamelCase

Dentro del objeto props podemos agregar palabras compuestas con camelCase pero en el llamado de nuestro componente tiene que ir separado de un guión.

props: {
cantidad: Number,
textoFooter: String,
}