vue学习（二）

9.vue中的数据代理

通过vm对象来代理data对象中的属性操作（读写），目的是为了更加方便操作data中的数据

基本原理：通过Object.defineProperty()把data对象所有属性添加到vm上，为每一个添加到vm上的属性，都增加一个getter/setter方法，在方法内部去操作（读写）data中对象的属性

10.vue中事件

使用v-on:xxx或者@xxx 绑定事件，xxx是事件名 如：v-on:click="onShow" 或 @click = "onShow"

事件的回调需要配置再vm的methods对象中

methods中配置的函数，如果用箭头函数，this会变成windows，不用则是vm

@click = "onShow" 和 @click = "onShow(@event)" 效果一样，但是后者可以传参

11.vue事件修饰符

@click = "onShow" @click.prevent = "onShow" @click.prevent.stop = "onShow"

prevent:阻止默认事件

stop:阻止事件冒泡

once:事件只触发一次

capture:使用事件的捕获模式（捕获模式：事件传递从内向外的过程，冒泡是捕获发生后，反向传递）

self:只有event.target是当前操作的元素的时候才触发

passive：事件的默认行为立即执行，无需等待事件回调执行完毕（交互层立即执行，无需等待事件处理）

12.vue键盘事件

@keyup = enter @keyup = ctrl.x = "onShow"

鉴于一些特殊按键带有特殊功能 keyup不好用的时候 可以使用keydown

vue中常用的按键别名： enter delete esc space tab up down left right

vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意几个单词的要转为keba-case（短横线命名）

系统修饰键 ctrl alt shit meta 用keyup的时候要加上其他键，用keydown不需要

可以使用Vue.config.keycodes.自定义键名=键码

13.vue计算属性

要用的属性不存在，要用到已有属性计算得来，初次读取会执行一次，当依赖的数据发生改变会被调用，有缓存机制，效率更高

如果只有读取，可以如此简写

computed:{
                onshow() {
                    console.log('get倍调用了')
                    return this.name + '+' + this.name1
                }
            }

如果读写都有：

computed:{
                onshow:{
                    get(){
                        console.log('get倍调用了')
                        return this.name + '+' + this.name1
                    },
                    set(value){
                        console.log('set',value)
                        this.name = value;
                        this.name1 = value;
                    }
                }
            }