v-model的实现原理

最新推荐文章于 2022-04-27 23:10:04 发布

TuMinQiang

最新推荐文章于 2022-04-27 23:10:04 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_42132814/article/details/109805318

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

v-model的实现原理

Vue中，在input框中使用v-model能够实现数据的双向绑定，其实v-model其实是个语法糖，实际上做了两件事。

绑定vlaue值
触发输入事件input

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model原理</title>
</head>

<body>
    <div id="app">
        <!-- v-model只是一个语法糖 -->
        <!-- input事件：在用户输入时触发，它是在元素值发生变化时立即触发；实时触发 -->
        <!-- $event是事件对象，$event.target.value表示input框中的输入值 -->
        <!--实现了数据的双向绑定-->
        <input type="text" :value="message" @input="message = $event.target.value">
        <h2>{{message}}</h2>
    </div>
    <script src="../vue包/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '哈哈'
            },
            methods: {}
        });
    </script>
</body>

</html>