Vue事件

v-on：绑定事件监听,可简写为@

//v-on  传递自定义参数,事件修饰符
<div id="app">
    <input type="button" @click="dolt(p1,p2，$event)"/>
    <input type="text" @keyup.enter="sayHi">   //只有按下回车才触发
</div>
var app = new Vue({
    el: "#app",
    methods: {
        dolt: function(p1,p2,event){},
        sayHi:function(){}
    }
}
})
//参考文档https://cn.vuejs.org/v2/api/#v-on

---

 

Vue中的事件修饰符：
1. prevent:阻止默认事件（常用）;
2.stop:阻止事件冒泡（常用）;
3.once:事件只触发一次（常用）;
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素是才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

//点击后不转跳示例
        <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

---

Vue键盘

//键盘对象e
        e.keyCode   //案件编码
        e.key

1.Vue中常用的按键别名:
回车=> enter
删除=>delete(捕获"删除”和“退格”键)
退出=>esc
空格=>space
换行=> tab
上=>up
下=>down
左=>left
右=> right
        //按下esc键触发showInfo函数
        <input type="text" placeholder="按下回车提示输入” @keyup.esc="showInfo">

2.Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case（短横线命名)
        CapsLock 要写成 @keyup.caps-lock

3.系统修饰键（用法特殊）:ctr1、alt、shift、meta
        (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
        (2).配合keydown使用:正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐)

5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名