Clase 5 de 23 • Curso de Vue.js: Introducción y Fundamentos
Contenido del curso
José Reinaldo Duque Serna
Mariano Gastón Paduani
Juan David Herrera Ramírez
Dufainder Bedoya
Diana Martinez
Mariano Gastón Paduani
Renato Reyes Fuentes
Juan Guillermo Perez Cardozo
Cristian Diaz
Diana Martinez
Abril Darynka Tapia Sosa
Centro STEAM UCEVA
Walter Gonzalez Zuñiga
Jorge Ivan Meza
Aldo Escobar
Aldo Escobar
Aldo Escobar
Andrés Cueva
Bryan Enrique Garay Benavidez
Marco Antonio Alducin Garcia
Luis Arturo Sánchez Sánchez
La interpolación de datos hace referencia a la forma como se trabaja con variables dentro de los componentes Vue. Estas variables utilizan la sintaxis de doble corchete {{ text }}
Gracias!
Hola, quería hacer una aclaración, recuerden que los corchetes son estos [ ] y las llaves estas { }. ¡Saludos!
Lo que más se suele hacer es tener una unica instacia de Vue osea un Vue.createApp() y se crean componentes que van hacer parte de esta instacia, osea que app es como el componente padre mayor jajaja porque los componentes que hacen parte de él tambien pueden ser padres de otros componentes. Pero todos los componentes van ha estar contenidos en la instancia o componente App.
Así es, es por eso que se creo createApp, antes solo había instancias de componentes, y había que indicar cuál era el que contenía la app.
Gracias por el aporte
Interpolación de datos
La variable vm es el objeto principal que contiene toda la aplicación donde puede tener un solo componente o más.
Tenemos 2 opciones para construir para poder crear aplicaciones:
Primera opción: Tener 2 instancias separadas, para 2 elementos html
Segunda opción: Crear componentes dentro componentes, es este caso dentro del componente principal, se podría crear subcomponentes y todo estaría contenido dentro de un único div id=”app”
En este caso lo que más se suele hacer es la ++segunda opción++, de crear componentes anidados; porque todo este dentro del mismo objeto principal se va compartir un contexto de varias cosas y va facilitar el trabajo.
La ++primera opción++ es válida ya que hay proyectos que no se usan al 100% que trabajan una pequeña parte de una sección.
Template
La Sintaxis que contienen dentro de las ++dobles llaves++, podemos ingresar cualquier expresión valida de JavaScript o en este caso algo que este dentro del contexto de datos del objeto de vue.js.
También el elemento div, deja de ser considerado un simple elemento html y forma parte dentro del componente que se acaba de crear, en términos de Vue.js se conoce como “Template” del Componente.
Cuando creemos componentes mas avanzados necesitaremos un elemento html; pero no siempre necesitaremos estar agregando directamente sobre el elemento html el ++Template++; sino que dentro del mismo objeto de configuración de las opciones vue.js se podrá agregar ++Templates++ para que se rendericen de la forma correcta y estén todos separados y reutilizables.
gracias por el resumen. grandioso apunte
Ahora que lo pienso ¿Es necesario tener que agregar un elemento HTML para agregar la aplicación? ¿No sería lo mismo que en lugar de usar ("#app") simplemente agregar la aplicación en el tag de body? Es que nunca he entendido por qué tomamos como convención tener que agregar toda la app creada con un framework dentro de un elemento aparte y no en el body...
En realidad se podría, creo que es algo que quedó de cuándo Vue se usaba más cómo un JQuery, jeje.
Intente usarlo con el body, si bien no me marco errores y no se rompio lo que llevamos hasta el momento, si me sato los siguientes warnings
Lastimosamente el curso esta desactualizado y ya ha cambiado mucho la forma en la que se opera Vue... Esto dificulta seguir estas clases...
es insufrible, habla y habla y habla y no es facil de seguir conceptos tras conceptos.
Me gustaría que el curso se actualizara a Composition API.
Para los que ya saben sobre git se pueden traer el repo para ir revisando el código de las clases y no distraerse copiando el código.
git clone
cd introduccion-vue
for branch in `git branch -r | grep -v '\->'`; do
git branch --track "${branch#origin/}" "$branch"
done
Y listo, ya tienen el repo con todos los branches, cada branch es la clase.
Para cambiar a otro branch sería con git checkout <branch-name>
Ojo que el útlimo comando va junto desde el for hasta el done
También para cambiar de branch pueden usar el botón inferior izquierdo en VSCODE
profe una consulta, en vue siempre se trabaja dentro de la etiqueta de script, como si usaramos una function de javascript
esta man si que explica feo
Si claro, lo que entiendo es que, a diferencia de ReactJS o de NextJS, la forma en que se interpolarizan las variables que obtengamos del modelo para mostrarlos en la vista, siguen siendo estados, pero a la hora de colocarlos en el componente (en este caso en el elemento DIV) se le colocan 2 {{}} a diferencia de React o Next que se declaran con solo 1 {}. Esta clarísimo.
La interpolación de datos nos permite trabajar con datos dentro de componentes de nuestra pagina.
Les comparto el siguiente ejemplo
JavaScript:
const app = Vue.createApp({ data() { return { title: "Curso de desarrollo web 💻📱", description: "En este curso aprenderás a desarrollar aplicaciones web con Vue 3 desde cero a nivel profesional.", }; }, methods: { showTitle() { return this.title; }, showDescription() { return this.description; }, changeTitle() { this.title = "Curso de desarrollo Web con Vue 3 💻📱"; }, // creamos el metodo para mandar a imprimir el contenido a la pagina }, }); app.mount("#app1"); ```HTML: ```js <section id="app1"> <div class="container"> <h2>{{ showTitle() }}</h2> <p>{{ showDescription() }}</p> <button @click="changeTitle">Push button 👈</button> </div> </section>
