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