v-model的底层实现原理分析

最新推荐文章于 2024-09-29 04:47:26 发布

原创最新推荐文章于 2024-09-29 04:47:26 发布 · 3.2k 阅读

CC 4.0 BY-SA版权

本文探讨了v-model的底层实现，它结合v-bind和v-on:input事件来实现双向数据绑定。通过v-bind设置初始值，v-on:input监听输入变化，利用$event.target.value获取新值并更新数据，确保视图和模型同步。

v-model 的低层实现原理分析

<input v-bind：value = "msg" v-on:input = "msg = $event.target.value">

v-model本质就是用v-bind去绑定值再通过input事件处理值的变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <input type="text" v-bind:value = 'msg' v-on:input = 'handle'>
        <input type="text" v-bind:value = 'msg' v-on:input = 'msg = $event.target.value'>
        <input type="text" v-model = "msg">

    </div>
    <script src="vue.js"></script>
    <script>
    /*v-model 指令的本质*/ 
     var vm = new Vue({
         el:'#app',
         data:{
            msg:'hello'
         },
         methods:{
            handle: function(event){
                // 使用输入域中最新的数据覆盖原来的数据
                this.msg = event.target.value;

            }
         }
     });


    </script>
</body>
</html>

在这里插入图片描述

<input type="text" v-bind:value = 'msg' v-on:input = 'msg = $event.target.value'>
v-model底层原理实际上是分别利用了v-bind用来绑定value的值，用v-on去绑定input标准事件，这是事件用来监听当输入域内容发生变化的时候来执行一些事情。具体做的事情就是通过$event这个事件对象获取到最新的输入域的值，然后把最新的值赋值给旧的值，从而进行数据的更新。这样的话就完成了双向数据绑定。