美文网首页
vue-05 Vue里面的事件处理

vue-05 Vue里面的事件处理

作者: _RG | 来源:发表于2024-02-28 09:56 被阅读0次

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

相关文章

  • Vue-05

    计算属性:用来处理复杂逻辑操作的在Vue.js中有了计算属性这种方法,可以避免在模板中加入过度的业务逻辑,保证更好...

  • Vue-05

    Vue Router简介 它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用。Vu...

  • vue-事件

    title: vue-事件处理date: 2017-03-23 vue 事件 本文介绍vue组件的事件处理,并通过...

  • 2022-07-16

    07_事件处理 methods:事件配置项,里面的函数被vue管理,函数的this指向vm 或 组件实例对象 pr...

  • Vue事件处理

    Vue 事件处理 内联事件处理 通过方法处理 访问原始 DOM 事件方法不含有参数可以直接访问 event 对象 ...

  • vue基础入门(2.1)

    2.vue基础用法 #2.1.事件处理 #2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式...

  • vue 事件处理

    事件绑定的写法: 方法的传值

  • VUE事件处理

    .stop 停止事件冒泡.prevent 阻止事件默认行为

  • VUE事件处理

    1、获取点击的元素 html如下,将当前传递过去 JS代码如下 2、和Layui的TIPS结合做提示更多用html...

  • Vue事件处理

    监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。 效果: 事件...

网友评论

      本文标题:vue-05 Vue里面的事件处理

      本文链接:https://www.haomeiwen.com/subject/ezzlvdtx.html