zoukankan      html  css  js  c++  java
  • VueJs之事件处理器

    1.v-on监听事件

    2.除了直接绑定到一个方法,也可以用内联 JavaScript 语句:

     1 <div id="app">
     2   <button v-on:click="say('hi')">Say hi</button>
     3   <button v-on:click="say('what')">Say what</button>
     4 </div>
     5 
     6 <script>
     7 new Vue({
     8   el: '#app',
     9   methods: {
    10     say: function (message) {
    11       alert(message)
    12     }
    13   }
    14 })
    15 </script>

    事件修饰符

    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

    Vue.js通过由点(.)表示的指令后缀来调用修饰符。

    • .stop
    • .prevent
    • .capture
    • .self
    • .once
    •  1 <!-- 阻止单击事件冒泡 -->
       2 <a v-on:click.stop="doThis"></a>
       3 <!-- 提交事件不再重载页面 -->
       4 <form v-on:submit.prevent="onSubmit"></form>
       5 <!-- 修饰符可以串联  -->
       6 <a v-on:click.stop.prevent="doThat"></a>
       7 <!-- 只有修饰符 -->
       8 <form v-on:submit.prevent></form>
       9 <!-- 添加事件侦听器时使用事件捕获模式 -->
      10 <div v-on:click.capture="doThis">...</div>
      11 <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
      12 <div v-on:click.self="doThat">...</div>
      13 
      14 <!-- click 事件只能点击一次,2.1.4版本新增 -->
      15 <a v-on:click.once="doThis"></a>

      按键修饰符

      Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

    • 全部的按键别名:

      • .enter
      • .tab
      • .delete (捕获 "删除" 和 "退格" 键)
      • .esc
      • .space
      • .up
      • .down
      • .left
      • .right
      • .ctrl
      • .alt
      • .shift
      • .meta
      • 1 <p><!-- Alt + C --> 2 <input @keyup.alt.67="clear"> 3 <!-- Ctrl + Click --> 4 <div @click.ctrl="doSomething">Do something</div> 
    往事如烟,余生有我.
  • 相关阅读:
    什么是用户画像?具体公司体现在哪?什么作用呢?
    用户画像后台表设计
    【转载】Oracle Spatial中SDO_Geometry详细说明
    【转载】ArcGIS中的WKID
    MyBatis 判断条件为等于的时候,常量需要加 .toString()
    Oracle最大进程连接数问题
    JAVA WEB基础巩固之Json、Ajax
    Eclipse常用功能
    UML类图学习
    由uploadfive看servlet
  • 原文地址:https://www.cnblogs.com/assistants/p/10302712.html
Copyright © 2011-2022 走看看