Ecco cosa devi sapere sull'associazione dati in Vue

L'associazione dei dati nelle app Web crea un collegamento tra l'istanza dell'app e l'interfaccia utente (interfaccia utente). L'istanza dell'app gestisce dati, comportamento e componenti, mentre l'interfaccia utente rappresenta l'aspetto visivo con cui gli utenti interagiscono. I dati di associazione consentono di creare app Web dinamiche.

Qui esplorerai vari attacchi in Vue, inclusi attacchi unidirezionali e bidirezionali. Imparerai anche a implementare queste associazioni con modelli e direttive mustache come v-bind e v-model.

Interpolazione in Vue

L'interpolazione è uno dei tipi più popolari di data binding di Vue. L'interpolazione consente di visualizzare i valori dei dati nei tag HTML (Hyper Text Markup Language) con il modello baffi, comunemente indicato con doppie parentesi graffe ({{ }}).

Con il modello mustache, puoi integrare il contenuto dinamico dell'app come dati e proprietà del metodo nel tuo codice HTML. È possibile ottenere ciò racchiudendo i nomi delle proprietà dei dati o dei metodi dal file

opzioni oggetto in Vue tra queste parentesi graffe.

Ecco un'istanza di un'app Vue che utilizza il modello baffi per ottenere l'interpolazione in Vue:

<corpo>
<divid="app">
<h1>{{titolo}}h1>
<P>{{ text.toUpperCase() }}P>
div>
<copione>
 const app = Vue.createApp({
 dati() {
 ritorno {
 titolo: "Benvenuto",
 testo: "Questo è il tuo mondo?",
 };
 },
 });
 app.mount("#app");
copione>
corpo>

Il blocco di codice precedente utilizza il modello mustache per visualizzare il valore della proprietà title nell'oggetto dati dell'app Vue. È inoltre possibile visualizzare i risultati delle espressioni JavaScript con l'interpolazione. Ad esempio, il {{text.toUpperCase()}} espressione nel P tag visualizza la versione maiuscola del valore del testo, come mostrato nell'immagine seguente:

Quando monti un'app Vue, Vue valuta le espressioni nei modelli ed esegue il rendering dei valori risultanti nel corpo HTML. Eventuali modifiche alle proprietà dei dati aggiornano i valori corrispondenti nell'interfaccia utente.

Per esempio:

<copione>
 const app = Vue.createApp({
 dati() {
 ritorno {
 titolo: "Ciao",
 testo: "Questo è il tuo mondo?",
 };
 },
 });
 app.mount("#app");
copione>

Il blocco di codice precedente modifica la proprietà del titolo in "Ciao". Questa modifica si rifletterà automaticamente nell'interfaccia utente poiché l'app Vue associa la proprietà del titolo all'elemento dell'interfaccia utente, come mostrato di seguito:

L'interpolazione restituisce i dati solo quando le doppie parentesi graffe si trovano tra i tag HTML di apertura e di chiusura.

Associazione dati unidirezionale con la direttiva v-bind

Analogamente all'interpolazione, il data binding unidirezionale collega l'istanza dell'app all'interfaccia utente. La differenza è che lega proprietà come dati e metodi agli attributi HTML.

L'associazione dati unidirezionale supporta il flusso unidirezionale dei dati, impedendo agli utenti di apportare modifiche che influiscono sulle proprietà dei dati nell'istanza dell'app. Ciò è utile quando si desidera visualizzare i dati all'utente dell'app ma impedire all'utente di modificarli.

È possibile ottenere l'associazione dati unidirezionale in Vue con il v-bind direttiva o il suo carattere abbreviato (:):

 la direttiva v-bind 
<ingressotipo="testo"v-bind: valore="testo">
 il: carattere abbreviato 
<ingressotipo="testo":valore="testo">

Il blocco di codice mostra l'utilizzo della direttiva v-bind e la sua scorciatoia per associare il valore del tag HTML di input a una proprietà di dati di testo. Ecco un esempio di un'app Vue che utilizza il v-bind direttiva per ottenere il data binding unidirezionale:

