7 .v-model 双向绑定

7 .v-model 双向绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<div id="app">
    <input type="text" v-model="message">
    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue(){
                this.message='百知教育!';
            }
        }
    });
</script>

总结

	1.使用v-model指令可以实现数据的双向绑定 
	2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定

MVVM架构 双向绑定机制

Model: 数据  Vue实例中绑定数据

VM:   ViewModel  监听器

View:  页面  页面展示的数据