A diferença entre v-model e v-bind: valor em Vue e implementação manual de v-model

A seguir estão exemplos de entrada:

1. A diferença entre v-model e v-bind: valor em Vue

1. modelo v

//html
<div>
   <input type="text" v-model="message" />
   <div>{
   
   {message}}</div>
</div>

//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
}

Quando os dados na caixa de entrada são modificados, a mensagem nos dados também muda, então "123456" é exibido para cima e para baixo

2. v-bind: valor

//html
<div>
   <input type="text" v-bind:value="message" />
   <div>{
   
   {message}}</div>
</div>

//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
}

Pode-se ver que quando o valor na caixa de entrada é modificado, a mensagem nos dados não foi alterada, então o "123" original ainda é exibido em {{mensagem}}

resumo:

(1) O modelo v realiza a ligação bidirecional de dados na visualização e nos dados. Uma das duas muda e a outra também muda de acordo.

(2) v-bind: o valor vincula apenas os dados nos dados à entrada durante a inicialização. Modificar o valor da entrada não mudará os dados nos dados.

2. Implementar manualmente o modelo v (v-bind: valor + evento)

Nota: Tanto a mudança de entrada quanto os eventos de entrada podem ser implementados. A diferença é que a entrada é acionada em tempo real, enquanto a mudança é acionada quando o foco é perdido ou quando você pressiona Enter.

(Na verdade, por padrão, o valor e os dados da caixa de entrada são sincronizados v-model no inputevento, mas você pode adicionar um modificador lazy para alterar a change sincronização no evento)

Porque queremos mudar o efeito em tempo real, então aqui escolhemos ouvir o evento de entrada

//html
<div>
     <input type="text" @input="handleInput" :value="message" />
     <div>{
   
   {message}}</div>
     
</div>

//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
  methods:{
    handleInput(e){
      this.message = e.target.value;
    }
  }
}

Ou simplesmente abrevie:

<input type="text" @input="message=$event.target.value" :value="message" />

Princípio do modelo v:

O modelo v é na verdade um açúcar sintático. Ele contém essencialmente duas operações :

v-bind vincula um atributo de valor
A instrução v-on liga o evento de entrada ao elemento atual