Vue08 事件

2022/6/24 23:21:43

编程Tag： vue 事件 console methods 按键 log Vue08

本文主要是介绍Vue08 事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1 事件语法

　　Vue 中的事件绑定可以使用 v-on 指令进行处理，可以把 v-on 绑定事件简写为 @。

<div id="root">
    <button @click="showinfo($event,123)">点我</button>
    <button v-on:click="showinfo($event,123)">点我2</button>
</div>

2 事件方法

2.1 Vue示例对象里面有个属性，methods，所有事件方法都放到里面

<script type="text/javascript" >

   const v =  new Vue({ 
        data(){
            console.log('调用者：' , this)
            return {
            name:'123',
            url:'www.baidu.com',
            phone:'15874859687'
          }
        },
        methods: {
            showinfo(event,number){
                console.log(number)
            }
        },
    })

    v.$mount('#root')

</script>

2.2 注意事项

　　methods里面写函数，不要用箭头函数。否则在里面使用this就不是vm实例了。正常的函数，里面this是指向vm或组件实例对象的

　　普通函数中的this指向它的直接调用者
　　箭头函数中的this指向它的外层调用者

2.2.1 使用一般函数，this是vm对象

<script type="text/javascript" >

   const v =  new Vue({ 
        methods: {
            showinfo(event){
                console.log(this)
            }
        },
    })

    v.$mount('#root')

</script>

2.2.2 使用箭头函数，this是window对象

<script type="text/javascript" >

   const v =  new Vue({ 
        methods: {
            showinfo:(event)=>{
                console.log(this)
            }
        },
    })

    v.$mount('#root')

</script>

3 关于事件方法的参数说明

3.1 当没有参数需要传时

　　　　@click="方法名"

　　　　虽然我们没有传参数，但是默认会传一个事件实例对象，在事件方法处可以接收到，当然也可以不接收

3.2 需要传参数时

　　　　@click="方法名(参数值，参数值)"

　　　　注意，这个时候，如果需要event实例对象，需要加到方法参数列表里面，采用$event

3.3 示例

<div id="root">
    <button @click="showinfo">点我</button>
    <button @click="showinfo2($event,123)">点我2</button>
</div>


<script type="text/javascript" >

   const v =  new Vue({ 
        methods: {
            showinfo(event){
                console.log(event.target)
            },
            showinfo2(event,number){
                console.log(number)
            }
        },
    })

    v.$mount('#root')

</script>

4 事件修饰符

4.1 Vue官网介绍

　　https://cn.vuejs.org/v2/api/#v-on

4.2 事件的处理过程

　　事件流分为三个阶段：捕获、触发、冒泡(事件方法执行)，默认行为执行。触发是从DOM 树的外层向里捕获，从DOM 树的里层向外冒泡。

　　关于默认行为补充说明：

　　　　比如一个a标签，里面一个网址，点击它的默认行为就是跳转。我给他一个点击事件，那么点它的时候，会先执行点击事件，执行完成后，执行默认行为，也就是跳转

    <style>


        .d1{
            height: 200px;
            background-color: aqua;
        }
            

        .d2{
            height: 100px;
            background-color:brown;
        }
        
    </style>

<div id="root" >
    <div @click="showinfo(123)"  class="d1">
        <div @click="showinfo(456)" class="d2">

        </div>
    </div>
</div>


<script type="text/javascript" >

   const v =  new Vue({ 
        methods: {
            showinfo(number){
                console.log(number)
            }
        },
    })

    v.$mount('#root')

</script>

点击红色区域，发现先打印456，再打印123，说明冒泡是从里往外。

5 键盘事件

5.1 简介

　　事件触发不仅仅只有鼠标，Vue 同样提供了一系列的修饰符来方便键盘事件的编写。

　　键盘事件的绑定同样支持 v-on 指令和 @ 快捷写法，Vue 内部提供了键别名和按键码来绑定不同的键

5.2 官网介绍

　　https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81

5.3 两个事件

　　@keyup ：按下键松开后触发(通常使用)

　　@keydown：按下键立即触发

5.4 格式

　　@keyup.按键名.按键名="函数"

　　可以是一个按键和多个按键。多个按键表示多个按键配合使用时触发

<body>
    <div class="container">
        <form>
            <label for="user_name">姓名

                <!-- 当按下 shift+delete 时清空内容 -->
                <input type="text" v-model="uname" @keyup.enter.shift.delete="clear" name="user_name">
            </label><br>
            <label for="password">密码
                <!-- 为该元素绑定事件，事件为键盘上的回车键 -->
                <input type="password" v-model="upwd" @keyup.enter="submit" name="password">
            </label><br>
            <input type="button" @click.prevent="submit" value="提交">
        </form>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '.container',
            data: { uname: '', upwd: '' },
            methods: {
                submit: function () { console.log(this.uname, this.upwd) },
                clear: function () { this.uname = '' }
            }
        })
    </script>
</body>

如第 7 行代码所示，当多个按键一起按才触发时，链式调用即可。

5.5 按键名和按键编码

　　https://www.cnblogs.com/yiven/p/7118056.html

　　@keyup后面写的.xxx，这个xxx是键盘名，但是却不全是电脑上面标的文字。

　　可以通过e.key来获取按键的名称,也可以通过e.keyCode获取键盘编码

<body>
    <div class="container">
        <form>
            <label for="user_name">姓名

                <!-- 当按下 shift+delete 时清空内容 -->
                <input type="text" v-model="uname" @keyup="show" name="user_name">
            </label><br>
        </form>
    </div>


    <script>
        let vm = new Vue({
            el: '.container',
            data: { uname: '', upwd: '' },
            methods: {
                show: function (e) {
                     console.log(e.key,",",e.keyCode) 
                    }
            }
        })
    </script>
</body>

5.6 按键别名

5.6.1 Vue设置的别名

　　为了我们编写方便，vue为常用按键起了别名，直接使用别名即可

5.6.2 自定义别名

1）格式

　　Vue.config.keyCodes.别名=按键编码

2）示例

　　Backspace的编码是8

　　给它取别名为bs

Vue.config.keyCodes.bs = 8

<body>
    <div class="container">
        <form>
            <label for="user_name">姓名

                <!-- 当按下 shift+delete 时清空内容 -->
                <input type="text" v-model="uname" @keyup.bs="show" name="user_name">
            </label><br>
        </form>
    </div>


    <script>

        Vue.config.keyCodes.bs = 8

        let vm = new Vue({
            el: '.container',
            data: { uname: '', upwd: '' },
            methods: {
                show: function (e) {
                     console.log("按下了Backspace") 
                    }
            }
        })
    </script>
</body>

这篇关于Vue08 事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue08 事件

相关编程文章