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

    一、事件处理方法

    1、格式

    • 完整格式:v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)"

          缩写格式:@事件名="函数名" 或 @事件名="函数名(参数……)"

         注意:@后面没有冒号

    • event :函数中的默认形参,代表原生 DOM 事件

          当调用的函数,有多个参数传入时,需要使用原生DOM事件,则通过 $event 作为实参传入作用:用于监听 DOM 事件

    2、实例

    <div id="app">
        
        <!-- `greet` 是在下面定义的方法名 -->
        <button v-on:click="greet">无参数事件</button>
        <button v-on:click="greet2('hellogreet2')">有参数事件</button>
        <button v-on:click="greet3">无参数event</button>
        <button v-on:click="greet4('hello',$event)">有参数event</button>
    
    </div>
    <script>
    
      var vm = new Vue({
          el: '#app',
          data: {},
    
          // 在 `methods` 对象中定义方法
          methods: {
    
            greet: function () {
              alert("无参数")
            },
    
            greet2: function (arg) {
              console.log(arg)
              alert(arg)
            },
    
            // `event` 是默认原生 DOM 事件
            greet3: function (event) {
              console.log(event.target.tagName)
              console.log(event.target.innerHTML)
    
            },
            // `event` 是默认原生 DOM 事件,如果有多个参数,event要以$event传入
            greet4: function (arg, event) {
              console.log(arg)
              console.log(event.target.tagName)
              console.log(event.target.innerHTML)
            }
    
          }
    
        }
      )
    
    
    </script>

    二、事件修饰符

    1、.stop  阻止单击事件继续传播  event.stopPropagation()

    <div id="app">
    
        <div @click="doThis">
            <!--点击后会调用doWhat再调用doThis-->
            <button @click="doWhat">单击事件会继续传播</button>
        </div>
    
        <!-- 阻止单击事件继续传播,-->
        <div @click="doThis">
            <!--点击后只调用doWhat-->
            <button @click.stop="doWhat">阻止单击事件会继续传播</button>
        </div>
    
    </div>
     // 在 `methods` 对象中定义方法
          methods: {
    
            doThis: function () {
              alert("doThis....");
            },
            doWhat:function(){
              alert("doWhat....");
            },
    
    }

    2、.prevent  阻止事件默认行为  event.preventDefault()

    <div id="app">
    
        <!-- 阻止事件默认行为 -->
        <a href="http://www.baidu.com" @click.prevent="stopDefault">百度</a>
    
    </div>
          // 在 `methods` 对象中定义方法
          methods: {
            stopDefault() {
              alert("href默认跳转被阻止....")
            },
    }

    3、.once  点击事件将只会触发一次

    <div id="app">
    
        <!-- 点击事件将只会触发一次 -->
        <button @click.once="doOnce">点击事件将只会触发一次</button>
    
    </div>
    // 在 `methods` 对象中定义方法
          methods: {
            doOnce() {
              alert("只触发一次")
            },
    }

    4、.self只会触发自己范围内的事件,不会包含子元素

        <div @click.self="outer" style=" 200px;height:100px;background: antiquewhite">  
                
            <button @click.stop="inner">inner</button>
                
        </div>
     // 在 `methods` 对象中定义方法
          methods: {
            outer() {
              alert("outer")
            },
    
            inner() {
              alert("inner")
            },
    }

    5、.capture 捕获事件

    嵌套多层父子关系,所有父子层都有点击事件,点击子节点,就会触发从外至内  父节点-》子节点的点击事件

        <div class="outeer" @click.capture="outer" style=" 200px;height:100px;background: antiquewhite">
                       
            <button @click.capture="inner">inner</button>
                
        </div>
          // 在 `methods` 对象中定义方法
          methods: {
            outer() {
              alert("outer")
            },
    
            inner() {
              alert("inner")
            },

    先出现:

    再出现:

    三、按键修饰符

    1、格式

    • 格式:v-on:keyup.按键名 或 @keyup.按键名
    • 常用按键名:
    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right

    2、实例

    <div id="app">
    
        <label>
            <!--进入输入框按回车时调用keyEnter-->
            <input @keyup.enter="keyEnter">
        </label>
    
    </div>
          // 在 `methods` 对象中定义方法
          methods: {
            keyEnter(){
              alert("enter...")
            },
    }

    四、鼠标修饰符

    1、使用方式

    .left
    .right
    .middle

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

    • @click.left="事件名"   点击鼠标左键触发事件
    • @click.right="事件名"  点击鼠标右键触发事件
    • @click.middle="事件名" 点击鼠标滚轮触发事件

    2、实例

    <div id="app">
    
        <div @click.left="mouseLeft">点击鼠标左键触发事件</div>
    
    </div>
     // 在 `methods` 对象中定义方法
          methods: {
            mouseLeft(){
              alert("点击鼠标左键触发事件")
            },
    }

    详情:https://cn.vuejs.org/v2/guide/events.html










  • 相关阅读:
    win10 UWP button
    内网分享资源
    内网分享资源
    CF724F Uniformly Branched Trees
    win10 UWP FlipView
    win10 UWP FlipView
    win10 UWP FlipView
    搭建阿里云 centos mysql tomcat jdk
    搭建阿里云 centos mysql tomcat jdk
    win10 UWP 申请微软开发者
  • 原文地址:https://www.cnblogs.com/shenjianping/p/11315848.html
Copyright © 2011-2022 走看看