一，事件修饰符
事件修饰符有很多种类，在我们Vue.js官网跟我们列出来了很多修饰符，再加上我自己在网上搜的一些修饰符，我在这里全列出来供大家参考：
1.stop：调用event.stopPropagation() 停止事件发生
2.prevent：调用event.preventDefault()阻止默认事件发生
3.capture：添加事件侦听器时使用capture模式
4.self：只当事件是从侦听器绑定的元素本身触发时才触发回调
5.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调
6.native：监听组件根元素的原生事件
7.once：只触发一次回调
8.left：只当点击鼠标左键时触发
9.right：只当点击鼠标右键时触发
10.middle：只当点击鼠标中键时触发
11.passive：以{passive: true}模式添加侦听器
注：上面这些修饰符也有我对其自己理解的意思，并不代表官方认可，仅供参考
那么现在我们来一起交流一下什么是事件修饰符，在我们进入正题之前，我们先写一个鼠标事件(mousemove)那么代码我们还是紧跟着上一篇文章写下来，我们先创建一个div容器，然后我们在给一些简单的样式
<body>
<div id="app-vue">
<button v-on:click="add(1)">涨一岁</button>
<button v-on:click="bdd(10)">减一岁</button>
<p> 我今年{{age}}</p>
<div id="xy" v-on:mousemove="updateXY">{{x}},{{y}}</div>
</div>
</body>
#xy{
width: 500px;
padding: 200 px 20 px;
text-align: center;
border: 1px solid black;
height: 500px;
}
new Vue({
el:"#app-vue",
data:{
age:22,
x:0,
y:0
},
methods:{
add:function(inc){
this.age+=inc;
},
bdd:function(dec){
this.age-=dec;
},
updateXY:function(event){
//console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
}
}
})
上面的代码就是我们的鼠标事件那么上面的代码怎么解释呢，v-on:mousemove="updateXY"这个代码就是我们的鼠标移动事件，我们想要的结果就是，当我们鼠标移动到div这个容器里面的时候，我们会看到容器里面的 X Y会随着我们鼠标的移动而改变他们的值，既然我们绑定了这个鼠标事件，我们就要给他一个对应的值和方法，我们在data里面设置了x=0 y=0 也就是默认值，那么在我们方法里面就要获取我们鼠标移动到div容器的值，并且传输给我们的x 和 y
那么我们首先获取这个值console.log(event)我们在console里面可以看到，当我们鼠标移动到div容器里面的时候，会有很多数值，我们随便点开一个会看到有
offsetX和offsetY这两个属性，这两个属性后面的数字就是我们想要的x和y的值，那么我们就要把这个值赋予给x和ythis.x = event.offsetX this.y = event.offsetY这两个代码就是给x和y赋值的方法。
这时我们再回到页面中我们鼠标移动到div容器里面的时候我们会看到x和y的值会随着我们鼠标的移动而变化，这篇文章我们讲的是事件修饰符，那么我们刚刚说过，x和y的值会随着我们鼠标的移动而改变，当我们鼠标移动到某个地方的时候他的值不在改变怎么办呢，我们在JS里面有说过阻止冒泡事件，那么我们在div里面给他一个span的标签，我们鼠标移动到span上面希望有一个事件发生，说简单点x和y值停止运算，那我们也要给span标签一个v-on:mousemove=" "这个方法，我们取名为“stopmoving”，名字取号了我们就要写对应的方法，我们要想阻止这个冒泡事件我们需要拿到event这个对象，我们就要event.stopPropagation(),这样的话我们就可以阻止这个冒泡事件了。
new Vue({
el:"#app-vue",
data:{
age:22,
x:0,
y:0
},
methods:{
add:function(inc){
this.age+=inc;
},
bdd:function(dec){
this.age-=dec;
},
updateXY:function(event){
//console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
},
stopmoving:function(event){
event.stopPropagation()
}
}
})
<body>
<div id="app-vue">
<button v-on:click="add(1)">涨一岁</button>
<button v-on:click="bdd(10)">减一岁</button>
<p> 我今年{{age}}</p>
<div id="xy" v-on:mousemove="updateXY">
{{x}},{{y}}
<span v-on:mousemove="stopmoving">在这停顿</span>
</div>
</div>
</body>
上面是我们完整的代码，当我们进入到网页时，我们会看到x和y后面会有“在这停顿”鼠标移动到上面的时候我们会发现x和y的值就不会变化，我们在移开这个区域他又会开始变化，既然我们是事件修饰符，那我们就可以不需要这个stopmoving方法了，我们直接用事件修饰符就可以了，因为他已经帮我们包装好这个方法了，我们值需要将<span v-on:mousemove="stopmoving">这个代码改成<span v-on:mousemove.stop=" ">这个代码就行了，他们两个效果是一样的。
这是我和大家一起分享我自己所学到的一些Vue.js的基础知识，希望看到这篇文章的各位前辈多多关照，小生有哪些错误的地方希望能够指出来，也希望其他和我一样的小白能够有所帮助。
网友评论