Vue全家桶学习笔记第二天

1.5 理解数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

• 原理：通过Object.defineProperty的setter来让另一个对象的属性值等于这个对象的value，当这个对象的value被修改时，就会通过setter让另一个对象的值也一起改变

let obj = { x:100 }
let obj2 = { y:200 }
​
Object.defineProperty(obj2, x, {
    get(){
        return obj.x
    }
    set(value) {
    obj.x = value
}
})

vue中的数据代理

• 是指通过vm对象来代理data对象中属性的操作（读/写）

• 优点：更加方便的操作data中的数据（如果不代理，我们在模板语法中就要使用_data.xxx来读取属性值）

• 原理：通过Object.defineProperty（）把data对象中的所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，在getter/setter内部去操作（读/写）data中对应的属性

1.6 事件处理

1.6.1 事件的基本使用

• 使用v-on:xxx或@xxx来绑定事件，其中xxx是事件名

• 事件的回调需要配置在methods对象中，最终会在vm上

• methods中配置的函数，不要用箭头函数！否则里面的this就不是vm了（是vue实例执行时的上下文）

• methods中配置的函数，都是Vue所管理的函数，this的指向是vm或组件实例对象

• 不传参直接写@click = ‘demo’即可，需要传参则要写@click = ‘demo(a,b)’，需要用event需要在参数列表中写$event占位符

1.6.2 事件修饰符（可以连写）

• 阻止事件冒泡

  • @click.stop = "xxx"

  • es5方法 e.stopPropatation()

• 阻止事件默认行为

  • @click.prevent = "xxx"

  • es5方法 e.preventDefault()

• 事件只触发一次：@cl