Probar Vue rápidamente

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.