Vue—事件处理

Vue中的事件修饰符：

1、prevent：阻止默认事件

<!-- prevent：阻止默认事件 -->
        <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

2、stop：阻止事件冒泡

<!-- stop：阻止事件冒泡 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

3、once：事件只触发一次

<!-- once：事件只触发一次 -->
        <button @click.once="showInfo">点我提示信息</button>

4、capture：使用事件的捕获模式

<!-- capture：使用事件的捕获模式 -->
        <div class="box1" @click.capture="showmessage(1)">div1
            <div class="box2" @click="showmessage(2)">
                div2
            </div>
        </div>

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

<!-- self：只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>

6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!-- passive：事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul @scroll="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

修饰符可以连续写

<!-- 修饰符连续写，先阻止冒泡，再阻止默认事件 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop.prevent="showInfo">点我提示信息</button>
        </div>

Vue中的键盘事件：

1、Vue中常用的按键别名：
1）回车：enter
2）删除：delete（捕获“删除”和“退格”键）
3）退出：esc
4）空格：space
5）换行：tab（特殊，必须配合keydown使用）
6）上：up
7）下：down
8）左：left
9）右：right

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
<input type="text" placeholder="按下删除提示输入" @keyup.delete="showInfo">
<input type="text" placeholder="按下退出提示输入" @keyup.esc="showInfo">
<input type="text" placeholder="按下空格提示输入" @keyup.space="showInfo">
<input type="text" placeholder="按下换行提示输入" @keydown.tab="showInfo">
<input type="text" placeholder="按下上提示输入" @keyup.up="showInfo">
<input type="text" placeholder="按下下提示输入" @keyup.down="showInfo">
<input type="text" placeholder="按下左提示输入" @keyup.left="showInfo">
<input type="text" placeholder="按下右提示输入" @keyup.right="showInfo">

2、Vue未提供别名的按键，可以使用按键原始的Key值去绑定，但要注意转为kebab-case（短横线命名）

<input type="text" placeholder="按下Capslock提示输入" @keyup.caps-lock="showInfo">

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

<input type="text" placeholder="keyup按下 ctrl+任意键提示输入" @keyup.ctrl="showInfo">
<input type="text" placeholder="keydown按下 ctrl键提示输入" @keydown.ctrl="showInfo">

<input type="text" placeholder="keyup 按下ctrl+y提示输入" @keyup.ctrl.y="showInfo">

4、也可以使用keyCode去指定具体的按键（不推荐）
5、Vue.config.keyCodes.自定义键名=键码。可以去定制按键别名

<input type="text" placeholder="按下自定义名称键提示输入" @keydown.huiche="showInfo">
<script>
Vue.config.keyCodes.huiche = 13;//keycode=13代表的是回车键
</script>