【郑州校区】前端笔记Vue项目第一天三 - 黑马程序员技术交流社区

[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">