Intro
¿Estás preparado? Vamos a empezar de la manera más simple y con el mínimo código posible. Un index.html y un app.js (L17). Con estos dos ficheros tendremos suficiente para empezar (en un futuro añadiremos un styles.css) (L7). La manera más simple de empezar a usar Vue 3 como librería es copiar de la documentación oficial el link a la CDN (solo para aprender, no para producción) e importarlo en nuestro index.html (L9) como un script.
Al final del fichero tenemos la importación al script de nuestra app.js que de momento solo contendrá una constante.
[html title=»index.html» firstline=»1″ highlight=»7,9, 17″]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Introducción a Vue 3 – Coding Around the World!</title>
<!– Importar Estilos –>
<link rel="stylesheet" href="./styles.css" />
<!– Importar Vue.js –>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<h1>Nombre del jugador</h1>
</div>
<!– App –>
<script src="./app.js"></script>
</body>
</html>
[/html]
[js title=»app.js»]
const player = "Héctor Menduíña Hermelo"
[/js]
Si te fijaste bien, en el index.html tenemos una etiqueta h1 que dice donde deberíamos mostrar el nombre del jugador. La pregunta es, ¿cómo utilizar Vue para mostrar la variable player?
Creando una Vue App
Para poder mostrar nuesta info dentro de nuestro HTML lo primero que necesitamos es crear una Vue App. Para ello cambiamos el código en nuestro app.js de la siguiente manera:
[js title=»app.js»]
const app = Vue.createApp({})
[/js]
Com ves solo necesitamos el método createApp({}) que recibe como argumento un objeto. Ese será el objeto que nos permita configurar nuestra App. Añadiremos la propiedad data(), que como su propio nombre indica será donde almacenaremos los datos de nuestra App. Esta debe ser una función que retorna otro objeto. Añadiremos nuestro player como una propiedad del data().
[js title=»app.js»]
const app = Vue.createApp({
data() {
return {
player: ‘Héctor Menduíña Hermelo’
}
}
})
[/js]
Montando nuestra Vue App
Bien, una vez tenemos «creada» nuestra App, necesitamos decirle a nuestro DOM donde la queremos montar. Pues Vue también nos facilita esta tarea. Para ello vamos a añadir otra etiqueta script al final de nuestro index.html. (L. 20)
[html title=»index.html» firstline=»1″ highlight=»12, 20-22″]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Introducción a Vue 3 – Coding Around the World!</title>
<!– Importar Estilos –>
<link rel="stylesheet" href="./styles.css" />
<!– Importar Vue.js –>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<h1>Nombre del jugador</h1>
</div>
<!– Vue App –>
<script src="./app.js"></script>
<!– Mount Vue App –>
<script>
const mountedApp = app.mount("#app")
</script>
</body>
</html>
[/html]
Como ves hacemos uso de la variable app que hace referencia a nuestra App que acabamos de crear en el app.js. Llamaremos al método mount(), el cual necesita en selector de DOM como argumento. En nuestro caso será el "#app" (L.12) el que nos permite conectar nuestra Vue App con nuestro DOM de una manera muy simple.
Mostrando datos
Una vez tenemos nuestra Vue App creada, importada y montada en nuestro DOM, podemos empezar a mostrar los datos que tenemos en ella. Para renderizar nuestra propiedad player dentro de la etiqueta h1, escribimos lo siguiente en nuestro index.html:
[html title=»index.html» firstline=»12″ tabsize=»2″]
<div id="app">
<h1>{{ player }}</h1>
</div>
[/html]
Sí ahora abrimos nuestro index.html en el navegador veremos que el nombre de nuestra propiedad player se debería mostrar en la etiqueta h1. ¿Magia? vamos a entender qué esta pasando para que esto funcione así.
Entendiendo la instancia Vue
Al crear nuestra Vue App, le pasamos un objeto de configuración, lo que nos permite añadir algunas propiedades opcionales para configurar la app. Al llamar a createApp() se crea nuestra instancia Vue, el corazón de nuestra App, lo que lo controla todo.
[js title=»app.js»]
const app = Vue.createApp({Options Object})
[/js]
Al importar nuestra App en el index.html y montarla en el DOM, lo que hicimos fue «enchufarla», esto quiere decir que nuestro HTML ahora tendrá linea directa con nuestra App, pudiendo acceder a todas las opciones como su data().
¿Qué hacen las doble llaves (curly brace syntax)? Vamos a imaginar que es una linea directa con nuestra App Vue.
El diálogo podría ser algo así:
- HTML: ¿cuál es el valor de la propiedad
player? - App: Héctor Menduíña Hermelo
Cuando la página se renderiza lo que vemos es «Héctor Menduíña Hermelo».
Si no estas familiarizado con la sintaxis de doble llave ({{ player }}) lo que nos permite es escribir expresiones JavaScript válidas dentro de nuestro HTML, algo muy útil.
Reactividad en Vue
¿Qué pasaría si cambiamos el valor de player de «Héctor Menduíña Hermelo» a «Michael Jordan»?
Debido a como funciona Vue, la expresión de la tag h1 que depende de la propiedad player recibiría automáticamente el nuevo valor y el DOM se actualizaría para mostrar «Michael Jordan».
Eso es porque Vue es reactivo.Entre bambalinas, Vue tiene un completo sistema de reactividad que maneja las actualizaciones del DOM. Cuando un valor del data() cambia, cualquier lugar del que dependa dentro de la App se actualizará automáticamente. Nosotros no tenemos que hacer nada, Vue lo hace por nosotros :). Más adelante crearé algún post hablando sobre este tema.
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!