vue2中的事件绑定、事件修饰符、键盘事件

1、事件绑定

1.使用v-on:xxx 或@xxx 绑定事件,其中xxx是事件名称;

2.事件的回调需要配置在meithods对象中,最终会在vm上（也被vm代理）;

3:methods中配置的函数,也是被vue管理的函数，被vm代理，不要用箭头函数,否则this就不指向vm实例了,而指向了window;

4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或 组件实例对象;

5.@click="demo"和@click="demo($event)"效果一致,但后者可以传参;

2、事件修饰符

1.prevent:阻止默认事件(常用) e.preventDefault();

2.stop:阻止事件冒泡(常用) e.stopPropagation();

3.once:事件只触发一次(常用)

4.capture:使用事件的捕获模式;

5.self:只有event.target是当前操作的元素时才触发事件;

6.passive:事件的默认行为立即执行,无需等待事件回调执行完成;

 使用小技巧:

事件修饰符可以连写:以下两种写法效果一样;

<a href="https://www.baidu.com" @click.prevent.stop="showInfo">点击</a> 先阻止默认行为再阻止冒泡

<a href="https://www.baidu.com" @click.stop.prevent="showInfo">点击</a> 先阻止冒泡,载阻止默认行为

<div id="app">
     <h2>欢迎来到{{title}}学习</h2>

    <!-- prevent 阻止默认行为 -->
     <a href="https://www.baidu.com" @click.prevent="showInfo">点击</a>

     <!-- stop 阻止冒泡 -->
     <div class="box1"@click="showInfo">
       <div class="box2" @click.stop="showInfo"></div>
     </div>

     <!-- once 事件只发生一次 -->
     <button @click.once="showInfo">事件发生一次后失效</button>
     
     <!-- capture 使用事件的捕获模式 先打印1,在打印2,如果没有使用capture,先打印2再打印1 -->
     <div class="box1"@click.capture="showInfo1">
      <div class="box2" @click="showInfo2"></div>
    </div><br>

    <!-- self 只有event.target是当前操作的元素时才触发事件 -->
    <div class="box1"@click.self="showInfo1">
      <div class="box2" @click="showInfo2"></div>
    </div>

    <!-- passive 事件的默认行为立即执行,无需等待事件回调执行完成; 
      正常情况下(不使用passive),滑动混轮,先执行回调函数srollevent,执行完回调函数后在执行默认行为滚动滚轮
    -->
    <ul class="box3" @wheel.passive="scrollevent">
      <li>1</li><br>
      <li>2</li><br>
      <li>3</li><br>
      <li>4</li><br>
    </ul>

  </div>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false; // 阻止Vue在启动时生成 生产提示
    let vm = new Vue({
      el: '#app',
      data: {
        title: '尚硅谷'
      },
      methods: {
        showInfo(e){
          // e.preventDefault();
          // e.stopPropagation();
          alert('欢迎进来')
        },
        showInfo1(e){
          console.log(e.target) // box2元素
          console.log(1)
        },
        showInfo2(e){
          console.log(e.target) //box2元素
          console.log(2)
        },
        scrollevent(){
          for(let i = 0; i<10000; i++){
            console.log('@')
          }
        }
      }
    })
  </script>

3、键盘事件

1.Vue中常用的按键别名:

        回车: => enter

        删除: => delete(捕获"删除"和"退格"键)

        退出: => esc

        空格: => space

        换行: => tab // tab自身有切换焦点的作用,所以必须配合 keydown 使用,不能使用keyup

        上: => up

        下: => down

        左: => left

        右: => right

2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意:多个词语组成的需要转换为短横线命名,比如:caps-lock

3.系统修饰键(用法特殊) ctrl, alt, shift, meta

        (1).配合keyup使用: 按下修饰符键的同时,再按下其他键,随后释放其他键,事件才被出发;         (2).配合keydown使用: 正常触发事件即可;

        (3).指定其他键：@keyup.ctrl.y = "事件名" 4.也可以使用keyCode去指定具体的按键 (不推荐:keyCode特性已经从web中移出，虽然部分浏览器任然支持，但不建议使用) 5.Vue.config.keyCode.自定义键名 = 键码,可以去指定按键别名,(也不太推荐,一般常用地8个就够用了，因为存在不同的键盘keyCode不统完全一) 6.不是所有的按键都有键盘事件；

<div id="app">
<h2>欢迎来到{{title}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
Vue.config.productionTip = false; // 阻止Vue在启动时生成 生产提示
Vue.config.keyCodes.huiche = 13
let vm = new Vue({
  el: '#app',
  data: {
    title: '尚硅谷'
  },
  methods: {
    showInfo(e){
      console.log(e.key)
      console.log(e.keyCode)
      // console.log(e.target.value)
    }
  }
})
</script>