事件监听v-on与修饰符

事件监听v-on:

 <!--有一个参数传入,1、没有括号的，传入的是浏览器的event事件    2、有括号没有参数的 ，是undefined  3、有参数 ，正确执行方法-->
  <button @click = "btClick3">按钮3</button>
  <button @click = "btClick3()">按钮3（）</button>
  <button @click = "btClick3('111')">按钮3</button>
  <!--需要一个传入一个参数，一个event事件 ,传入浏览器event事件，$event-->
  <!-1、没有括号的，第一个参数当做event ，第二个参数是undefined -->
  <!--2、有括号的没有参数的，参数都是undefined -->
  <!-3、有括号，一个参数的，第一个参数执行，第二个是undefined -->
  <!--4、两个参数都传入，传入浏览器event事件，$event，正确的-->
  <button @click = "btClick4">按钮4</button>
  <button @click = "btClick4()">按钮4()</button>
  <button @click = "btClick4('444')">按钮4</button>
  <button @click = "btClick4('444',$event)">按钮4</button>

修饰符：

.stop：

• .stop - 调用 event.stopPropagation()。

   修饰符的作用， 阻止冒泡

.prevent

• .prevent - 调用 event.preventDefault()。

  .prevent修饰符的作用 ，阻止默认行为

keyup

• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

  监听键盘的键出keyup，键入keydown，  键keyup.enter等

.once

• .once - 只触发一次回调。

<div id="app">
  <form action="" style="margin: 10px">
  <div>{{counter}}</div>
  <!--v-on 原生写法-->
  <button v-on:click = "counter++">按钮+</button>
  <!--没有参数传入的方法 ，一致-->
  <button @click = "btClick2">按钮2</button>
  <button @click = "btClick2()">按钮2（）</button>
  <!--有一个参数传入,没有括号的传入的是浏览器的event事件，有括号没有参数的 是undefined ，有参数 ，正确执行方法-->
  <button @click = "btClick3">按钮3</button>
  <button @click = "btClick3()">按钮3（）</button>
  <button @click = "btClick3('111')">按钮3</button>
  <!--需要一个传入一个参数，一个event事件 ,传入浏览器event事件，$event-->
  <!--没有括号的，第一个参数当做event ，第二个参数是undefined -->
  <!--有括号的没有参数的，参数都是undefined -->
  <!--有括号，一个参数的，第一个参数执行，第二个是undefined -->
  <!--两个参数都传入，传入浏览器event事件，$event，正确的-->
  <button @click = "btClick4">按钮4</button>
  <button @click = "btClick4()">按钮4()</button>
  <button @click = "btClick4('444')">按钮4</button>
  <button @click = "btClick4('444',$event)">按钮4</button>
  </form>
  <!-- .stop 修饰符的作用， 阻止冒泡-->
  <div  @click = "divClick">
    aaaa
    <button @click.stop = "butClick">不冒泡按钮</button>
  </div>
  <!-- .prevent修饰符的作用 ，阻止默认行为-->
  <form action="baidu">
    <input type="submit" value= '阻止默认提交' @click.prevent = "subClick">
  </form>
  <!-- 监听键盘的键出keyup，键入keydown，  键keyup.enter-->
  <div>
    <input type="text" @keyup = "keyUp">
  </div>
  <!-- .once 只触发一次-->
  <div>
    <button @click.once = "onceClick">一次按钮</button>
  </div>
</div>