Vue的v-mode实现原理

yang.ing

于 2022-09-16 08:27:04 发布

阅读量120

点赞数 1

分类专栏：前端面试知识点文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46030564/article/details/126883151

版权

前端面试知识点专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先是使用JS原生代码实现


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="username"><br> 显示值：
    <span id="uName"></span>
</body>

<!-- 原生Js实现v-mode响应式 -->

<script>
    let obj = {};
    Object.defineProperty(obj, "username", {
        get: function() {
            console.log("取值");
        },
        set: function(val) {
            console.log("设置值");
            document.getElementById("uName").innerText = val
        }
    })

    document.getElementById("username").addEventListener("keyup", function() {
        console.log(event);
        obj.username = event.target.value
    })
</script>

</html>

2.使用value和input语法糖实现

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<body>
    <div id="app">
        {{msg}}
        <!-- 将value属性和msg数据进行绑定,那么msg数据变化时也会影响到value -->
        <!-- <div><input v-bind:value='msg' v-on:input='handle' type="text"></div> -->
        <!-- <div><input :value='msg' @input='handle' type="text"></div> -->
        <div><input :value='msg' @input='msg=$event.target.value' type="text"></div>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello'
            },
            // methods: {
            //     handle: function(e) {
            //         //表格的value值发生变化时,msg的值也会变化  ,同时msg的值也是value值
            //         this.msg = e.target.value;
            //     }
            // }
        })
    </script>

</body>

</html>