Vuejs Facilito v01

Esta es una pequeña guía creada por Desiré M Carmona, para quienes
quieren iniciarse en el framework Vuejs de manera sencilla y

estructurada, o para quienes quisieran repasar conocimientos. Es el
primer volumen de varios.
Está prohibida la distribución o reproducción de esta obra de ninguna de las maneras y bajo ningún concepto,
tiene únicamente fines educativos. En caso de promocionar esta obra se debe contactar previamente con la
autora ya sea en Twitter (@helleworld_) o vía correo electrónico a work@desiremcarmona.com .
//HTML Vuejs no deja de ser una librería como podría ser
Bootstrap, Materialize, Bulma CSS, Tailwind y
<html> otras muchas similares que nos hacen la vida
<head> mucho más feliz y sencilla.
<title>Probando</title>
</head> Por lo tanto, mucho antes de crear como tal un
proyecto con Vuejs, vamos simplemente a trastear
<body> un poco con esta librería importándola sin más en
<h1>¡Hola!</h1> nuestro código HTML, con el tag <script>
siguiente:
<script
src="https://cdn.jsdelivr.net/npm/vue"></sc
<script
ript>
src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html> (Sacado de su propia página, no es magia).
Desiré M Carmona
//HTML
Ahora que ya tenemos la librería disponible para
<html> nosotros/as, vamos a entender cómo Vue hace sus
<head> magias internas y funciona. Primero, imaginemos
que Vue es un nuevo trabajador para nuestra
<title>Probando</title>
empresa.
</head>
<body> Vue necesita su sitio antes de empezar a trabajar
<h1>¡Hola!</h1> para nosotros/as. Deberíamos darle un sitio en
nuestra oficina para que pueda comenzar con sus
<div id=”app”></div>
quehaceres.
<script
src="https://cdn.jsdelivr.net/npm/vue"></sc Este sitio se denominará “app”, y normalmente es
ript> un tag <div> con el ID “app”. Vue ya sabe que App
</body> es el departamento donde debe trabajar, así que lo
</html> encontrará, no te preocupes 😉
Desiré M Carmona
//HTML
Vamos ahora a meternos en la sintaxis de Vue.
[...]
<script src="https://cdn.jsdelivr.net/npm/vue"></script> Hemos importado su librería, le hemos dado un
<script> espacio para trabajar, ahora debemos crear su
const app = new Vue({ existencia, es decir, crear un objeto Vue.
el: '#app',
Para ello crearemos un “new Vue” y le diremos que
data: { trabaja en “el:’#app’”.
saludo: 'Hola, soy nuevo por aquí'
} En el apartado “data” se crean todas las variables
que utilizaremos. Por ejemplo, vamos a crear una
});
variable string para que Vue nos salude. No hace
</script> falta declararla con “var” puesto que Vue ya
reconoce que es una variable porque está siendo
creada dentro de “data”.
Desiré M Carmona
Para ver la variable que hemos creado en pantalla
//HTML vamos a necesitar la Interpolación.
<html> Esto no es más que la forma “guay” de decir que

<head> vamos a conectar un elemento HTML con una
<title>Probando</title> variable de Vue para verla por pantalla. Se
</head> consigue con las {{ }}.
<body>
Con el código <h2>{{saludo}}</h2> dentro del div
<h1>¡Hola!</h1>
#app, estamos diciéndole a Vue 2 cosas:
<div id=”app”>
👉 Que existe una variable llamada “saludo”.
<h2>{{ saludo }}</h2> 👉 Que su trabajo es mostrarla dentro del formato
</div> de una etiqueta h2.
[...]
¿Podríamos mostrarla en una etiqueta span, p, o
cualquier otra? Sí. H2 es para este ejemplo 😊.
Desiré M Carmona
IMPORTANTE
Si creamos variables dentro de nuestro data en el

objeto de Vue, y las usamos fuera de nuestro div
#app, Vue no podrá encontrarlas y no funcionará.
Asegúrate de colocar todas las variables que crees
en data dentro del div #app.
Si creas HTML fuera del div #app, se renderizará

(como nuestro <h1>Hola</h1> en el ejemplo) con
normalidad.
Recuerda que Vue no deja de ser una librería más.
Desiré M Carmona
ANTES DE SEGUIR
✋
Ahora ya sabes: Vas a encontrar todo el código de esta
guía en este repositorio de Github,
✨ Importar la librería de Vuejs a tu donde también habrá algunos ejercicios
proyecto que puedes hacer opcionalmente para
✨ Cómo hacer que funcione en tu código practicar el uso de esta librería.
✨ Cómo se crean variables en Vuejs Por favor, asegúrate de entender los

