vue div点击事件_vue 的事件处理以及事件修饰符功能【09】

学习要点：1.事件处理    2.事件修饰符

本节课我们来开始学习 Vue 的事件处理以及事件修饰符功能。

一．事件处理

1. 先来个简单的事件处理，热热身，比如：每次点击按钮增加统计+1；

<button @click="counter+=1">累加button><div>counter: {{counter}}div>

const dataObj={    counter:0};

2. 我们可以通过点击执行方法，并且处理事件对象；

@click=>@click=

methods:{    sum(){        return this.number+=1;    },    sum2(e){        this.counter+=1;        console.log(e);        console.log(e.target.innerText);    }},

(1).event 参数可以不用显式的接受，也可以获取到。 

(2).如果执行没有参数，而接受任意参数，也会当作 event 对象；

3. 我们也可以实现执行方法中传递参数，如果要传递 event，请$event；

<button @click="say('Vue！',$event)">点我button>

say(v,e){    alert('Hello,'+v);    console.log(e);}

4. 事件对象有很多作用，比如阻止冒泡；

<div @click="say('vue',$event)">    <button @click="say('vue')">冒泡button>div>

二．事件修饰符

1. 系统提供了常用的事件对象修饰符，让你直接定义视图中事件的执行方式；

<div @click.stop="say('vue',$event)">    <button @click="say('vue')">冒泡button>div>

2. 以下是手册提供的常用对象事件修饰符，自行查阅使用;

 <a v-on:click.stop="doThis">a><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><div v-on:click.self="doThat">...div><a v-on:click.once="doThis">a>  <div v-on:scroll.passive="onScroll">...div>

3. 再选择两个常用的比如：只运行执行一次 once，取消默认事件 prevent；

<button v-on:click.once="greet">执行事件button>

<form action="http://www.baidu.com">  <button type="submit" v-on:click.prevent="">提交button>form>

4. 系统还提供了按键事件修饰符，比如回车键按下触发；

on:keyup.enter=//.enter / .tab /.delete / .esc / .space / .up / .down / .left / .right

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！