Vue.js v-on 事件绑定

2021/4/6 Vue

# 指令 v-on

Vue使用 v-on 指令监听DOM事件,开发者可以将事件代码通过 v-on 指令绑定到 DOM 节点上。

# 语法糖

v-on可以简写为@


/// v-on:click 
// @click

1
2
3
4

# 实例

HTML

<div id="app">
  <button v-on:click="logInfo()">打印消息(默认消息)</button>
  <br>
  <!-- 不传参数时方法后面的括号可以省略 -->
  <br>
  <button v-on:click="logInfo('这是一条自定义消息')">打印消息(自定义消息)</button>
  <br>
  <br>
  <button v-on:click="console.log('这是一条控制台消息')">打印消息(控制台消息)</button>
</div>
1
2
3
4
5
6
7
8
9
10

JS

let vm = new Vue({
    el: '#app',
    methods: {
      logInfo (msg) {
        console.log(msg || '这是一条默认消息') 
      }
    }
  })
1
2
3
4
5
6
7
8

# 运行结果

# 常见修饰符

  • .stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡
  • .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播)
  • .native: 监听组件根元素的原生事件
  • .capture:与事件冒泡的方向相反,事件捕获由外到内
  • .self:只会触发自己范围内的事件,不包含子元素
  • .once:只会触发一次

# 实例

HTML

<div id="app">
  <form @submit="handleSubmit">
    <h2>不使用修饰符时</h2>
    <button type="submit">提交</button>
  </form>

  <form @submit.prevent="handleSubmit">
    <h2>使用.prevent修饰符时</h2>
    <button type="submit">提交</button>
  </form> 
</div>
1
2
3
4
5
6
7
8
9
10
11

JS

let vm = new Vue({
    el: '#app',
    data () {
      return {
        counter: 0
      }
    },
    methods: {
      handleSubmit () {
        console.log(`submit ${++this.counter} times`)
      }
    }
  })
1
2
3
4
5
6
7
8
9
10
11
12
13

# 运行结果

# 总结

不使用.prevent修饰符时,未指定form表单的action时,表单会被提交到当前的URL,对应的表现就是页面重新加载。使用.prevent修饰符时,页面没有被重新加载。

# 按键修饰符

Vue允许将按键键值作为修饰符来使用,如绑定按键:

<input @keyup.enter="submit">
1
  • .enter => // enter键
  • .tab => // tab键
  • .delete (捕获“删除”和“退格”按键) => // 删除键
  • .esc => // 取消键
  • .space => // 空格键
  • .up => // 上
  • .down => // 下
  • .left => // 左
  • .right => // 右

# 组合修饰符

仅在以下修饰符对应的按键被按下时,才会触发鼠标或键盘事件监听器

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">做一些操作</div>
1
2
3
4
5
  • .ctrl
  • .alt
  • .shift
  • .meta

# 实例

HTML

<div id="app">
  <button  @click="logSingle" >点击此处</button>
</div>
1
2
3

JS

let vm = new Vue({
    el: '#app',
    methods: {
      logSingle (event) {
        if (!event.ctrlKey) {
          console.log('点击!')
        } 
		else
		{
			console.log('ctrl+点击!')
		}
     }
1
2
3
4
5
6
7
8
9
10
11
12

# 运行结果

单击时

ctrl+单击时

Last Updated: 2021/12/19上午12:27:30