按键修饰符

• 在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。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">

    • 
      
      
    
    
  
  

按键修饰符

• 在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。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">

    •