Vue.Binding dei dati JS

Vue.JS è una biblioteca così facile da imparare e accessibile. Quindi, con la conoscenza di HTML, CSS e JavaScript, possiamo iniziare a costruire applicazioni Web in VUE.js. Vue.JS è costruito combinando le migliori caratteristiche di un framework angolari e react già esistenti.

L'associazione dei dati è una delle caratteristiche più eleganti di Vue.js perché fornisce legame reattivo/bidirezionale. In vue.JS, non dobbiamo scrivere molte righe per avere un legame a due vie, a differenza di altri quadri. L'associazione dei dati a senso unico significa che la variabile è appena legata al DOM. D'altra parte, a due vie significa che la variabile è anche legata dal DOM. Quando DOM viene modificato, anche la variabile viene cambiata. Quindi, diamo un'occhiata a entrambi i legami dati e vediamo la differenza giusta.

Binding di dati a senso unico

Se vogliamo legare qualsiasi variabile, possiamo semplicemente usare Vue.La sintassi delle parentesi graffe del doppio riccio di JS o la sintassi "baffi" per legare qualsiasi variabile dall'istanza del componente relativo.

LinuxHintText

Oppure, se vogliamo associare qualsiasi variabile all'interno di un attributo HTML, possiamo usare il V-Bind direttiva.

Vue.JS fornisce anche la scorciatoia per le variabili di legame in un attributo HTML. Invece di scrivere V-Bind: attributo-nome, Possiamo usare solo un colon ":" e un nome di attributo.

Ma questi sono solo legami dati. Per dimostrare l'associazione dei dati a due vie, possiamo usare il V-Model Direttiva fornita dalla Vue.js.

Binding a due vie/reattivi

Al fine di dimostrare l'associazione dei dati reattivi, possiamo usare il V-Model Direttiva su un campo del modulo di input. Emetterà internamente un evento e cambierà la variabile. A cui possiamo legare da qualche altra parte nel modello usando le parentesi graffe o la sintassi "baffi".

Stai digitando: LinuxHintText

Ora, ogni volta che inseriamo un carattere nel campo del modulo di input, possiamo vedere che anche la variabile si aggiorna contemporaneamente.

Avvolgendo

In questo articolo, abbiamo imparato a legare le variabili in Vue.JS usando le parentesi graffe doppie o la sintassi "baffi". Abbiamo anche dimostrato il legame con i dati a due vie/reattivi in ​​VUE.JS che utilizza la direttiva a V-Model. Dopo aver letto questo articolo, l'associazione dei dati non è più un compito difficile per un principiante che ha appena iniziato con Vue.js. Quindi, continua a imparare i concetti di Vue.JS con Linuxhint.com. Grazie!