vue中的事件处理

1.事件的基本使用          基本知识：

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

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

            3.method是中配置的函数，不再用箭头函数，否则this就不是vm了

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

            5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参

 
        欢迎来到{{address}}学习

        
        点我d窗
        
        点我提示信息2（传参）
        

    
    

vue中的事件修饰符

            1.prevent：阻止默认事件

            2.stop：阻止事件冒泡

            3.once：事件只触发一次

        
        点击事件
        
        
        
            点我提示信息
        

        
        点我提示信息

        new Vue({
            el:'.root',
            data:{
               
            },
            methods:{
                showInfo(e) {
                    alert('你好');
                }
            }
        })

键盘事件 注意事项

        keydown 按下去不用抬起来就触发事件

        keyup 按下去后抬起来之后才会触发事件

        1.vue中常用的按键别名

                回车 => enter

                删除 => delete （捕获 删除 和 退格 键）

                退出 => esc

                空格 => space

                换行 => tab  （特殊，必须配合keydown使用)

                上 => up

                下 => down

                左 => left

                右 => right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为a-b，如CapsLock为cap-lock

        3.系统修饰键：ctrl，alt，shift，meta

                （1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

                （2）配合keydown使用：正常触发事件,所以最好用keydown

         
        
        
        
        
        
        
        

        
        

        const vm = new Vue({
            el:'.root',
            data:{
                name:'尚硅谷'
            },
            methods:{
                showInfo(e) {
                 
                    console.log(e.target.value); //返回input中的值

                }
            }