自定義v-model

v-model是vue實現數據雙向綁定最好的一個指令,  v-model本質上不過是語法糖,它負責監聽用戶的輸入事件以更新數據,當你修改頁面的時候 v-model 自動去更新數據層 (model),當你修改數據的時候v-model自動去更新視圖層 (view)

app.vue

<input type="text" :value="message" @input="changeAction"/>

data(){
    return {
      message: 'hello v-model',
    }
  },

methods: {
    changeAction(ev){
      console.log(ev.target.value);
      //經過動態綁定value值,將input事件輸入的值傳入
      this.message = ev.target.value;
    },
  }

下面的這個代碼能夠把v-model理解爲  :value @input的合體
<input type="text" :value="message" @input="changeAction"/>

ok了