Vue中的数据绑定及其原理

254 阅读1分钟

1. Vue中有2中数据绑定的方式:

一种是单向绑定,一种是双向绑定。
(1). v-bind 单向绑定,数据只能从data流向页面

vue <h3 v-text="nn"></h3> <h3 v-html="ss"></h3>


(2). v-model 双向绑定,数据能从data流向页面,也能从页面流向data,双向绑定只能用于有value值得标签,v-model默认就是获取value值,所以v-model:value可以简写成v-model

<input type="text" v-model="n1">

2. 双向绑定的原理:

    利用Object.defineProperty方法,其中用get()来获取对象属性数据,把获取的数据利用新的属性名装起来,然后用set()调用改值来监听设置修改,当内容被修改时就会触发,并且把修改的值赋值给原来的属性名。
 Object.defineProperty(obj,'age',{
    // value:18,  //这样添加的属性不可枚举(无法遍历)
    // configurable:'true', //控制属性是否可删除
    // enumerable:true,  //该属性控制是否可枚举性
    // writable:true, //控制属性是否可修改
    
    // 获取
    get(){
        console.log("你访问了obj对象的age属性");
        return value=num
    },
    // 监听设置修改
    set(value){
        console.log("你修改了age的值,值是",value);
        num=value
    }