Vue学习（6）事件处理

监听事件

用 v-on 指令监听 DOM 事件

<button v-on:click="count+=1">点击</button>
<p>点击了{{count}}次</p>

Demo:

<div id="app">
    <button @click="test1">获取按钮名称</button>
    <button @click="test2('jason')">获取参数值</button>
    <button @click="test3('jason',$event)">获取参数值及按钮名称</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            test1(event) {
                alert(event.target.innerText)
            },
            test2(msg) {
                alert(msg)
            },
            test3(msg, event) {
                alert(msg + '---' + event.target.innerHTML)
            }
        }
    })
</script>

事件修饰符

修饰符是由.开头的指令后缀来表示的
.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">