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">