Manejo de formularios con Vue.js

Clase 7 de 17 • Curso Básico de Vue.js 2016

Resumen

En este vídeo vamos a combinar filtros y manejo de eventos para crear una interacción de usuario a través de un formulario en un sitio web.

Jose Andres Gonzalez Guevara

student•

Me está gustando Vue.js

Mario Menjívar

student•

Es más interesante que Angular.

Japheth Calzada López

student•

yo andaba buscando jquery y cai aqui jaja

Jhoysner Corona

student•

v-on:click = Evento
v-on:click.prevent = Evento + modificador
algunos modificadores :

.stop
.prevent
.capture
.self
.once
.passive

Camilo Castro

student•

Justo lo que necesitaba, gracias por el aporte.

Benjamín Parra

student•

excelente, muchas gracias

Alan Lapierre

student•

El V-MODEL lo que permite hacer un BINDING bidireccional. Es decir, si cambio el modelo se cambia la vista...y si cambio la vista, se cambia el modelo.

Carlos Eduardo López Pérez

student•

El curso no es HTML pero igual pueden meter el checkout dentro de la etiqueta label, asi ya no tendrian que poner in id al checkbox ni un for al label:

<label>
	<input type="checkbox" id="vue" value="vue"> Vue.js
</label>

Francisco Javier Rodriguez Gomez

student•

Buen aporte, sí es pertinente, gracias

Francisco Peñalo Feliz

student•

v-model es un enlace de doble via o two-way binding para los elementos Inputs de un formulario.

Este combina v-bind, el cual asigna el valor de una propiedad del objeto Vue a la propiedad value del Input y v-on:input que actualiza una propiedad del objeto Vue con el valor de la propiedad value del Input.

Ejemplo de esta clase:

<input type="text" v-model="nombre">

Es una syntactic sugar para escribir:

<input type="text" v-bind:value="nombre" v-on:input="nombre = $event.target.value">

O los mismo que escribir:

<input type="text" :value="nombre" @input="nombre = $event.target.value">

Eduardo David

student•

Gracias por el aporte¡¡¡¡

Misael Cureño

student•

:O es genial Vue <3

Omar Gavidia

student•

Acabo de descubrir Vue.js y estoy gratamente sorprendido, usandolo con el controller de Laravel, se hace muy versatil y amigable.

Melina Jacqueline onoriaga

student•

Que buena info!! muchas gracias!

Caleb Ismael François

student•

Me esta gustando VUE

ALEXANDER VASQUEZ MENDOZA

student•

Excelente clase

Andre Rivera

student•

diferencia entre boton <input type="button"> y <button type="submit">?

C. Daniel Sanchez R.

teacher•

En HTML por defecto, al hacerle clic a un botón de tipo submit que esté dentro de un <form>, se va a tratar de enviar (por eso hubo que usar el .prevent).
De todas maneras, hay ventajas en usar este tipo de botón submit, como por ejemplo, si los inputs tienen validaciones (como un required o un max o min), el botón de tipo submit va a checkear esas validaciones antes de tratar de ejecutar la acción del formulario.

David Daniel Castillo Nava

student•

Mi código hasta esta clase

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		<h1>{{ titulo | uppercase }}</h1>
		<h2>{{ subtitulo | lowercase }}</h2>
		<h3>{{ legend | capitalize }}</h3>
		<button @click="sumar" >sumar</button>
		<button @click="restar" >restar</button>
		<div>El contadore esta en {{contador}}</div>
		<!-- @keyup.enter="submit" :value="nombre" --> 
		<input v-model="nombre" type="text" name="nombre" placeholder="Ingresa tu nombre" />
		<p>Tu nombre en mayuscula es: {{ nombre | uppercase }}</p>
		<!-- <a v-if="mostrar" :href="url" target="_blank">Ir a {{ pagina }}</a> -->
		<form @submit.prevent="submit" action="">
			<h2>¿Cuales son tus cursos favoritos?</h2>
			<input v-model="cursos" type="checkbox" id="vue" value="vue" />
			<label for="vue">Curso de Vue.js</label>
			<input v-model="cursos" type="checkbox" id="react" value="react" />
			<label for="react">Curso de Reack.js</label>
			<input v-model="cursos" type="checkbox" id="seo" value="seo" />
			<label for="seo">Curso de SEO</label>
			<input v-model="cursos" type="checkbox" id="marketing" value="marketing" />
			<label for="marketing">Curso de Growth Marketing</label>
			<button type="submit">Enviar</button>
		</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data () {
				return {
					titulo: 'Estas viendo Platzi',
					subtitulo: 'Estas viendo el curso de Vue.js',
					legend: 'Esto esta en capitalize',
					nombre: '',
					contador: 0,
					cursos: []
				}
			},
			methods: {
				sumar (event) {
					this.contador++
				},
				restar (event) {
					this.contador--
				},
				submit (event) {
					console.log(this.cursos)
				}
			},
			filters: {
				uppercase: (str) => str.toUpperCase(),
				lowercase: (str) => str.toLowerCase(),
        		capitalize: (str) => str.replace(/\b\w/g, str => str.toUpperCase())
			}
		})
	</script>
