Vue的双向数据绑定

最新推荐文章于 2024-05-04 10:19:26 发布

CSH_lucky

最新推荐文章于 2024-05-04 10:19:26 发布

阅读量2.1k

点赞数 1

分类专栏： vue 文章标签： vue 数据劫持

本文链接：https://blog.csdn.net/CSH_lucky/article/details/108086202

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、什么是双向数据绑定

数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

二、vue里面的双向数据绑定

在vue里面使用v-model实现双向数据绑定，原理是检测用户输入，把输入的值获取到，然后同步更新给页面的元素
v-model的注意点：
1.没有简写形式
2.只有指定表单元素可以使用（input selete textarea )
3.修饰符： .enter .13 .stop .prevent等

<!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>
    <div id="app">
        <div class="text">{{info}}</div>
        <input type="text" value="" v-model = "info">
    </div>
</body>
</html>
<script src="./lib/vue.js"></script>
<script>
    const app = new Vue({
        el : "#app",
        data : {
            info : ""
        }
    })
</script>

在这里插入图片描述

三、v-model的实现原理

vue.js是利用ES5中的Object.defineProperty方法实现的双向数据绑定，Object.defineProperty他可以直接在一个对象上面定义一个新属性，或者修改一个对象的现有属性，并返回这个对象.

语法
Object.defineProperty(object, propertyname, descriptor) //参数（3个且必须）
参数
- object ：要在其上添加或修改属性的对象。
- propertyname：要定义或修改的属性的名称。（存在修改，不存在，自定义，设置属性和描述配置）
- descriptor:将被定义或修改的属性描述符。(可以包含以下属性，默认情况下， writable， enumerable，configurable值为false)
- 方法访问器,可选键值（）
  - get() : 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
  - set() : 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。

四、原生js实现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>Document</title>
    <style>
        #spanText {
            display: block;
        }
        #inputText {
            margin-top: 30px;
        }
    </style>
</head>
<body>
<span id="spanText">{{text}}</span>
<input type="text" id="inputText"/>

<script>
    var obj = {};
    Object.defineProperty(obj,'text',{
        set:function(val){
            document.getElementById('spanText').innerHTML = val;
            document.getElementById('inputText').value = val;
        }
    });
    document.getElementById('inputText').onkeyup = function(e){
        obj.text = e.target.value;
    };
    obj.text = "";
</script>
</body>
</html>

CSH_lucky

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue的双向数据绑定

一、什么是双向数据绑定数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。二、vue里面的双向数据绑定在vue里面使用v-model实现双向数据绑定，代码非常的方便简单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
复制链接

扫一扫

专栏目录