事件处理
监听事件
监听事件就是直接把事件代码写在v-on:里
<button v-on:click="count += 1">add 1</button>
事件处理方法
- 就是把事件放入的methods: {}中调用
内联处理剂中的方法
就是传了参数的method: {}
<button :on:click=say('hi')">Say hi</button>
事件修饰符
修饰符 | 说明 |
---|---|
.stop | 阻止单机事件继续传播(事件冒泡) |
.prevent | 提交事件不再重载页面 |
.capture | 捕获事件(由内到外) |
.self | 只在自身出发时执行事件,不接受冒泡 |
.once | 点击事件只触发一次 |
.passive | 滚动事件的默认行为,比onScroll先执行 |
- 注意可以多个一起使用,但是不同的顺序的结果不一样,比如;用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
//2.1.4版本新增
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
//2.3.0版本新增
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
按键修饰符
可以使用的keyCode或者别名
//如:keyCode <input @keyup:13="submit"/> //别名 <input @keyup:enter="submit"/>
常用别名有:enter,tab,delete,esc,space,up,down,left,riught
自动匹配按键修饰符(2.5版本新增)
以KeyboardEvent.key的形式,kebab-case,就是把键名变成kebab-case这种形式去作为修饰符
//pagedown,只在点击pagedown的时候去使用 <input @keyup.page-down="onPageDown" />
系统修饰符(2.1.0新增)
就是组合键,比如ctrl+enter,alt+13等等,支持这种性质的系统修饰符有ctrl,alt.shift.meta,必须组合才能生效
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
.exact 修饰符
.exact修饰符精确控制组合出发的事件
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
鼠标修饰符
- 特定的 .left(左键) .right(右键) .middle(中键)