Phenquestions
Vue.js è una libreria così facile da imparare e accessibile. Quindi, con la conoscenza di HTML, CSS e Javascript, possiamo iniziare a creare applicazioni web in Vue.js. Vue.js è costruito combinando le migliori funzionalità di un framework angolare e reattivo già esistente.
L'associazione dei dati è una delle funzionalità più eleganti di Vue.js perché fornisce un'associazione dati reattiva/bidirezionale. In Vue.js, non dobbiamo scrivere molte righe per avere il data binding bidirezionale, a differenza di altri framework. L'associazione dati unidirezionale significa che la variabile è semplicemente legata al DOM. D'altra parte, bidirezionale significa che la variabile è anche vincolata dal DOM. Quando DOM viene modificato, anche la variabile viene modificata. Quindi, diamo un'occhiata a entrambe le associazioni di dati e vediamo la giusta differenza.
Associazione dati unidirezionale
Se vogliamo associare qualsiasi variabile, possiamo semplicemente usare Vue.la sintassi delle doppie parentesi graffe di js o la sintassi "Mustache" per associare qualsiasi variabile dalla relativa istanza del componente.
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 associare le variabili in un attributo HTML. Invece di scrivere v-bind:nome-attributo, possiamo usare solo i due punti “:” e il nome dell'attributo.
Ma queste sono solo associazioni di dati. Per dimostrare l'associazione dei dati a due vie, possiamo usare il v-model direttiva fornita dalla Vue.js.
Binding dati bidirezionale/reattivo
Per dimostrare il legame dei dati reattivo, possiamo usare il v-model direttiva su un campo del modulo di input. Emetterà internamente un evento e cambierà la variabile. A cui possiamo legarci da qualche altra parte nel modello usando le doppie 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 simultaneamente.
Avvolgendo
In questo articolo, abbiamo imparato come associare le variabili in Vue.js usando doppie parentesi graffe o la sintassi "Mustache". Abbiamo anche dimostrato il legame dati bidirezionale/reattivo in Vue.js usando la direttiva v-model. Dopo aver letto questo articolo, il data binding non è più un compito difficile per un principiante che ha appena iniziato con Vue.js. Quindi, continua ad imparare i concetti di Vue.js con linuxhint.come. Grazie!
