vue-05 Vue里面的事件处理

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15&spm_id_from=pageDriver&vd_source=aed32465b7cb31ee13dfd53d37ce0e3b

使用 v-on:Click指令可以绑定点击事件, 事件的方法名必须是Vue对象中的方法, 如果绑定的事件函数不传参数,绑定方法名时只需要写方法名称即可, 会默认带有一个event参数,可以获取到target对象(发生事件的对象), 如果绑定时带有参数, 直接在方法名后面传递, event参数需要使用 $event 进行占位
也可以简写为@Click

 <div id='Root'>
        <h1>测试{{name}}</h1>
        <button v-on:Click="showInfo1">不传参数的button,实际默认有个event参数</button>
        <button v-on:Click="showInfo2($event, 66)">不传参数的button,实际默认有个event参数</button>
<button @Click="showInfo2($event, 66)">简写</button>
    </div>

    <script>
        const vm = new Vue({
            el: '#Root',
            data: {
                name: '你好'
            },
            methods: { //对象里面添加方法,不用写function
                showInfo1(event){

                    console.log('默认参数' + event.target.innerText)
                    alert('你好')
                },
                showInfo2(event, number){
                    console.log(event.target.innerText)
                    console.log(number)
                }
            }
        })
    </script>

阻止默认事件和阻止事件冒泡(事件触发的同时,也会触发父试图同名的方法)

@Click.prevent 阻止默认事件
@Click.stop 阻止事件冒泡
@Click.once 事件只触发一次
@Click.self 只有event.target是本身时才会触发
修饰符可以连用 @Click.preven.stop 即阻止冒泡,又阻止默认事件


<div id='Root'>
        <a href="https://www.baidu.com" @Click.prevent="showInfo1">点我去百度</a><br/>
        <div @Click="showInfo2($event,66)">
            <button @Click="showInfo1">事件可以冒泡</button><br/>
        </div>

        <div @Click="showInfo2($event,66)">
            <button @Click.stop="showInfo1">使用stop阻止事件冒泡</button><br/>
        </div>

        <div @Click.self="showInfo2($event,66)">
            <button @Click="showInfo1">使用self阻止事件冒泡</button><br/>
        </div>
    </div>

    <script>
        const vm = new Vue({
            el: '#Root',
            data: {
                name: '你好'
            },
            methods: { //对象里面添加方法,不用写function
                showInfo1(e){

                    console.log('默认参数' + event.target.innerText)
                    alert('你好')
                },
                showInfo2(event, number){
                    console.log(event.target.innerText)
                    console.log(number)
                    alert('你好')
                }
            }
        })
    </script>

键盘事件

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=16&spm_id_from=pageDriver&vd_source=aed32465b7cb31ee13dfd53d37ce0e3b

使用@keyup(按键弹起时)和@keydown(按键按下时)绑定vue函数

如果要指定某个按键弹起时,只需要获取按键的值并转换成小写拼接在@keyup.或@keydown.后面即可, 例如按下回车键触发事件@keyup.enter

获取每个键的名字, 可以通过console.log(e.key, e.keyCode)获取

div id='Root'>
        <input type="text" placeholder="请输入" @keyup.enter="showInfo1">
    </div>

    <script>
        const vm = new Vue({
            el: '#Root',
            data: {
                name: '你好'
            },
            methods: { //对象里面添加方法,不用写function
                showInfo1(e){
                    console.log(e.target.value)
                }
            }
        })
    </script>

获取每个键的名字


<div id='Root'>
       <input type="text" placeholder="请输入" @keydown="showInfo1">
   </div>

   <script>
       const vm = new Vue({
           el: '#Root',
           data: {
               name: '你好'
           },
           methods: { //对象里面添加方法,不用写function
               showInfo1(e){
                   console.log(e.key, e.keyCode)
               }
           }
       })
   </script>

截屏2023-09-08 15.14.33.png

总结:

截屏2024-02-29 09.56.03.png

最后编辑于：2024.02.29 09:56:51