Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Frontend
Aprendiz
Probar Vue rápidamente
En esta lección escribirás tu primer programa de Vue, sin necesidad de instalar ni configurar nada.
Antes de empezar a crear un proyecto de Vue
Vamos a dirigirnos a esta sección de Quick Start, en la documentación de Vue, que se encuentra en Vue.js.org.
Quick Start significa inicio rápido.
Aquí tenemos un enlace llamado Playground.
Un Playground es una página a través de la cual tú puedes probar una tecnología sin tener que instalar ni configurar nada.
El Playground de Vue
Este es el Playground que nos ofrece Vue. A través de esta página, podemos escribir código y ver el resultado inmediatamente a la derecha sin necesidad de descargar ni configurar nada.
En este caso, se nos presenta un SFC.
¿Qué es un SFC?
Un SFC (Single File Component) es un componente de Vue que está definido en un solo archivo.
Un SFC consta de varias partes. En este caso, tenemos dos:
-
Etiqueta
<script>: Contiene nuestro código de JavaScript con nuestras variables. -
Etiqueta
<template>: Contiene nuestra vista, es decir, lo que se va a mostrar al usuario.
Explicación del código
En este caso, se está definiendo una variable msg con el valor "Hello World". En nuestra etiqueta <script>, lo único que estamos haciendo es:
-
export default - Un método
data()que devuelve un objeto. - Este objeto contiene una variable que representa el estado de nuestro componente.
Esto significa que este es un Single File Component, un solo archivo que representa un componente de Vue.
En la etiqueta <template>, tenemos:
- Un
<h1>que imprime, a través de la sintaxis{{ msg }}, el valor de la variablemsg. Esto se refleja en el lado derecho del Playground. - Un
<input>que está asociado a la variablemsg.
¿Cómo funciona la vinculación en Vue?
El <input> hace uso del atributo v-model, lo que significa que la variable msg está vinculada con este input.
Además, su valor se imprime en el <h1>. Esto es declarativo, lo que significa que:
- Si escribimos otro valor en el
<input>, este se asigna automáticamente amsg. - Por lo tanto, el nuevo valor se muestra también en el
<h1>.
Si entras a este enlace y haces alguna modificación, ¡ya estás usando Vue!
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Antes de empezar a crear un proyecto de Vue, vamos a dirigirnos a esta sección de Quick Start, en la documentación de Vue, que se encuentra en Vue.js.org. Quick Start significa inicio rápido. Aquí tenemos un enlace llamado Playground. Un Playground es una página a través de la cual tú puedes formar una tecnología sin tener que instalar ni configurar nada. Y este es el Playground que nos ofrece Vue. A través de esta página nosotros podemos escribir código y ver el resultado inmediatamente a la derecha sin tener que descargar ni configurar nada. En este caso se nos presenta un SFC, que es un SFC, es un single file component. Es decir, es un componente de Vue que está definido en un solo archivo, single file component. Un SFC consta de varias partes. En este caso tenemos dos. Tenemos una etiqueta script y tenemos una etiqueta template. La etiqueta script contiene nuestro código de JavaScript con nuestras variables y la etiqueta template contiene nuestra vista, que es lo que se va a mostrar el usuario. En este caso se está definiendo una variable MSG con el valor de Hello World. En nuestra etiqueta script lo único que estamos haciendo es export default. Tenemos aquí un método data que devuelve un objeto y este objeto contiene una variable. Esta variable representa el estado de nuestro componente. Este es un single file component. Es un solo archivo que representa a un componente de Vue. Y aquí en etiqueta template tenemos un h1 que imprime a través de esta sintaxis la variable MSG, que es lo que vemos aquí al lado derecho. Adicionalmente tenemos un input que está asociado a la variable MSG también. Un input, como es un texto de entrada, hace uso de este atributo Vue model. Esto significa que... la variable msg está vinculada con este input y además su valor se está imprimiendo en el h1 esto es declarativo y qué es lo que conseguimos con esto que si nosotros escribimos otra cosa el valor que asignamos sobre el input es reconocido es asignado a msg y por lo tanto se imprime aquí en el h1 si entras este enlace y haces alguna modificación ya estás usando Vue.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
02
Probar Vue rápidamente
06
08
09
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript