v-model雙向綁定的原理

什麼是v-model雙向綁定？

用戶在輸入框中輸入內容value和開發人員定義的數據data，當用戶輸入內容改變，data也改變，相應的在頁面中渲染的相關的值也會變化，開發人員修改data時，輸入框中的value也會跟着變化。

 

雙向綁定如何實現的，手寫一個雙向綁定的實現？

<template>
<div id="app">
  <input v-bind:value="message" @input="changeValue">
  <span>{{ message }}</span>
</div>
</template>

<script>
  new Vue({
    el: '#app',
    data: {
      message: "Hello Vue!"
},
    methods: {
      changeValue(event) {
        this.message = event.target.value;
      }
    }
});
</script>

這樣就利用v-bind和v-on實現了雙向綁定。