Vue--键盘修饰符

键盘修饰符

1.概念与作用:

>相当于是event.keycode来绑定按键事件
>onclick onscroll ondblclick 都是鼠标事件....
>keyup keydown keypress(keydown + keyup)
>键盘修饰符是给上述三类key做绑定用的。

2.定义键盘修饰符:

//键盘修饰符定义  定义回车并且去f2别名  13 对应的是enter 回车键
Vue.config.keyCodes.f2 = 13;

3.使用

	<!-- 按enter键 抬起触发 -->
    <input type="text" @keyup.enter="fn">按键盘enter键触发<br>
    <input type="text" @keyup.13="fn">按键盘enter键触发<br>

    <!-- 按"删除"和"退格"键 抬起触发 -->
    <input type="text" @keyup.delete="fn">按键盘"删除"和"退格"键触发<br>

    <!-- 按tab键 抬起触发 --> 
    只能在keydown时候进行触发。
    <input type="text" @keydown.tab="fn">按键盘tab键触发<br>

    <!-- 按 esc 键 抬起触发 -->
    <input type="text" @keyup.esc="fn">按键盘 esc 键触发<br>

    <!-- 按 space 键 抬起触发 -->
    <input type="text" @keyup.space="fn">按键盘 space 键触发<br>

    <!-- 按 上 下 左 右 键 抬起触发 -->
    <input type="text" @keyup.up="fn">按键盘 up 键触发<br>
    <input type="text" @keyup.down="fn">按键盘 down 键触发<br>
    <input type="text" @keyup.left="fn">按键盘 left 键触发<br>
    <input type="text" @keyup.right="fn">按键盘 right 键触发<br>

	<!-- Ctrl、Alt、shift、window在触发时也有要求 -->
	在配合keyup使用的时候：按下修饰符的同时，再按下其他键，随后释放其他按键，事件才被触发。
    在配合keydown使用的时候：正常触发事件。


    <!-- 只要 Ctrl 被按下并点击就触发 -->
    <button @click.ctrl="fn">按ctrl键并点击触发</button>
    <!--（exact精确按下某键） 有且只有 Ctrl 被按下并点击的时候才触发 -->
    <button @click.ctrl.exact="fn">按ctrl键并点击触发</button>

使用场景：

<input type="text" name="xx" id="ip" @keyup.enter="showText" v-model= "text">
<script type="text/javascript">
 	
    const vm = new Vue({
        el:'#root',
        data:function(){
            return {
                text:''
            }
        },
        methods:{
            function showText(){
        		alert(text);
 			}
        }
    })
</script>