Vue 在不同元件間強制使用單向資料流。這使應用中的資料流更加清晰易懂。資料只能從父元件到子元件或是反向。

雙向繫結v-model是同時實現bind attribute(value)和Listen to event(input)

以下給出v-model和手動雙向繫結的程式碼

<template>
  <div class="card my-1">
    <div class="card-body">
      <div class="text-success">Two way data binding <br>*bind to attribute(value) & listen to event(input) at the same time</div>
      <p>{{ title }}</p>
      <input type="text" class="form-control" v-model="title">
      <p class="text-success">*Manual two way binding</p>
      <p>{{ test }} </p>
      <input type="text" :value="test" @input="listen" class="form-control">
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: "title",
        test: "test"
      }
    },
    methods: {
      listen(e) {
        this.test = e.target.value
      }
    }
  };

</script>