【郑州校区】前端笔记Vue项目day1(四） - 黑马程序员技术交流社区

在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

[AppleScript] 纯文本查看 复制代码

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->

<input v-on:keyup.13="submit">



<!-- -当点击enter 时调用 `vm.submit()` -->

<input v-on:keyup.enter="submit">



<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->

<input type="text" v-on:keyup.enter.space="alertMe" >



常用的按键修饰符

.enter =>    enter键

.tab => tab键

.delete (捕获“删除”和“退格”按键) =>  删除键

.esc => 取消键

.space =>  空格键

.up =>  上

.down =>  下

.left =>  左

.right =>  右



<script>

        var vm = new Vue({

        el:"#app",

        methods: {

              submit:function(){},

              alertMe:function(){},

        }

    })



</script>

自定义按键修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名

[AppleScript] 纯文本查看 复制代码

<div id="app">

    预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法

    <input type="text" v-on:keydown.f5="prompt()">

</div>



<script>

        

    Vue.config.keyCodes.f5 = 116;



    let app = new Vue({

        el: '#app',

        methods: {

            prompt: function() {

                alert('我是 F5！');

            }

        }

    });

</script>

v-bind
- v-bind 指令被用来响应地更新 HTML 属性
- v-bind:href 可以缩写为 :href;
- [AppleScript] 纯文本查看 复制代码
```


<img v-bind:src="imageSrc">





<img :src="imageSrc">
```