按键修饰符
在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
[mw_shl_code=applescript,true]<!-- 只有在 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>[/mw_shl_code] 自定义按键修饰符别名 在Vue中可以通过config.keyCodes自定义按键修饰符别名 [mw_shl_code=applescript,true]<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>[/mw_shl_code] v-bind v-bind 指令被用来响应地更新 HTML 属性 v-bind:href 可以缩写为 :href; [mw_shl_code=applescript,true]<!-- 绑定一个属性 --> <img v-bind:src="imageSrc">
<!-- 缩写 --> <img :src="imageSrc">[/mw_shl_code]
