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>