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="width: 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="width: 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

巴特西

vue之事件处理

最新文章

热门文章