116 lines
1.6 KiB
Markdown
116 lines
1.6 KiB
Markdown
# vue 方法（事件处理）
|
||
|
||
### 事件监听
|
||
|
||
可以用v-on指令监听DOM事件，并在触发时运行一些javascript v-on 简写为@
|
||
|
||
事件处理方法
|
||
|
||
- 直接触发javascript代码(不推荐)
|
||
|
||
示例：
|
||
|
||
```
|
||
<div id="app" >
|
||
<button v-on:click="alert('hello!!!')">测试</button>
|
||
</div>
|
||
```
|
||
|
||
- 在内联javascript 语句中调用方法（不推荐）
|
||
|
||
```
|
||
<div id="example-3">
|
||
<button v-on:click="say()">Say hi</button>
|
||
</div>
|
||
```
|
||
|
||
```
|
||
new Vue({
|
||
el: '#example-3',
|
||
methods: {
|
||
say: function () {
|
||
alert('hi')
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
|
||
|
||
- 事件处理方法（推荐）
|
||
|
||
```
|
||
<div id="app" >
|
||
<button v-on:click="say">测试</button>
|
||
</div>
|
||
```
|
||
|
||
```
|
||
new Vue({
|
||
el: '#example-3',
|
||
methods: {
|
||
say: function () {
|
||
alert('hi')
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
> methods中注册的是触发时执行的函数，也叫方法
|
||
|
||
|
||
|
||
### 事件修饰符
|
||
|
||
- `.stop`
|
||
|
||
> 等同于JavaScript中的event.stopPropagation()，防止事件冒泡
|
||
|
||
- `.once`
|
||
|
||
> 只会触发一次
|
||
|
||
使用：
|
||
|
||
```
|
||
<a v-on:click.stop="doThis"></a>
|
||
```
|
||
|
||
可以同时使用多个修饰符
|
||
|
||
```
|
||
<a v-on:click.stop.once="doThat"></a>
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
### 按键修饰符（自行拓展）
|
||
|
||
监听键盘事件：
|
||
|
||
@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)
|
||
|
||
```
|
||
获取按键的键码 e.keyCode
|
||
@keyup.delete 删除键
|
||
|
||
@keyup.enter 回车
|
||
|
||
@keyup.esc ESC
|
||
|
||
@keyup.space 空格
|
||
|
||
@keyup.tab TAB
|
||
|
||
@keyup.left 左键
|
||
|
||
@keyup.right 右键
|
||
|
||
@keyup.up 上键
|
||
|
||
@keyup.down 下键
|
||
```
|
||
|