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)" 效果一致，但后者可以传参

 <div class="root">
        <h1>欢迎来到{{address}}学习</h1>

        <!-- 
            v-on：当~时 
            click：点击
            showInfo：调用该函数
        -->
        <button v-on:click = "showInfo1">点我弹窗</button>
        
        <button v-on:click = "showInfo2(666,$event)">点我提示信息2（传参）</button>
        <!-- 这里的 $event 就属于关键词，进行了占位
            实参和$event的位置可以替换，当然下面的方法中的形参位置也得发生改变
        -->

    </div>
    <script>
        Vue.config.productionTip = false;  //阻止vue在启动时生成生产提示

        new Vue({
            el:'.root',
            data:{
                address:'北京'
            },
            methods:{
                showInfo1(event){
                    alert('同学你好!');
                },
                showInfo2(number,event){
                    console.log(number,event);  //666 event
                    //console.log(this); //this指向vm
                    alert('同学你好!!');
                }
            }
        })
    </script>

vue中的事件修饰符

            1.prevent：阻止默认事件

            2.stop：阻止事件冒泡

            3.once：事件只触发一次

        <!-- prevent 阻止默认事件，这里是阻止a标签跳转-->
        <a href="http://www.baidu.com" v-on:click.prevent="showInfo">点击事件</a>
        
        <!-- stop 阻止事件冒泡，这里如果不阻止的话，就会触发两次showInfo-->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- once 事件只触发一次，点击一次后不会再次触发-->
        <button @click.once="showInfo">点我提示信息</button>

        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

        <input type="text" placeholder="按下回车提示" @keydown.delete="showInfo"> 
        <!-- 上面的代码 @keydown.enter 就是在按下回车之后才会触发之后的事件-->
        
        <!-- 可以设置按下两个确定的键 -->
        <input type="text" placeholder="按下回车提示" @keydown.enter.y="showInfo">
        
        <!-- 对于上面没有直接提供的按键，比如CapsLock这个是两个单词，需要下面这种格式
         ,就是全部小写并且两个单词之间得用-分割-->
        <input type="text" placeholder="按下CapLock触发" @keyup.caps-lock="showInfo">

        <!-- 对于上面没有提供且一般的按键 如shift -->
        <input type="text" placeholder="按下shift触发" @keydown.shift="showInfo">

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

                }
            }