vue的单向数据流和双向绑定解释

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>