✨ Qué es y cómo se usa la Interpolación conceptos que acabas de aprender antes
de seguir, tienes el código de esta
sección anterior aquí.
Desiré M Carmona
Las directivas de Vue son una especie de pequeñas Cada una tiene su propio cometido y lo más
funciones que Vue te proporciona para poder modificar importante: pueden combinarse entre ellas.
tus variables y HTML según tus intereses, se colocan
dentro de los tags HTML y normalmente empiezan por Te pongo un ejemplo de implementación de una
“v-”. directiva Vue:
Aquí tienes una lista, a continuación las veremos más

en profundidad: //HTML
<html>
✨ v-if="" <head>
✨ v-show="" <title>Ejemplo</title>
✨ v-on:click="" </head>
✨ v-bind="" <body>
✨ v-for="" <div v-if=”seen”></div>
✨ v-model="" </body>
</html>
Desiré M Carmona
V-IF🤔
Desiré M Carmona
Vamos a utilizar el código de la lección
//HTML anterior, esta vez crearemos una variable
[...] boolean, que valdrá “true”. En nuestro HTML,
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
crearemos un título y le añadiremos la
<script> directiva “v-if”:
const app = new Vue({
el: '#app',
data: {
//HTML
seen: true
<body>
}
<h1>¡Hola!</h1>
});
<div id=”app”>
</script>
<h1 v-if=”seen”>¡Me ves!</h1>
</div>
</body>
Desiré M Carmona
Mientras la variable “seen” valga “true”,
nuestro texto se verá en pantalla con
normalidad.
En cambio, si cambiamos el valor de la

variable “seen” a false, nuestro texto dejará de
verse en pantalla...
Desiré M Carmona
¡Y no sólo eso!
Si inspeccionamos nuestro código

podemos ver que la directiva v-if no
sólo no muestra el elemento si
nuestra variable de control tiene un
valor “false”, sino que además elimina
el elemento de nuestro DOM, como si
jamás hubiera existido.
Desiré M Carmona
V-SHOW🤔
Desiré M Carmona
La hermana de v-if se llama v-show, y tienen
//HTML una diferencia muy importante en cuanto a
[...] nivel de renderización y control de
estructuras. Vamos a probar el mismo
<script> ejemplo, pero con v-show:
el: '#app',
data: {
//HTML
seen: true
<body>
}
<h1>¡Hola!</h1>
});
<div id=”app”>
</script>
<h1 v-show=”seen”>¡Me ves!</h1>
</div>
</body>
Desiré M Carmona
Igual que con la directiva v-if, si nuestra
variable de control vale “true”, el texto se verá.
Y del mismo modo, si nuestra variable vale

“false”, el elemento desaparecerá...
Desiré M Carmona
¡Y he aquí la gran diferencia!
V-show, al contrario que v-if, no

manipula el DOM. V-if crea y
destruye elementos en tu estructura,
lo cual puede afectar a la
renderización y rendimiento de la
página, mientras que v-show no los
destruye ni los crea, sino que
simplemente los muestra o los
esconde.
Desiré M Carmona
¿Por qué no practicas un poco más el uso de estas 2 directivas antes de seguir? Te
propongo un reto:
Crea una variable llamada “sueldo”, y crea una lista de objetos que quieras.
Elabora un código que muestre únicamente los objetos que puedas permitirte con tu
sueldo, haciendo uso de las directivas v-if o v-show, o combinando ambas.
Recuerda que tienes la solución de este ejercicio aquí.
Desiré M Carmona
V-ON:CLICK🤔
Desiré M Carmona
Veamos la directiva “v-on:click”, te sonará del
//HTML uso del evento onclick="función()" en
[...] JavaScript. En este ejemplo quiero cambiar el
valor de “seen” a través de esta directiva. Así
<script> que veamos qué sucede...
el: '#app',
data: { //HTML
seen: true <body>
} <div id=”app”>
}); <h1 v-if=”seen”>¡Me ves!</h1>
<button v-on:click=”seen != seen”>Cambiar
</script> valor</button>
</div>
</body>
Desiré M Carmona
Esta directiva recoge el evento del ratón
clicando un elemento. Ya que la hemos
implementado en un botón, cambiará el valor de
la variable cuando lo cliquemos.
Cada vez que cliquemos dicho botón, el valor de

