vue：数据代理，事件处理，事件修饰符，键盘事件

接续前言，昨天学习了一个简单的利用Object.defineProperty()方法利用number对象去代理了person的age属性值（重写setter与getter实现一个数据的异步更新），聊的里面我可能趋于用Java的一些特性词汇来表达一些逻辑（如有问题大家直接评论指出我更正就好），那么我们知道vue中的数据代理思想用在哪里吗？

先看下面的代码：

    

        
{{name}}
        
{{address}}
    
    

控制台查看，VM的对象属性中，我们可以发现_data属性中含有和Vue实例中data对象一样的属性（二者实际就是一个），然VM对象还含有自己的name和address，那么这个属于这两个属性的setter与geter是与那个对象做代理呢？

Vue实例中的data --（通过VM对象中的getter与setter实现对data属性的读写）-->  VM对象 -----> dom结点。

之前在原生的js中对于一个按钮或者其他标签的事件处理我们是采用dom结点的监听或者设置事件函数来解决事件绑定与处理这个功能的。

但是在vue中，我们发现当容器被vue实例挂载之后，它内部的标签就不能调用vue实例之外的其他函数了，这就导致了我们需要将事件函数在vue内部定义：

        new Vue({
            el: '',
            data() {
                return {
                }
            },
// 存储函数的地方，因为实例接管容器后，容器只能调用vue实例中的函数与属性，同时在函数内部写this时默认的是当前vu实例或是组件实例（如果是箭头函数则是window）。
            methods: {
               
            }
        })

 这里我们只需要在methods里定义我们需要使用的函数（如下代码段）：

            methods: {
                showInfo() {
                    alert('你还没有进行任何的输入')
                }
            }

那么以点击事件为例，之前在原生js里的点击事件可以是dom对象.addEventListener('click',function(){})或是dom对象.onclick = function(){]等方法，现在我们在vue中采用命令语法v-on:click="vue实例中的函数名"：

    

        
欢迎{{name}}学习Vue

        点我提示信息
        
        点我提示信息
        
        点击控制台输出年纪数组{{age}}
        
        点击控制台输出年纪：{{age[2]}}


        
        百度
        
        百度

    
    

以上代码中不难发现v-on:click=“函数名” 的简写是 @click="函数名"。简直是不要太爽！简便好写。但是我们看到里头对于事件函数参数的传递也有一定描述；当我们需要直接将event与某些数据传递回函数内部进行处理的时候（删除记录传递id等场景）我们可以这么写：

容器内：

        点击控制台输出年纪数组{{age}}
        
        点击控制台输出年纪：{{age[2]}}

vue实例methods内：

                sendNumbers(age) {
                    console.log(age)
                },
                sendNumber(event, age) {
                    console.log('你的年龄是' + age)
                },

这样就可以实现参数的传递了。接下来我们看看这些代码（观察注释）：

div容器内：

               redirct(event) {
                    alert('跳转')
                }

 
        百度
        
        百度

vue实例中methods内：

               redirct(event) {
                    alert('跳转')
                }

主要的不在这个函数里，我们知道a标签是具备一个默认事件的，就是你点击事件函数处理完之后会默认的回调访问href描述的连接，这是一个默认事件，之前在原生JS里我们是通过点击事件函数里写event.preventDefalut()方法取消默认事件的执行的，现在我们vue容器则是直接在事件后面加上事件修饰符即可：@click.prevent="函数名" 这样就把对应标签的默认事件给阻止了；（修饰符可以连写）其次vue提供的事件的修饰符有： stop阻止冒泡事件，once事件至触发一次，capture使用事件的捕获模式，passive事件默认直接执行不需要等待回调之后，self只有event.target是当前操作的元素时才触发事件self用在元素之间产生嵌套关系（div包裹div, 点击里面的div会产生冒泡冒到外面的元素，在外部元素事件采取该修饰符会阻止对它的冒泡触发）时使用。

事件自然除了鼠标交互外必不可少的就是键盘交互了。那么键盘事件vue又是怎么处理的呢？我们知道之前的原生js会使用event.key以及event.keycode去根据键值与键码判断是否按下键盘的某个键位，例如：

            function showInfo(event){
                if(event.keycode == 目标键位编码value){
                    事件....
                }
            }

但是这样的弊端就是我们需要知道那个键位的键码是多少？谁会花时间记这些东西呢？于是vue就有了一套新的操作，即使用v-on:keyup.键位的key或者别名=“函数名”，来看以下代码：

 vue提供的按键别名有 回车enter 删除delete 退出esc 空格space 换行tab(注意tab具备默认事件：切换焦点) 上up 下down 左left 右right，特别的，系统修饰键绑定事件例如 Ctrl alt meta shift 的keyup时需要先按下它和其他键再将其他键抬起时触发，未提供别名的需要用按键原始的key值去绑定（按键的key值可以通过event.key获取，value通过event.keycode获取），组合单词的key需要小写且单词之间用-连接，例如CapsLock切换大小写键位，需要写成@keyup.caps-lock="函数名"。也可以定制别名，vue.config.keyCodes.别名 = 键码 例如：vue.config.keyCodes.huiche = 13就是定义回车键的别名（回车键的键码是13可以去查询也可以手写js函数利用event.keycode打印出来你按下按键的键码）。 

下午继续边学边实操~