zoukankan      html  css  js  c++  java
  • v-on指令监听dom事件

    一、无参

    <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只会阻止元素上的点击。

  • 相关阅读:
    [JOISC2017]細長い屋敷
    Gym102471C Dirichlet k-th root
    CF1264F Beautiful Fibonacci Problem
    Luogu P4619 [SDOI2018]旧试题
    AGC001F Wide Swap
    BZOJ4289 [PA2012]Tax
    Luogu P4366 [Code+#4]最短路
    Luogu P1407 [国家集训队]稳定婚姻
    CF1023F Mobile Phone Network
    BZOJ3563 DZY Loves Chinese
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_dom_directive_event.html
Copyright © 2011-2022 走看看