la variable irá cambiando de “true” a “false”, lo
que hará que el título se muestre o se esconda.
Desiré M Carmona
Podemos cambiar muchas cosas con la
//HTML directiva v-on:click, por ejemplo, el valor de un
[...] título. Crearemos una variable de título y
luego intentaremos cambiar su valor a través
<script> de la directiva v-on:click, así:
el: '#app',
data: { //HTML
seen: true, <body>
title: ‘Primer titulo’ <div id=”app”>
} <h1 v-if=”seen”>{{title}}</h1>
}); <button v-on:click=”title = ‘Segundo
titulo’”>Cambiar valor</button>
</script> </div>
</body>
Desiré M Carmona
Esta vez, cuando cliquemos por primera vez
nuestro botón, cambiará el valor del mensaje.
Sin embargo, al seguir clicando no sucederá

nada, porque su cometido ya se ha cumplido.
Desiré M Carmona
V-BIND🤔
Desiré M Carmona
Por otra parte, tenemos la etiqueta v-bind, que
//HTML sirve para hacer dinámicos los atributos HTML.
[...]
En el siguiente ejemplo vemos cómo hacer una
<script>
interpolación de un link de una imagen y de su
título a través de esta directiva:
el: '#app',
data: {
img: //HTML
“https://images.unsplash.com/photo-1581375074612-d1fd0e
<body>
661aeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=
format&fit=crop&w=751&q=80”, <div id=”app”>
titleName: “Imagen de fruta cortada”
<img v-bind:src=img v-bind:title=”titleName”>
} </div>
}); </body>
</script>
Desiré M Carmona
La directiva v-bind es muy poderosa, ya que
actúa directamente sobre los atributos HTML
haciéndolos dinámicos.
Por ejemplo, en este mismo ejemplo vemos

cómo el atributo “src” de una imagen se
convierte en un atributo dinámico añadiéndole
“v-bind” -> “v-bind:src=”variable”, haciendo que
el HTML utilice el link indicado por Vue a través
de dicha directiva.
Hacemos lo mismo con el título de la imagen:

“v-bind:title=”variable”.
Desiré M Carmona
V-FOR🤔
Desiré M Carmona
La directiva v-for nos permite recorrer un array y
//HTML mostrarlo, como si utilizásemos un bucle for.
[...]
Vamos a mostrar una lista simple de días de la
<script>
semana que crearemos en un array:
el: '#app', //HTML
data: { <body>
lista: ["lunes", "martes", "miércoles", "jueves", <div id=”app”>
"viernes", "sábado", "domingo"], <h4>Renderizado simple:</h4>
} <ul>
}); <li v-for="listado in lista">{{listado}}</li>
</ul>
</script>
</div>
</body>
Desiré M Carmona
Como ves, la directiva v-for aplicada
sobre el elemento HTML <li>, ha creado
un <li> con cada iteración que ha
hecho sobre el elemento “lista”.
<li v-for="listado in lista">{{ listado }}</li>
Lo que queremos que se

muestre.
Nuestro array.
auxiliar
Nuestro identificador para recorrer el array.
Desiré M Carmona
También podemos utilizar v-for para recorrer
//HTML arrays de objetos y mostrar únicamente los
[...]
<script src="https://cdn.jsdelivr.net/npm/vue"></script> identificadores que queramos:
<script>
el: '#app',
data: {
//HTML
listadoKeys: [
{diaSemana: "lunes"}, <body>
{diaSemana: "martes"}, <div id=”app”>
{diaSemana: "miércoles"},
{diaSemana: "jueves"}, <h4>Renderizado de objetos con keys:</h4>
{diaSemana: "viernes"}, <span v-for="dia in listadoKeys">
{diaSemana: "sábado"}, {{dia.diaSemana + ' '}}
{diaSemana: "domingo"} </span>
]
} </div>
}); </body>
</script>
Desiré M Carmona
La directiva v-for no ha de utilizarse
obligatoriamente con listas ni con las
etiquetas <ul>, <li> u <ol>, también
puedes iterar divs, spans, p…
En este mismo ejemplo has visto lo

