Vue08 事件

2022-06-24 22:03:49 阅读：120 来源： 互联网

标签：Vue console methods Vue08 事件按键 log

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>

标签：Vue,console,methods,Vue08,事件,按键,log
来源： https://www.cnblogs.com/jthr/p/16410349.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue08 事件