这是我参与「第四届青训营 」笔记创作活动的的第19天

事件监听

在前端开发中，我们需要经常和用于交互。 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等 在Vue中如何监听事件呢?使用v-on指令

v-on介绍

口作用:绑定事件监听器 口缩写:@ 语法糖：v-on:click = @click 口预期:Function | Inline Statement | Object 口参数:event

下面，我们就具体来学习v-on的使用。

<div id="app">
  <h4>{{counter}}</h4>
  <button v-on:click="counter++">+</button>
  <button v-on:click="counter--">-</button>
  <!-- <button v-on:click="increment">+</button>
  <button @click="decrement">-</button> -->
</div>

<script src='./vue.js'></script>
<script>
    const app = new Vue({
        el : '#app',
        data : {
            counter : 0,
        }, 
        methods : {
          increment (){
            counter++;
          },
          decrement(){
            counter--;
          }
        },
        computed : {}
    })
</script>

v-on参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题 情况一: 如果该方法不需要额外参数，那么方法后的（）可以不添加。 情况二: 如果方法本身中有一个参数，在写方法时没有括号，那么会默认将浏览器生成的原生事件对象event作为参数传递进去 情况三: 如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<div id='b'>
<button @click="btn1click()">按钮1</button><br>
<button @click="btn2click('jack')">按钮2</button>
<button @click="btn2click()">按钮3</button>
<button @click="btn2click">按钮4</button><br>
<button @click="btn3click('Rose',$event)">按钮5</button>
<button @click="btn3click('Rose')">按钮6</button>

<h4>点击次数:f{counter]}</h4>
<button eclick="handleAdd">+l</button>
</div>
<script src='./vue.js'></script>
<script>
  const b = new Vue({
      el : '#b',
      data : {
          message : '你好',
      },
      methods : {
        btn1click(){
          console.log("btn1click");
        },
        btn2click(event){
          console.log('---------',event);
        },
        btn3click(name,event){
          console.log('--------- '+'hello '+name);
          console.log(event);
        }
      },
      computed : {}
  })
</script>

v-on修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理。

Vue提供了修饰符来帮助我们方便的处理一些事件∶

.stop - 调用event.stopPropagation()

.prevent - 调用event.preventDefault()

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 键盘编码（要查表） || 简写

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

<!--停止冒泡-->
<button @click.stop="doThis"></button>
<!--阻止默认行为-->
<button @click.prevent="doThis"></button>
<!--阻止默认行为，没有表达式-->
<form @submit.prevent></form>

<!--串联修饰符-->
<button @click.stop.prevent="doThis"> </button>

<!-- 键修饰符,键别名 -->
<input @keyup.enter= "onEnter">
<!--键修饰符,键代码 -->
<input @keyup.13= "onEnter">

<!--点击回调只会触发一次-->
<button @click.once="doThis"></button>

<div id='c'>
  <div @click="divclick">
    aaaaaaaaaa
    <button @click.stop="btnclick">button</button>
  </div>
  <br>
  <!-- 阻止默认行为，阻止跳转到页面 -->
  <form action="baidu">
    <input type="submit" value="提交" @click="submitt">
    <!-- <input type="submit" value="提交" @click.prevent="submitt"> -->
  </form>

  <!-- 监听某个特定键盘的键的点击 -->
  <!-- <input type="text" @keyup="keyupp"> -->
  <input type="text" @keyup.enter="keyupp">  
  <!-- 回车键 -->

  <button @click.once="btn2Click">按钮</button>

</div>
<script src='./vue.js'></script>
<script>
    const c = new Vue({
        el : '#c',
        data : {
            message : '你好',
        },
        methods : {
          btnclick(){
            console.log('btnclick');
          },
          divclick(){
            console.log('divclick');
          },
          submitt(){
            console.log('submitt');
          },
          keyupp(){
            console.log('keyupp');
          },
          btn2Click(){
            console.log('btn2Click');
          }
        },
        computed : {}
    })
</script>