sencillo que ha sido iterar un <span> a
partir de un array de objetos.
Desiré M Carmona
Vamos a por el segundo reto, ahora que sabes mucho más.
Con el primer ejercicio ya resuelto, vamos a recrearlo.
Esta vez, crea un array de objetos donde indiques el nombre del objeto y su precio, y de
nuevo, muestra objetos (ya sea en una lista o como prefieras) dependiendo de si el sueldo
es mayor o menor a su precio.
Recuerda que tienes la solución de este ejercicio aquí.
Desiré M Carmona
V-MODEL🤔
Desiré M Carmona
La última directiva que veremos es v-model. Esta directiva normalmente se utiliza en formularios y para mostrar
información de usuario. A continuación, vamos a crear una variable llamada “nombre”, en el HTML crearemos un
<input> al cual añadiremos la directiva <v-model=”nombre”> con la variable que acabamos de crear, y una etiqueta
de texto donde añadiremos la interpolación de la variable “nombre”:
//HTML
//HTML
[...]
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <body>
<script> <div id=”app”>
const app = new Vue({ <h1>Bienvenido/a, {{ nombre }}</h1>
el: '#app',
data: { <h4>¿Cuál es tu nombre? 👇</h4>
nombre: “Invitado/a” <input type="text" v-model="nombre">
}
}); </div>
</script> </body>
Desiré M Carmona
Ya que hemos vinculado la directiva v-model al
elemento <input>, cada vez que cambiemos el
valor del texto del <input> se actualizará la
variable “nombre” con el nuevo valor que
hayamos introducido.
Prueba a meter el valor que quieras, ¡verás que

Vue cambia el valor automáticamente con el
nuevo que has introducido! 😉
Desiré M Carmona
Abreviando...🤔
Ahora que has visto todas las directivas, te alegrará saber que hay 2
directivas muy usadas que tienen abreviaturas para que tu código sea más
corto y fácil de leer:
v-on:click puede abreviarse a @click=””

v-bind puede abreviarse con “ : “ delante del atributo, así :src=”variable”,
:title, :href …
Desiré M Carmona
¡TIEMPO DEL RECREO!
✋
Ahora ya sabes: Recuerda que vas a encontrar todo el
código de esta guía en este repositorio
✨ Importar la librería de Vuejs a tu
de Github.
proyecto
✨ Cómo hacer que funcione en tu código El código de las directivas podrás
✨ Cómo se crean variables en Vuejs encontrarlo aquí mismo, junto a la
solución de los ejercicios.
✨ Qué es y cómo se usa la Interpolación
✨ Qué son las directivas y cómo utilizarlas No olvides echar un ojo a la
en tu proyecto documentación oficial de Vue si lo
necesitas.
Desiré M Carmona
¡Has llegado al final de esta pequeña guía de Recuerda que esta guía ha sido creada por
“Vue facilito”! 🥳 Desiré con todo su cariño y esfuerzo, por
favor, si ves algo mal o algo no te funciona, no
Has aprendido bastantes cosas, ¡estás que te dudes en contactarme vía email a
sales! work@desiremcarmona.com, o échame la
bronca por Twitter (@helleworld_).
Por supuesto esto no acaba aquí, Vue facilito
2&3 vienen en camino, pero deberías estar Estoy muy contenta de que hayas llegado
orgulloso/a de tu primer contacto con Vue sin hasta aquí, ¡pero no te relajes! Te tengo más
haber muerto en el intento. retos en camino 😉.
Desiré M Carmona

Vuejs Facilito v01

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Vuejs Facilito v01

Cargado por

Copyright:

Formatos disponibles

Esta es una pequeña guía creada por Desiré M Carmona, para quienes

quieren iniciarse en el framework Vuejs de manera sencilla y

<html> Esto no es más que la forma “guay” de decir que

Si creamos variables dentro de nuestro data en el

Si creas HTML fuera del div #app, se renderizará

Recuerda que Vue no deja de ser una librería más.

✨ Cómo se crean variables en Vuejs Por favor, asegúrate de entender los

Aquí tienes una lista, a continuación las veremos más

✨ v-for="" <div v-if=”seen”></div>

En cambio, si cambiamos el valor de la

Si inspeccionamos nuestro código

Y del mismo modo, si nuestra variable vale

V-show, al contrario que v-if, no

Recuerda que tienes la solución de este ejercicio aquí.

Cada vez que cliquemos dicho botón, el valor de

Sin embargo, al seguir clicando no sucederá

Por ejemplo, en este mismo ejemplo vemos

Hacemos lo mismo con el título de la imagen:

<li v-for="listado in lista">{{ listado }}</li>

Lo que queremos que se

Nuestro identiﬁcador para recorrer el array.

En este mismo ejemplo has visto lo

Con el primer ejercicio ya resuelto, vamos a recrearlo.

Recuerda que tienes la solución de este ejercicio aquí.

Prueba a meter el valor que quieras, ¡verás que

v-on:click puede abreviarse a @click=””

También podría gustarte