Estoy aprendiendo Vue con un curso en línea y el instructor me dio un ejercicio para hacer un texto de entrada con un valor predeterminado. Lo completé usando v-model pero el instructor eligió v-bind:value y no entiendo por qué.
¿Alguien puede darme una explicación simple sobre la diferencia entre estos dos y cuándo es mejor usar cada uno?
Desde aquí - Recuerda:
<input v-model="something">es esencialmente lo mismo que:
<input v-bind:value="something" v-on:input="something = $event.target.value" >o (sintaxis abreviada):
<input :value="something" @input="something = $event.target.value" > Entonces v-model es un enlace bidireccional para entradas de formulario . Combina v-bind , que trae un valor js al marcado y v-on:input para actualizar el valor js . El valor js debe estar presente en sus data o en una inject .
Utilice v-model cuando pueda. Use v-bind / v-on cuando deba hacerlo :-) Espero que su respuesta haya sido aceptada.
v-model funciona con todos los tipos de entrada HTML básicos (texto, área de texto, número, radio, casilla de verificación, selección). Puede usar v-model con input type=date si su modelo almacena fechas como cadenas ISO (yyyy-mm-dd). Si desea utilizar objetos de fecha en su modelo (una buena idea tan pronto como vaya a manipularlos o formatearlos), haga esto .
v-model tiene algunos conocimientos adicionales que es bueno tener en cuenta. Si está utilizando un IME (muchos teclados móviles o chino/japonés/coreano), v-model no se actualizará hasta que se complete una palabra (se ingresa un espacio o el usuario abandona el campo). v-input se disparará con mucha más frecuencia.
v-model también tiene modificadores .lazy , .trim , .number , cubiertos en el documento .
En palabras simples, v-model es para enlaces bidireccionales : si cambia el valor de entrada, los datos enlazados se cambiarán y viceversa .
pero v-bind:value se denomina enlace unidireccional, lo que significa que puede cambiar el valor de entrada cambiando los datos enlazados, pero no puede cambiar los datos enlazados cambiando el valor de entrada a través del elemento .
mira este ejemplo simple: https://jsfiddle.net/gs0kphvc/
modelo v
es un enlace de datos bidireccional, se usa para enlazar el elemento de entrada html cuando cambia el valor de entrada, luego se cambiarán los datos delimitados.
v-model se usa solo para elementos de entrada HTML
ex: <input type="text" v-model="name" > unión en v
es un enlace de datos unidireccional, significa que solo puede enlazar datos al elemento de entrada pero no puede cambiar el elemento de entrada de cambio de datos limitados. v-bind se usa para vincular el atributo html
ex:
<input type="text" v-bind:class="abc" v-bind:value="">
<a v-bind:href="home/abc" > click me </a>