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)的操作来实现的。
具体原理以及代码可以参考以下文章
- 还没有人评论,欢迎说说您的想法!