vue中模拟v-model的实现原理

最新推荐文章于 2024-06-07 11:23:43 发布

打工人打工混

最新推荐文章于 2024-06-07 11:23:43 发布

阅读量175

点赞数

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

本文链接：https://blog.csdn.net/qq_45633169/article/details/123922000

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--  
        v-model的渲染（视图更新控制数据的更改）：
        1.把数据中的信息拿到复制给视图上
        2.监听视图的更新，更新后重新修改数据
        3.数据更改后，重新控制视图重新渲染
    -->
    <div id="app">
        <input type="text" v-model="msg" id="inpBox">
       
        <span id="spanText"> </span>
    </div>
    <script src="../../../node_modules/vue/dist/vue.js"></script>
    <script>
        //=》响应式数据(数据更新影响视图，视图更新影响数据)
        let data = {
            msg:'前端'
        };
        let tempData = {
            msg :data.msg,
        };
         Object.defineProperty(data,'msg',{
             set(value){
                tempData.msg = value;
                render();
             }
         });
         
        //=》渲染视图
        function render(){
            inpBox.value=tempData.msg;
            spanText.innerHTML=tempData.msg;
        };
        render();


        //=>视图更新影响数据:视图数据更改的监听
        inpBox.addEventListener('input',function(){
            data.msg=this.value;
        });
    // let vm=new Vue({
    //     el:'#app',
    //     data:{
    //         msg:'前端智能'
    //     }

    // })
    </script>
</body>
</html>

打工人打工混

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中模拟v-model的实现原理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
复制链接

扫一扫