vue 事件方法 / 事件修饰符 / 按键修饰符

事件方法

• 方法可以传自定义参数
• 事件对象：调用方法时传参数 $ event， @click="get($event)",在方法里就可以获取到事件对象 event。
• 使用 this 在一个方法里调用另一个方法
• 多事件处理程序：事件可以一次触发多个方法，@click="get($event),get2()"

事件修饰符

• .stop：等同于js中的event.stopPropagation()，防止事件冒泡
• .prevent：等同于js中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
• .capture：与事件冒泡的方向相反，事件捕获
• .self：只会触发自己范围内的事件，不包含子元素
• .once：只会触发一次

按键修饰符

• .enter 按回车键
• .tab tab键
• .delete (捕获“删除”和“退格”按键) 删除键
• .esc 取消键
• .space 空格键
• .up 上
• .down 下
• .left 左
• .right 右

<template>
<div>
  <h3>{{title}}</h3>
  <div @click="click1()">
    <!-- 事件绑定可以一次触发多个方法 -->
    <button @click="get($event),get2()">button</button>  
  </div>
  <!-- 使用事件对象阻止默认事件 -->
  <a href="" @click="open1($event)">a标签1</a>
  <br>
  <!-- 使用vue事件修饰符阻止默认事件 -->
  <a href="" @click.prevent="open2()">a标签2</a>
  <!-- 使用事件对象判断是否输出回车键，会触发很多次 -->
  <input type="text" @keyup="inputFn1($event)">
  <!-- 使用按键修饰符，只有按回车键才会触发 -->
  <input type="text" @keyup.enter="inputFn2()">
</div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title:'111'
    }
  },
  methods:{
    click1(){
      console.log('1');
    },
    get(e){
      console.log(e.currentTarget);
      e.stopPropagation()   //阻止默认冒泡事件
    },
    get2(){
      console.log('get2');
    },
    open1(e){
      console.log('open 1');
      e.preventDefault()   //阻止默认事件
    },
    open2(){
      console.log('open 2');
    },
    inputFn1(e){   
      console.log(e.keyCode);
      if(e.keyCode === 13){
        console.log('按了回车键');
      }
    },
    inputFn2(){  
      console.log('按了回车键');
    }
  }
}
</script>