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>