Vue.enlace de datos JS

Vue.JS es una biblioteca tan fácil de aprender y accesible. Entonces, con el conocimiento de HTML, CSS y JavaScript, podemos comenzar a construir aplicaciones web en Vue.js. Vue.JS se construye combinando las mejores características a partir de los marcos angulares y reactos ya existentes.

La unión de datos es una de las características más elegantes de Vue.JS porque proporciona un enlace de datos reactivo/bidireccional. En vue.JS, no tenemos que escribir muchas líneas para tener datos de dos vías, a diferencia de otros marcos. El enlace de datos unidireccional significa que la variable está unida al DOM. Por otro lado, dos vías significa que la variable también está vinculada al DOM. Cuando DOM cambia, la variable también se cambia. Entonces, echemos un vistazo a ambos enlaces de datos y veamos la diferencia correcta.

Enlace de datos unidireccional

Si queremos unir cualquier variable, simplemente podemos usar Vue.La sintaxis de tirantes dobles de JS o la sintaxis de "bigote" para unir cualquier variable de la instancia de componente relativo.

LinuxHintText

O, si queremos unir cualquier variable dentro de un atributo HTML, podemos usar el unión a V directiva.

Vue.JS también proporciona la taquigrafía para las variables de unión en un atributo HTML. En lugar de escribir V-Bind: nombre de atributo, Solo podemos usar un colon ":" y el nombre del atributo.

Pero estos son solo enlaces de datos. Para demostrar el enlace de datos de dos vías, podemos usar el modelo V Directiva proporcionada por el Vue.js.

Enlace de datos bidireccional/reactivo

Para demostrar la unión de datos reactivos, podemos usar el modelo V Directiva en un campo de formulario de entrada. Emitirá internamente un evento y cambiará la variable. A lo que podemos unir en otro lugar en la plantilla usando aparatos ortopédicos dobles o sintaxis de "bigote".

Estás escribiendo: linuxhintText

Ahora, cada vez que ingresamos a un personaje en el campo Formulario de entrada, podemos ver que la variable también se está actualizando simultáneamente.

Terminando

En este artículo, hemos aprendido a unir variables en Vue.JS usando aparatos ortopédicos dobles o sintaxis de "bigote". También hemos demostrado la unión de datos dos vías/reactivas en Vue.JS usando la directiva V-Modelo. Después de leer este artículo, el enlace de datos ya no es una tarea difícil para un principiante que acaba de comenzar con Vue.js. Entonces, sigue aprendiendo los conceptos de Vue.JS con Linuxhint.comunicarse. Gracias!