Vue Academy · Lezione

v-model: interni del two-way binding

v-model viene compilato in :modelValue + @update:modelValue, nomi personalizzati per v-model, v-model sui componenti

v-model: interni del two-way binding è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è davvero v-model

v-model sembra un binding bidirezionale magico, ma in realtà è solo una scorciatoia per un binding del valore combinato con un listener di eventi. Capire in cosa si espande consente di usarlo sia sugli input sia sui componenti personalizzati.

v-model su un input di testo

Su un input nativo, v-model associa il valore e ascolta gli eventi input. Queste due righe sono equivalenti.

<!-- shorthand -->
<input v-model="text" />

<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />

Due elementi: associare e ascoltare

:value trasferisce lo stato all'elemento; @input trasferisce le modifiche dell'utente allo stato. Insieme creano l'effetto bidirezionale.

v-model sui componenti è diverso

Su un componente personalizzato, v-model usa una prop e un evento diversi: modelValue e update:modelValue. value/input nativi si usano solo con gli elementi nativi.

<!-- on a component -->
<MyInput v-model="text" />

<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />

Implementare v-model in un componente figlio

Per supportare v-model, un componente figlio dichiara una prop modelValue ed emette update:modelValue quando il valore deve cambiare.

<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>

Il template del componente figlio

Il componente figlio collega la prop in ingresso all'input ed emette un evento al cambiamento. Il componente padre non deve conoscere i dettagli interni.

<template>
  <input :value="modelValue" @input="onInput" />
</template>

Argomenti denominati di v-model

Può usare il nome del modello per rivolgersi a una prop specifica: v-model:title usa la prop title e l'evento update:title.

<!-- parent -->
<MyDialog v-model:title="pageTitle" />

<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />

Dichiarare un modello denominato nel componente figlio

Il componente figlio dichiara semplicemente una prop e l'evento corrispondente con quel nome.

<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>

Più v-model su un componente

Poiché ogni modello ha un nome proprio, è possibile associarne diversi contemporaneamente. Un componente per un modulo utente potrebbe esporre contemporaneamente v-model:first e v-model:last.

<UserName
  v-model:first="firstName"
  v-model:last="lastName"
/>

Perché questo approccio è potente

Poiché v-model non è altro che una combinazione di prop ed eventi, per chi li utilizza i componenti personalizzati si comportano esattamente come gli input nativi. Più modelli denominati permettono a un componente di gestire in modo ordinato diversi binding bidirezionali.

Errore comune

Non modifichi direttamente la prop modelValue all'interno del componente figlio: questo interrompe il flusso unidirezionale delle prop. Emetta sempre l'evento di aggiornamento e lasci che sia il componente padre a gestire lo stato.

Verifica rapida

Metta alla prova le Sue conoscenze sul funzionamento interno di v-model.

Riepilogo

Ha scoperto come funziona v-model:

Sugli input si espande in :value + @input.
Sui componenti usa modelValue + update:modelValue.
I modelli denominati (v-model:title) si rivolgono a prop ed eventi specifici.
È possibile usare più v-model su un singolo componente.

Domande Frequenti

La lezione «v-model: interni del two-way binding» è gratuita?

Sì — il testo completo di «v-model: interni del two-way binding» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «v-model: interni del two-way binding»?

v-model viene compilato in :modelValue + @update:modelValue, nomi personalizzati per v-model, v-model sui componenti Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «v-model: interni del two-way binding»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy