事件是JS的基础知识，说学VUE，对js的基础知识得有些了解!
js事件指的是可以被Javascript侦测到的行为，通俗的讲就是当用户与Web页面进行某些交互时，解释器就会创建响应的event对象以描述事件信息。
常见的事件有：
- 用户点击页面上的某项内容
- 鼠标经过特定的元素
- 用户按下键盘的某个按键
- 用户滚动窗口或改变窗口大小
- 页面元素加载完成或加载失败
在vue中使用 v-on 指令监听DOM事件，在该事件触发是执行绑定的JavaScript代码！
监听DOM：
<div id="app"><button type="button" v-on:click="count += 1">点击事件</button><p>点击上边按钮的次数{{ count }}次！</p></div><script type="text/javascript">var app = new Vue({ el: '#app', data:{count: 0
}
})</script>复制代码
v-on指令中一般是不写事件处理逻辑的，而是将事件处理逻辑封装成一个函数，在mesthods中定义，v-on指令只需要对应绑定该方法即可！
示例：
<div id="app"><button type="button" v-on:click="greet">vue事件</button></div><script>var app = new Vue({ el: '#app', data:{ count: 0
}, methods:{ greet: function(event){ // 'this'在方法里指向当前vue实例
alert(this.count) // 'event'是原生的DOM事件if(event){
alert(event.target.tagName)
}
}
}
})</script>复制代码
总结：
- 定义方法在methods中构造
- 定义的方法内的this 指向当前vue实例本身
- 事件还可以通过 app.greet()方式调用
这个怎么理解呢？其实就是为定义的函数去传参，带参数调用！
例子：
<div id="app"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</button></div>复制代码<script type="text/javascript">var app = new Vue({ el: '#app', methods:{ say: function(message){
alert(message)
}
}
})
</script>复制代码
如果需要在内联处理器中访问原始DOM事件，可以将特殊变量$event参数传入方法！
<div id="app"><button v-on:click="say('hi', $event)">Say hi</button><button v-on:click="say('what', $event)">Say what</button></div>复制代码<script type="text/javascript"> var app = new Vue({ el: '#app', methods:{ say: function(message, event){ if (event) {
event.preventDefault()
}
alert(message)
alert(event.target.tagName)
}
}
})
</script>复制代码
vue提供事件修饰符的目的是为了定义的方法内只有纯粹的数据逻辑，而不参与处理DOM事件的细节！
.stop 阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>复制代码
.prevent 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>复制代码
.capture添加事件监听器时使用事件捕获模式，一种自上而下的处理方式
即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
<div v-on:click.capture="doThis">...</div>复制代码
.self 事件只在本身处理
<div @click.self="testOnClickMethods"> testOnClickMethods <button @click="onSumClick(1, 2)">onSumClick</button></div>复制代码
默认情况下，当我们点击onSumClick时，事件向上传播，会调用testOnClickMethods。
如果我们不想调用testOnClickMethods的话，可以通过 @click.stop="onSumClick(1, 2)"来阻止事件冒泡，也可以通过 @click.self="testOnClickMethods" ， 来规定 testOnClickMethods 事件只由它本身处理
.once 点击事件将只会触发一次,可以用在自定义组件事件上！
<a v-on:click.once="doThis"></a>复制代码
.passive 滚动事件的默认行为将会立即触发
<div v-on:scroll.passive="onScroll" >...</div>复制代码
在默认情况下滚动的时候，浏览器会在整个事件处理完毕之后再触发滚动，因为浏览器并不知道这个事件是否在其处理函数中被调用了 event.preventDefault() （通知 Web 浏览器不要执行与事件关联的默认动作）。
.passive 修饰符用来进一步告诉浏览器这个事件的默认行为不会被取消。 这样可有效的提供浏览器的性能。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
修饰符可以串联
<div @click="testOnClickMethods">testOnClickMethods<a href="http://www.baidu.com/" @click.prevent.self="alert('http://www.baidu.com/')">http://www.baidu.com/<button @click="onSumClick(1, 2)">onSumClick</button></a></div>复制代码修饰符可以串联,并且在进行修饰符串联的时候，顺序很重要。比如：
- 如果我们使用 @click.prevent.self="alert('http://www.baidu.com/')" ,
- 那么不仅阻止了 a标签中前往百度的跳转，也阻止了 a标签的点击事件。
- 而如果使用 @click.self.prevent="alert('http://www.baidu.com/')" ,
- 那么只阻止了 a标签的点击事件，在 testOnClickMethods 执行之后会跳转到百度
感谢您的阅读，如果对您有帮助，欢迎关注"CRMEB"掘金号。码云上有我们开源的商城项目，知识付费项目，JAVA版全开源商城系统，学习研究欢迎使用，老铁顺手点个star呗，老板奖励五毛，分你两毛五，????????关注我们保持联系！