</body>
</html>

Marcelo Contreras

student•

es una librería muy interesante , de hecho la utilice sin saber lo potente que era en un proyecto que ya estaba implementado con jquery. Por eso decidí aprender mas de ella.
Muy buen curso

Pregunta, es posible usar algún plugin de Jquery con Vue? o al trabajar con un DOM virtual no se pueden comunicar?

Rony Porraz Vargas

student•

yo conecte jQuery con vue pero aun no consigo que funcione

Camilo Castro

student•

Hola, ¿hay news?, díganme que si les funcionó, quería intentar lo mismo.

Manuel Cedeño

student•

hasta es punto, vue.js me a interesado bastante

Javier Leal Jose Hurtado

student•

Para que react si esta vue?? creo que la ventaja es realmente evidente en cuanto a performance y escalabilidad. Muchos se pueden adaptar fácilmente.

Christian David Sánchez

student•

Que simplicidad la de Vue Js <3

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>```

Luis Enrique Hernandez Navarro

student•

cuál es la diferencia entre methods y computed?

Ángel J Cachón de Elías

student•

Cuando uso un evento change en un campo de texto, ¿por qué sólo se dispara el evento cuando cambio el foco del campo y no conforme voy escribiendo teclas?

Gracias, un saludo

Manuel Ojeda

student•

Para ejecutar una función de esa manera es con v-on:change o @change

Por ejemplo:

<input type="text" v-model="tu_model" @change="miFunc()" />

Cesar Zavala Varon

student•

Porque v-on:change es un evento de Javascript el cual es desencadenado cuando un elemento ha finalizado su cambio. Para inputs, esto significa que el evento ocurre cuando el elemento pierde su focus.

Fuente: https://javascript.info/events-change-input

Si deseas un comportamiento similar puedes usar un lazy

Ejemplo:

<input type="text" v-model.lazy="variable">

Si deseas llamar metodos dependiendo del valor de la variable, te recomiendo usar un watcher.

Espero poder haberte ayudado.

Leonardo Ordoñez Ordoñez Lozano

student•

Se le mucho potencial a VUE , yo trabajo con fotos y renders en 360° y le veo mucho futuro

Jorge Ramos

student•

Hola, Vue debe aplicarse solo a SPA?

David Toca

student•

No necesariamente, aunque si es un uso muy comun, tambien se usa mucho en conjunto con laravel (que no necesariamente son SPA)

Jorge Ramos

student•

thanks.!

Gerardo Ruiz

student•

v-model es solo para el atributo value de los inputs?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id="app">
		<h1>{{ titulo | uppercase }}</h1>
		<h2>{{ subtitulo | lowercase }}</h2>
		<h3>{{ legend | capitalize }}</h3>
		<button @click="sumar" >sumar</button>
		<button @click="restar" >restar</button>
		<div>El contadore esta en {{contador}}</div>
		<!-- @keyup.enter="submit" :value="nombre" --> 
		<input v-model="nombre" type="text" name="nombre" placeholder="Ingresa tu nombre" />
		<p>Tu nombre en mayuscula es: {{ nombre | uppercase }}</p>
		<!-- <a v-if="mostrar" :href="url" target="_blank">Ir a {{ pagina }}</a> -->
		<form @submit.prevent="submit" action="">
			<h2>¿Cuales son tus cursos favoritos?</h2>
			<input v-model="cursos" type="checkbox" id="vue" value="vue" />
			<label for="vue">Curso de Vue.js</label>
			<input v-model="cursos" type="checkbox" id="react" value="react" />
			<label for="react">Curso de Reack.js</label>
			<input v-model="cursos" type="checkbox" id="seo" value="seo" />
			<label for="seo">Curso de SEO</label>
			<input v-model="cursos" type="checkbox" id="marketing" value="marketing" />
			<label for="marketing">Curso de Growth Marketing</label>
			<button type="submit">Enviar</button>
		</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data () {
				return {
					titulo: 'Estas viendo Platzi',
					subtitulo: 'Estas viendo el curso de Vue.js',
					legend: 'Esto esta en capitalize',
					nombre: '',
					contador: 0,
					cursos: []
				}
			},
			methods: {
				sumar (event) {
					this.contador++
				},
				restar (event) {
					this.contador--
				},
				submit (event) {
					console.log(this.cursos)
				}
			},
			filters: {
				uppercase: (str) => str.toUpperCase(),
				lowercase: (str) => str.toLowerCase(),
        		capitalize: (str) => str.replace(/\b\w/g, str => str.toUpperCase())
			}
		})
	</script>
</body>
</html>

Manejo de formularios con Vue.js

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?