3.vue双向数据绑定

修改html展示代码

<div  id="app">
	<input type="text"  v-model="msg" />
			
<span>{{msg}}</span>
			
		</div>
		
<script>
	new Vue({
        el: '#app',
        data: {
            msg: 'Hello World!'
        }
    });
</script>

可以看到我们操作的view控件数据，直接影响到了我们的vm.data，并且又进一步影响到了页面，这就是Vue的双向数据绑定。整个过程的原理如下图所示。