八、事件处理

事件处理

（1.）监听事件

使用v-on指令监听DOM事件。在触发时运行js代码

<div id="app">
	<button v-on:click="counter += 1">加1</button>
	<p>The number {{counter}}</p>
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			counter: 0
		}
	})
</script>

事件处理方法

v-on可以接收一个需要调用的方法名称。

 <div id='app'>
        <button v-on:click="add">加1</button>
	    <p>The number {{counter}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                counter: 0
            },
            methods:{
                add(){
                    this.counter +=1
                }
            }
	    })
    </script>

内联处理器中方法

在内联语句处理器中访问原始DOM事件，用特殊变量$event将它传入方法：

	<div id='app'>
        <button v-on:click="warn('From cannot be submitted yet.',$event)">Submit</button>
	    <p>The number {{counter}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
   
            },
            methods:{
                warn: function (message, event) {
                    if (event) {
                        event.preventDefault()
                        console.log(event)
                    }
                    alert(message)
                }
            }
	    })
        
    </script>

事件修饰符

vue为v-on提供了事件修饰符，通过点开头的指令后缀来表示的。

• .stop 阻止事件继续传播
• prevent 阻止默认事件
• capture
• self
• once
• passive

按键码

v-on:keyup.13="submit"也可使用

• enter
• tab
• delete （捕获删除和退格键）
• esc
• space
• up
• down
• left
• right

Vue.config.keyCodes.f1 = 12   //对象自定义按键修饰符别名

系统修饰键

用修饰符来实现仅在按下相应按键时才触发鼠标或键盘的监听器。

• ctrl
• alt
• shift
• meta
• exact 允许控制由精确地系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

鼠标按键修饰符

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

• left
• right
• middle