Vue.js学习笔记第五篇事件处理

监听事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app-1">
        <button v-on:click="counter += 1">Add</button>
        <p>这个按钮被点击了{{ counter }}次</p>
    </div>
    <script type="text/javascript">
        var vm1 = new Vue({
            el: '#app-1',
            data: {
                counter: 0
            }
        })
    </script>
</body>
</html>

v-on指令，用于绑定事件，事件的处理是对counter变量累加

那么问题来了，实际应用中事件的处理并没有这么简单，在处理复杂的逻辑时，这种方式就不合适了，这时需要定义一个方法来处理

<div id="app-2">
    <button @click="hello">Hello</button>
</div>
<script type="text/javascript">
    var vm2 = new Vue({
        el: '#app-2',
        data: {
            name: 'TanSea'
        },
        methods: {
            hello: function(event) {
                alert('Hello, ' + this.name + '!')
                if (event) { alert(event.target.tagName) };
            }
        }
    })
</script>

这里，我们又看到了一个陌生的东西@click，他是v-on:click的简写

到目前为止，我们已经学到了2个指令的简写方法，一个是针对属性的v-bind，一个是针对方法的v-on，可见这2个指令是Vue使用频率最高的2个指令

Vue对象实例化时，多了一个新的参数methods(方法)，用来定义事件的处理方法

事件修饰符

1、.once修饰符，事件只会被触发一次，版本：2.1.4+

<div id="app-3">
    <button @click.once="count">Add</button>
    <p>这个按钮被点击了{{ counter }}次</p>
</div>
<script type="text/javascript">
    var vm3 = new Vue({
        el: '#app-3',
        data: {
            counter: 0
        },
        methods: {
            count: function() {
                this.counter += 1
            }
        }
    })
</script>

2、.stop修饰符，阻止事件冒泡

先解释一下什么叫事件冒泡，当父元素和子元素同时绑定了一个事件时，子元素先触发事件，父元素再触发事件

和事件冒泡相对应的叫事件捕获，父元素先触发事件，子元素再触发事件

<div id="app-3">
    <div @click="count">
        父元素<br>
        <p @click.stop="count">子元素</p>
    </div>
    <p>这个按钮被点击了{{ counter }}次</p>
</div>
<script type="text/javascript">
    var vm3 = new Vue({
        el: '#app-3',
        data: {
            counter: 0
        },
        methods: {
            count: function() {
                this.counter += 1
            }
        }
    })
</script>

父元素(div)和子元素(p)同时绑定了一个事件，当点击父元素时counter加1，当点击子元素时，由于stop修饰符阻止了事件冒泡，所以counter也只加1

如果去掉stop修饰符，当点击子元素时，counter会加2(子元素和父元素先后触发事件)

按键修饰符

1、按键编码

只有在keyCode是13(“回车”键)时调用事件confirm

<div id="app-4">
    按键编码：<input @keyup.13="confirm" v-model:value="content">
</div>
<script type="text/javascript">
    var vm4 = new Vue({
        el: '#app-4',
        data: {
            content: ''
        },
        methods: {
            confirm: function() {
                alert(this.content)
            }
        }
    })
</script>

2、按键别名

我们很难记住所有的keyCode，所以Vue提供了一些常用按键别名：

.enter (“回车”键)
.tab (“TAB”键)
.delete (捕获 “删除” 和 “退格” 键)
.esc (“ESC”键)
.space (“空格”键)
.up (向上方向键)
.down (向下方向键)
.left (向左方向键)
.right (向右方向键)

当然，除了这些常用按键别名之外，Vue也提供了自定义按键别名的方法

Vue.config.keyCodes.f4 = 115 //全局自定义按键别名

只有在“回车”键或"F4"键时调用事件confirm

<div id="app-4">
    按键别名：<input @keyup.enter.f4="confirm" v-model:value="content">
</div>
<script type="text/javascript">
    Vue.config.keyCodes.f4 = 115
 
    var vm4 = new Vue({
        el: '#app-4',
        data: {
            content: ''
        },
        methods: {
            confirm: function() {
                alert(this.content)
            }
        }
    })
</script>

3、组合按键，版本：2.1.0+

.ctrl
.alt
.shift
.meta (根据操作系统的不同而不同，Windows系统是WIN键)

组合按键不能单独触发事件，要与非组合按键一起才能触发事件

<!-- "回车"键 或 "F4"键 触发事件 -->
<input @keyup.enter.f4="confirm">
<!-- "回车"键 和 "CTRL"键 触发事件 -->
<input @keyup.enter.ctrl="confirm">