v-on指令详解

v-on

1. 获取点击事件元素本身

< button type=“button” @click=“click1($event)”>按钮< /button>

methods : { click1() { …} }

console.log(e);//返回一个鼠标事件对象MouseEvent。
console.log(e.target);//通过对象的target来获取触发事件的对象。
console.log(e.clientX);//通过对象的target来获取鼠标的相对坐标值X。

<div id="app">
			<button type="button" @click="click1($event)">按钮</button>
			<p @click="click1($event)">哈哈哈哈</p>
			<p>{
   {
    count }}</p>
		</div>
		<script type="text/javascript">
			new Vue({
   
				el : '#app',
				data : {
   
					count : 1
				},
				methods: {
   
					


click1(e){
   
						this.count++;
						console.log(e);//返回一个鼠标事件对象MouseEvent
						console.log(e.target);//通过对象的target来获取触发事件的对象
						console.log(e.clientX);//通过对象的target来获取鼠标的相对坐标值X
					}
				}
			})
		</script>

（1）点击 ‘按钮’：

（2）点击 ‘哈哈哈哈’

2. v-on 修饰符

1 .self

只当触发事件的元素是当前元素本身时，才触发处理函数；即只当e.target是当前元素资深是才触发处理函数

<style type="text/css">
			.box1{
   
				width: 200px;
				height: 200px;
				border