<corpo>
<divid="app">
<ingressotipo="testo"v-bind: valore="testo">
<P>{{ testo }}P>
div>
<copione>
 const app = Vue.createApp({
 dati() {
 ritorno {
 testo: 'Vue è fantastico!'
 }
 }
 })
 app.mount('#app')
copione>
corpo>

Sopra, un campo di input e un elemento di paragrafo visualizzano il valore di testo proprietà. IL valore attributo del campo di input è associato alla proprietà text utilizzando il v-bind direttiva.

Questo blocco di codice crea un'associazione unidirezionale, in cui le modifiche al file testo proprietà aggiornerà il valore del campo di input, ma le modifiche apportate nel campo di input non aggiorneranno il testo property nell'istanza dell'app Vue.

Per dimostrarlo, possiamo iniziare con il valore iniziale di testo proprietà, "Vue è fantastico!”:

Dopo aver modificato il valore del campo di input in "Ciao mondo!", nota che l'app Vue non è stata aggiornata e il testo nel tag del paragrafo è rimasto lo stesso:

Tuttavia, quando cambiamo il valore di testo proprietà a Ciao mondo! nell'istanza dell'app Vue anziché dal campo di input, il campo di input viene aggiornato per riflettere il nuovo valore:

Questo modo di associare i dati è utile negli scenari in cui si desidera visualizzare i dati all'utente ma impedire all'utente di modificarli direttamente. Sfruttando v-bind in Vue.js, puoi stabilire un'associazione unidirezionale, collegando facilmente i dati della tua app agli elementi dell'interfaccia utente.

Data binding bidirezionale con la direttiva v-model

Il data binding bidirezionale consente di riflettere automaticamente le modifiche al valore di un elemento dell'interfaccia utente nel modello di dati sottostante e viceversa. La maggior parte front-end Framework JavaScript Piace Angolare utilizza la rilegatura a due vie per condividere dati e gestire eventi in tempo reale.

Vue.js rende possibile l'associazione bidirezionale con il modello v direttiva. IL modello v La direttiva crea un'associazione dati bidirezionale tra un elemento di input del modulo e una proprietà dei dati. Quando digiti in un elemento di input, il valore viene aggiornato automaticamente nella proprietà data e qualsiasi modifica alla proprietà data aggiornerà anche l'elemento di input.

Ecco un esempio di un'app Vue che utilizza il modello v direttiva per ottenere il data binding bidirezionale:

<Testa>
<titolo>Data binding bidirezionale in Vuetitolo>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<divid="app">
<ingressotipo="testo"modello v="testo">
<P>{{ testo }}P>
div>
<copione>
 const app = Vue.createApp({
 dati() {
 ritorno {
 testo: 'Vue è fantastico!'
 }
 }
 })
 app.mount('#app')
copione>
corpo>

Il blocco di codice sopra ha un elemento di input con il modello v direttiva che lo vincola al testo proprietà dei dati. IL testo proprietà è inizialmente impostata su "Vue è fantastico!".

Il campo di input aggiorna la proprietà del testo quando digiti al suo interno e riflette le modifiche alla proprietà del testo nel file P etichetta. Vue.js utilizza la direttiva v-model e l'elemento input per ottenere l'associazione dati bidirezionale.

Mentre v-bind consente la comunicazione unidirezionale dall'app Vue all'interfaccia utente, v-model fornisce la comunicazione bidirezionale tra l'app Vue e l'interfaccia utente. Grazie alla sua capacità di abilitare la comunicazione bidirezionale, modello v viene spesso utilizzato quando si lavora con gli elementi del modulo in Vue.

Amplia la tua esperienza nella creazione di app Vue

Hai imparato a conoscere il data binding in Vue, inclusa l'interpolazione e le direttive v-bind e v-model. Queste associazioni di dati sono essenziali, in quanto fungono da base per le app Vue.

Vue ha molte altre direttive per i casi d'uso, come il rendering di elenchi, l'associazione di eventi e il rendering condizionale. Comprendere le direttive Vue ti aiuta a creare un front-end dinamico e interattivo per le tue applicazioni web.