事件处理

事件的基本使用：
1,使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;
2,事件的回调需要配置在methods对象中，最终会在vm上;(没有代理)
3,methods中配置的函数，不要用箭头函数！否则this就不是vm了;
4,methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5.@click="demo”和@click="demo($ event)”效果一级，但后者可以传参;

元素绑定事件

@ (v-on:event=“method”)
event 事件
event.target 触发事件的目标

无参

<button @click="noParaMethod">无参事件处理</button>

有参，事件用 `$event` 占位

<button @click="paraMethod($event,'有参事件处理')">有参事件处理</button>

实例:

<body>
  <div id="root">
    <button @click="noParaMethod">无参事件处理</button>
    <button @click="paraMethod($event,'有参事件处理')">有参事件处理</button>
  </div>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: '#root',
      methods: {
        noParaMethod() {
          console.log('我是无参构造函数');
        },
        paraMethod(e, para) {
          console.log(e.target, ', para:', para)
        }
      }
    })
  </script>
</body>

事件修饰符(6个)

修饰符连用:
@event…修饰符1.修饰符2
在这里插入图片描述

.prevent

阻止默认行为

.stop

阻止冒泡

<body>
  <!-- 容器 -->
  <div id="root">
    <div @click="hello">
      <button @click.stop="hello">hello</button>
    </div>
  </div>

  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: '#root',
      data() {
        return {

        }
      },
      methods: {
        hello() {
          alert('hello')
        }
      }
    })
  </script>
</body>

.once

事件只触发一次

捕获时触发事件

.self

在这里插入图片描述

键盘事件

修饰符连用:
@event.按键1.按键2

九个常用按键别名，与keyup、keydown配合使用

<body>
  <!-- 容器 -->
  <div id="root">
    <label for="name">你的名字: </label>
    <input type="text" name="name" id="name" @keydown.enter="showInfo">
  </div>

  <script>
    Vue.config.productionTip = false; // 阻止 Vue 在启动时生成的生产提示
    new Vue({
      el: '#root',
      data() {
        return {

        }
      },
      methods: {
        showInfo(e) {
          console.log('按键编码:', e.keyCode)
          console.log('按键名字:', e.key)
          console.log('按键内容:', e.target.value)
        }
      }

    })
  </script>
</body>