Atributos -> :
Eventos -> @
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,
Iniciar sesión
Inputs reactivos
9/23Recursos
Aportes 21
Preguntas 1
Ordenar por:
Me gusta cuando saltan errores en los cursos, la solución de estos hace parte de nuestra labor día a día y no todo puede salir perfecto
en efecto en mi poco tiempo de programación aprendo más cuando hay errores que cuando todo me ejecuta correctamente a la primera. asi que espero ver más errores!!!
Puede usar la directiva v-model para crear bindings de datos bidireccionales (two-way binding) en elementos input, textarea y select de un formulario.
v-model es esencialmente syntax sugar para actualización de datos a través de eventos de entradas del usuario,
Un golazo el v-model. Le quedaría bueno al mundo React algo así 😃
Me gusta como la profe explica, se vuelve la clase muy amena y entendible
Profe, en verdad lo que más apreciamos es tu gran habilidad para comunicar de forma práctica y efectiva los contenidos vistos. ¡Muchas gracias!
La profesora explica muy bien, me esta gustando mucho este curso
Para mantener sincronizada la vista con el modelo se asigna el value de target a la variable correspondiente. Ej: this.text = e.target.value; donde e se refiere a la instancia del evento.
v-on y v-bind suelen aplicarse juntos por lo que para simplificar aún más el código tenemos la directiva v-model (ej: <input v-model=“text” />). No se necesitan métodos del tipo event handler para mantener sincronizado el estado del componente con el modelo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="Description" content="Extended Description">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Inputs reactivos</title>
<link rel="stylesheet" href="">
<style>
</style>
</head>
<body>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app"></div>
<script>
const vm = Vue.createApp({
data() {
return {
text: 'Hola Vue',
text2: 'Hola Vue',
text3: 'Hola Vue',
};
},
methods: {
input(e) {
// Indiretamente modifico el valor de p en el html
this.text = e.target.value;
},
input2(e) {
// Indiretamente modifico el valor de p en el html
this.text2 = e.target.value;
},
},
// v-on:change detecta el evento al cambiar el texto
// v-on:input detecta el evento al al cambiar el texto en tiempo real
// Se puede resumir:
// v-on:event="funct" --> @event="funct"
// v-bind:attr="var-value" --> :attr="var-value"
// v-model="var-react" nos da reactividad entre componentes
template: `
<p>{{ text }}{{ text2 }}{{ text3 }}</script>
</body>
</html>
Mi aporte
<body>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
<h1>{{count}}</h1>
<button @click="incrementar">Incrementar</button>
<button @click="disminuir">Disminuir</button>
<div>
<h2>{{text}}</h2>
<input v-model="text">
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
count: 0,
text: 'Hola vue!!'
}
},
methods: {
incrementar(){
this.count++;
},
disminuir(){
this.count--;
},
input(e){
this.text = e.target.value
}
},
}).mount('#app')
//console.log(vm);
</script>
</body>
Yo hice un pequeño enjemplo en el que combine el contador de la clase pasada y el input reactivo de esta, es algo simple, pero bueno.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app"></div>
<script>
const vm = Vue.createApp({
data() {
return {
number: "1"
};
},
methods:{
increment(){
this.number++;
},
decrement(){
this.number--;
}
},
template: `
<p>{{ number }}</script>
</body>
</html>
Like si te diste cuenta que estabas caminando descalzo con JS Vanilla jajaja
Chulada de v-model
Una calculadora sencilla :
Este mismo ejemplo se hace en la clase de manipulación del DOM y la diferencia en simplificación y fácilidad es increíble
Mis apuntes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app"></div>
<script>
const vm = Vue.createApp({
data() {
return {
text: "Hello Vue",
};
},
/* methods: {
input(event) {
console.log(event.target.value);
this.text = event.target.value;
},
}, */
// template: `
// <p>{{ text }}{{ text }}{{ text }}</script>
</body>
</html>
Asi resolvi el reto anterior
<div id="app">
<p>{{ counter }}</p>
<button type="submit" v-on:click="counter++">Incrementar</button>
<button type="submit" v-on:click="counter--">Decrementar</button>
</div>
Para poner en práctica lo aprendido hice uso del two-way-data binding y utilicé un metodo para hacer un alert de lo escrito.
ejemplo de las dos formas
const vm = Vue.createApp({
data() {
return {
text: "Hello Vue",
text2: "texto dos",
};
},
methods: {
input(e) {
this.text = e.target.value;
},
},
template: `
<p>{{text}}</p>
<input type="text" @input="input" :value="text"/>
<input type="text" v-model="text2"/>
<p>{{text2}}</p>
`,
}).mount("#app");
excelente clase
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.