前端笔记Vue项目第一天 三

按键修饰符

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

<!-- 只有在 `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自定义按键修饰符别名

<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;

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
 
<!-- 缩写 -->
<img :src="imageSrc">