Vue系列教程（七）v-model和双向数据绑定

程序员文章站 2022-03-16 13:16:21

...

v-model是Vue中实现双向数据绑定的指令。
看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model指令的学习</title>
</head>
<body>
<div id="app">
    <h4>{{ msg }}</h4>
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '双向数据绑定'
        },
        methods: {}
    })
</script>
</body>
</html>

上面的vm实例是在浏览器内存中创建的，创建完成后，可以通过window.vm访问到这个实例：
Vue系列教程（七）v-model和双向数据绑定
打开这个对象，可以找到msg对象：

也就是说在data上定义的属性会自动挂载到vm对象上，所以我们可以用this.msg可以访问到data上的属性。

下面我们通过浏览器控制台修改msg的值：
Vue系列教程（七）v-model和双向数据绑定
我们发现页面上的值也自动改变了，这还不算双向数据绑定，这个是单向数据绑定。为了实现双向数据绑定，我们添加一个表单元素，代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-model指令的学习</title>
</head>
<body>
<div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" v-model="msg" style="width: 100%">
</div>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '双向数据绑定'
        },
        methods: {}
    })
</script>
</body>
</html>

页面如下：
Vue系列教程（七）v-model和双向数据绑定
改变文本框（View）中的值也会改变控制台（Model）中的值，改变控制台（Model）中的值也会改变文本框（View）中的值：

所以我们使用v-model实现了双向数据绑定。

注意：

v-model只能运用在表单元素中
v-bind不能实现双向数据绑定，只能实现单向数据绑定

Vue系列教程（七）v-model和双向数据绑定

Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

vue.js数据绑定的方法（单向、双向和一次性绑定）

vue自定v-model实现表单数据双向绑定问题

vue.js使用v-model指令实现的数据双向绑定功能示例

详解Vue.js之视图和数据的双向绑定(v-model)

使用 Object.defineProperty （vue2）和 Proxy（vue3）实现Vue双向数据绑定

vue的双向数据绑定(Object.defineProperty(),和es6的Proxy的底层封装是Object.defineProperty()封装的);...

简单实现Vue2.0(Object.defineProperty)和Vue3.0(Proxy)的数据双向绑定

理解VUE双向数据绑定原理和实现

Vue双向绑定实现原理（二）数据代理和编译模板