v-model实现输入框中数据与页面内容同步

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    {{ msg }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: ''
        }
    })
</script>
</body>
</html>

运行结果

如上图,当我们在输入框中输入任何数据时,都会相应的显示在右边的页面上,这个就是vue中数据双向绑定的最基础的体现

当前台显示的view发生变化了,它会实时反应到viewModel上,如果有需,ViewModel 会通过ajax等方法将改变的数据传递给后台model;反之,从后台model获取过来的数据,通过vm将值响应到前台UI上,这也是vue这种基于MVVM模式的框架最大的特点,通过该模式的框架,我们就能非常简单的实现model层和view层的数据渲染

数据双向绑定的原理

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
具体原理以及代码可以参考以下文章