码迷,mamicode.com
首页 > 其他好文 > 详细

杂记--关于vue数据绑定原理

时间:2020-02-02 19:46:28      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:type   常用   def   点绑定   tar   key   依赖   fun   改变   

1、vue数据双向绑定(v-model)

主要实现依赖于数据的劫持,及观察订阅者模式的使用,其中Object.defineProperty()为核心

作用:定义或修改一个对象上的相关属性及其相关的操作
语法: Object.defineProperty(obj, prop, descriptor)
其中:
obj: 需要被操作的目标对象
prop: 目标对象需要定义或修改的属性的名称
descriptor: 将被定义或修改的属性的描述符,分为数据描述符or存取描述符;
用bject.defineProperty(),简单实现输入框与数据的绑定:

<body>
    <div>
        <input type="text" id="input">
        <span id="data"></span>
    </div>
    <script>
        var obj = {};
        console.log(obj);
        Object.defineProperty(obj, 'value', {
            get: function() {
                console.log('调用了get方法');
            },
            set: function(newValue) {
                console.log('调用了set方法,值为:' + newValue);
                value = newValue;
                document.getElementById('input').value = value;
                document.getElementById('data').innerText = value;
            }
        })
        document.getElementById('input').onkeyup = function(e) {
            obj.value = e.target.value; //e.target相当于触发事件的dom节点
        }
    </script>
</body>

关于vue中双向绑定可以分为:1、data数据与输入框及显示的文本节点绑定 2、输入框修改影响data和文本节点的数据 3、data中数据的改变影响输入框及文本节点。

2、vue中数据绑定(v-bind)

vue常用指令之一,单向绑定数据,常用与标签属性的绑定:<input type="text" id="input" :value="data">
其中value为input标签的一个属性,v-bind会使其内容变为js表达式,相当于把‘data‘变成一个变量,修改data的值会同步到标签属性中。

杂记--关于vue数据绑定原理

标签:type   常用   def   点绑定   tar   key   依赖   fun   改变   

原文地址:https://www.cnblogs.com/Zxq-zn/p/12252366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!