v-on指令监听dom事件

Posted 2020-10-10 专注前端开发

一、无参

<div id="J_app">
  <button v-on:click="eatWhat">吃啥</button>
</div>
var vapp = new Vue({
  el: ‘#J_app‘,
  data: {
    info: ‘我想吃苹果‘
  },
  methods: {
    eatWhat: function () {
      alert(this.info) 
    }
  }
})

二、有参

<div id="J_app">
  <p>{{ info }}</p>
  <button v-on:click="eatWhat(‘苹果‘)">吃啥</button>
</div>
var vapp = new Vue({
  el: ‘#J_app‘,
  data: {
    info: ‘我想吃‘
  },
  methods: {
    eatWhat: function (fruit) {
      alert(this.info  + fruit)
    }
  }
})

三、事件修饰符

1、.stop

<a v-on:click.stop="doSomething">阻止单击事件冒泡</a>

2、.prevent

<form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form>
<form v-on:submit.prevent>只有修饰符</form>

3、.capture

<a v-on:click.capture="doSomething">添加事件侦听器时使用事件捕获模式</a>

4、.self

<div v-on:click.self="doSomething">事件在元素本身触发回调，而不是子元素。</div>

5、.once

<div v-on:click.once="doSomething">点击事件触发一次，不像其它只能对原生的DOM事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。</div>

<a v-on:click.stop.prevent="doSomething">修饰符可以串联</a>

修饰符串联顺序不同，效果有可能不同。@click.prevent.self会阻止所有的点击，而@click.self.prevent只会阻止元素上的点击。