Vue学习笔记（四）：事件处理

1 v-on¶

Vue中，绑定点击事件用v-on:实现，例如绑定鼠标点击事件用v-on:click="fun"实现，绑定键盘回车键按下事件用v-on:keydown.enter="fun"实现，其中“fun”是点击事后后的回调方法。v-on:可以简写为“@”,例如@click="fun"、@keyup.enter="fun"。

2 鼠标事件¶

绑定鼠标点击事件通过v-on:click实现，例如给按钮添加一个点击事件，点击后执行名为“fun1”的方法：

<div id="app">
    <button v-on:click="fun1">按钮</button>
    <!-- <button @click="fun1">按钮</button> --> 
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#app',
        methods:{
            fun1(event){
                console.log(event)
                alert('按钮被点击')
            },
        }
    })
</script>

在上述示例中，我们给button绑定了fun1作为回调方法，那么，fun1方法接受了一个参数event，这个参数就是点击事件本身，通过这个参数可以获取一些环境变量，例如按钮信息等。这时候因为点击事件回调时除默认的event外并没有传递其他参数，所以，可以以v-on:click="fun"的方式绑定事件。但是，如果还有其他参数情况下，就不能这样书写。例如，我们希望回调时，传递两个个额外的数值给fun1，那么，可以做么做：

<div id="app">
    <button @click="fun1(1, $event, 66)">按钮</button> <!-- 这里的event前面必须有个$符号 --> 
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    num = 123
    const vm = new Vue({
        el:'#app',
        methods:{      // 此处定义回调函数
            fun1(a, event, b){
                console.log(a)
                console.log(event)
                console.log(b)
            },
        }
    })
</script>

为了区别于其他参数，event前面必须有个“\$”符号，“$event”的位置可以随意,可以使第一个参数位置，也可以是第二个参数位置。回调方法调用处的参数顺序、个数必须与定义处一致。

另外需要注意，在事件回调方法内部，如果使用this关键字，this指代的是Vue实例对象。

3 事件修饰符¶

3.1 阻止默认事件：prevent¶

在上面例子中，我们将鼠标点击事件绑定在button上，但在一些应用场景中我们需要对其他类型标签绑定鼠标事件，例如a标签，这时候，由于标签本身存在默认事件，点击执行回调后，标签本身的默认事件也会发生，为了阻止默认事件发生，我们可以使用“prevent”对默认事件进行阻止。具体操作是在绑定点击事件时，将“@click”改为“@click.prevent”，如下所示：

<div id="app">
    <a href="https://home.cnblogs.com/u/chenhuabin/" @click.prevent="fun1">我是一个a标签</a>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#app',
        methods:{      // 此处定义回调函数
            fun1(){
                console.log('Hello Vue! ')
            },
        }
    })
</script>

通过这一方法，点击a标签后，页面并不会跳转，从控制台输出也可以看出，回调函数成功执行。

3.2 阻止事件冒泡：stop¶

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。例如，下面的代码，点击按钮后，会触发两次弹窗：

<div id="app">
    <div @click="fun1">
        <button @click="fun1">按钮</button> 
    </div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#app',
        methods:{      // 此处定义回调函数
            fun1(){
                alert('Hello Vue! ')
            },
        }
    })
</script>

在Vue中，阻止事件冒泡方法很简单，只需要在绑定事件时，将“@click”改为“@clilck.stop”即可，上面示例改为：

<div id="app">
    <div @click="fun1">
        <button @click.stop="fun1">按钮</button> 
    </div>
</div>

多个事件修饰符可以连续使用，例如同时使用prevent和stop：

<div @click.prevent="fun1">
        <a href="https://www.baidu.com" @click.prevent.stop="fun1">按钮</a> <!-- 这里同时使用prevent和stop --> 
</div>

3.3 事件只允许触发一次：once¶

有时候，我们只需要事件被触发一次，即触发一次后，再次触发，将不会执行回调方法。这种功能可以通过“once”实现。

<div id="app">
    <button @click.once="fun1">按钮</button> 
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#app',
        methods:{      // 此处定义回调函数
            fun1(){
                alert('Hello Vue! ')
            },
        }
    })
</script>

在上述代码示例中，只有第一次点击按钮会出现弹窗，后续点击不再有弹窗出现。

4 键盘事件¶

键盘事件是指我们对键盘进行操作时触发的事件，在Vue中，使用“keydown”和“keyup”绑定，分别对应按下键盘和松开键盘，一般使用“keyup”居多（tab键需使用keydown，否则将由于按下tab后焦点转移导致keyup不触发）。在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：如下所示，我们定义一个输入框，完成输入后，按下“Enter”键，在控制台输出输入框内容：

<div id="app">
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#app',
        methods: {
            showInfo(e){
                console.log(e.target.value)
            }
        },
    })
</script>

上述示例中，我们通过“.enter”绑定回车按键事件，除回车外，Vue中对绝大多数常见按键定义了此类别名，方便调用：

• enter
• tab
• delete (捕获“删除”和“退格”键)
• esc
• space
• up
• down
• left
• right

以下是个按键使用是需要注意，因为这4个按键同安作为系统修饰键配合其他按键进行组合使用，所以多事情况下建议不要使用keydown，而是使用keyup：

• ctrl
• alt
• shift
• meta

例如绑定“ctrl+y”事件时，可以这么写：

<div id="app">
    <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
</div>