Vue的事件处理

Vue的事件处理

vue的事件处理主要分为三类：

• 事件的绑定监听
  1. v-on:xxx=“fun”
  2. @xxx=“fun”
  3. @xxx=“fun(参数)”
  4. 默认事件形参: event
  5. 隐含属性对象: $event
• 事件修饰符
  1. prevent : 阻止事件的默认行为 event.preventDefault()
  2. stop : 停止事件冒泡 event.stopPropagation()
• 按键修饰符
  1. keycode : 操作的是某个 keycode 值的键
  2. keyName : 操作的某个按键名的键(少部分)

具体使用代码如下：

<div id="demo">
			<h2> 1.事件绑定</h2>
			<button @click="test1">test1</button>
			<button @click="test2('hello world')">test2</button>
			<button @click="test3()">test3</button>
			<button @click="test4('123',$event)">test4</button>

			<h2> 2.事件修饰符</h2> >

			<div style="width: 200px; height: 200px; background: red;&