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 }}
Introducción
¿Qué es Vue.js?
Fundamentos de componentes
Configuración del entorno
Primer contacto
Renderizado declarativo
Interpolación de datos
Interpolación de datos 2
Atributos reactivos
Input de usuario
Eventos de usuario
Inputs reactivos
Reactividad
Propiedades computadas
Watchers
Estilos reactivos
Listas y condicionales
Condicionales
Listas
Componentes personalizados
Componentes
Slots
Comunicación entre componentes
Comunicación de componente padre a hijo
Comunicación de componente hijo a padre
Custom v-model
Comunicación con componentes profundos
Componentes en el Virtual DOM
Instancias de componentes
Cierre del curso
Vue progresivo
Esto es solo el comienzo
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Interpolación de datos
5/23Recursos
Aportes 10
Preguntas 1
Ordenar por:
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.
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.
El CDN de vue junto con la options Api, es la mejor manera de iniciar a entender los conceptos de Vue. Ademas, asi tambien puedes probar Vue en un proyecto ya existente.
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:
```js
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">
</section>
```
{{ showTitle() }}
{{ showDescription() }}
<button @click="changeTitle">Push button 👈</button>
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 `[`https://github.com/platzi/introduccion-vue.git`](https://github.com/platzi/introduccion-vue.git)
`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>`
profe una consulta, en vue siempre se trabaja dentro de la etiqueta de script, como si usaramos una function de javascript
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?