vue事件处理

vue事件处理

  • 事件添加的形式

    1. 原生事件的添加形式有以下:

      • dom.on+eventType = 事件处理程序

      • 事件监听

      • js定义函数,HTML结构中调用函数

    2. Vue事件添加形式

      • js定义函数,HTML结构中调用函数。

        因为Vue是通过指令操作DOM

        原生:

      <body onload = "load()">
            <div id="app"></div>
      </body> 
      

      Vue:

      ​ vue事件监听处理 v-on+eventType /@eventType

      <div v-on:click = "事件处理程序"></div>
      

      事件处理程序放在选项/ methods[ 方法 ]

      Vue的事件是原生事件,事件对象也是原生事件对象,$event

      <h2>事件对象是参数</h2>
                  <button @click='eHandler($event,10)'>
                      点点
                  </button>
      
       methods:{
           eHandler(e,num){
                  console.log('e',e);
                  console.log('num',num);
              }
              },
      
  • 修饰符
    参考文档: link

    1. 类型
    • 事件修饰符

      • .stop
      • .prevent
      • .capture
      • .self
      • .once
      • .passive
      <!-- 阻止单击事件继续传播 -->
      <div class="small" @click.stop='smallfn'></div>
      
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      
      <!-- 修饰符可以串联 -->
      <a v-on:click.stop.prevent="doThat"></a>
      
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      
      <!-- 添加事件监听器时使用事件捕获模式 -->
      <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
      <div v-on:click.capture="doThis">...</div>
      
      <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
      <!-- 即事件不是从内部元素触发的 -->
      <div v-on:click.self="doThat">...</div>
      
    • 按键修饰符

      • .enter /.13

        示例代码:

        <input type="text" @keyup.enter='submit($event)'>
        <input type="text" @keyup.13='submit($event)'>
        
      • .tab

      • .delete (捕获“删除”和“退格”键)

      • .esc

      • .space

      • .up

      • .down

      • .left

      • .right

      2.1.0 新增

      ​ 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

      • .ctrl

      • .alt

      • .shift

      • .meta

        注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。

      2.2.0 新增

      • .left
      • .right
      • .middle

      2.5.0 新增

      • .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

        <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
        <button @click.ctrl="onClick">A</button>
        
        <!-- 有且只有 Ctrl 被按下的时候才触发 -->
        <button @click.ctrl.exact="onCtrlClick">A</button>
        
        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button @click.exact="onClick">A</button>
        

        这些修饰符会限制处理函数仅响应特定的鼠标按钮。

    1. 修饰符作用

      简化代码,修饰事件

你可能感兴趣的:(JS)