参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-17输入和事件

可以使用v-on指令将事件侦听器绑定到元素上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入和事件</title>
</head>

<body>
    <div id="app">
        <p>共点击了 {{count}} 次</p>
        <button v-on:click="count++">数量增加</button>
        <button v-on:click="addCount">数量增加绑定方法</button>
        <!-- 和v-bind指令类似，v-on指令同样有一个简写方式。可以将v-on:click简写为@click。 -->
        <button @click="addCount">v-on 的简写</button>
        <!-- 
            事件修饰符
            .prevent: 阻止执行事件默认行为
            .stop: 阻止事件继续传播
            .once: 只在第一次触发事件的时候触发事件侦听器
            .capture: 如果想要使用捕获模式，也就是说，事件会在传递到当前元素的下级元素前触发（而在冒泡模式中，事件会先在当前元素上触发，然后沿DOM树向上冒泡）
            .self: 只监听元素自身而不是它的子元素上触发的事件
            也可以只设置事件名和修饰符而不传入侦听器，而且可以将修饰符串联起来使用: @click.stop.once.capture

            按键修饰符
            .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right
        
        -->
        <!-- 事件修饰符使用方法 -->
        <button @click.once="addCount">只触发一次</button>

        <!-- 按键修饰符使用 -->
        <input type="text" @keyup.esc="addCount">
        <!-- 跟上面效果相同，esc的keyCode为27 -->
        <input type="text" @keyup.27="addCount">
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        let vue = new Vue({
            el: "#app",
            data: {
                count: 0,
            },
            methods: {

                addCount() {
                    this.count++;
                }
            }
        })
    </script>
</body>

</html>

 

posted @ 2021-06-21 10:16  {颜逸}  阅读(38)  评论(0)  编辑  收藏  举报