第二天(vue事件、事件修饰符，键盘事件与修饰符)

第二天(vue事件、事件修饰符，键盘事件与修饰符)

Vue事件

我们还是从示例出发：下面分别是app.js和index.html文件

app.js

new Vue({
el:"#vue-app",
data:{
age:30,
x:0,
y:0
},
methods:{
addAge:function(){
this.age++;
},
addAge2:function(){
this.age+=2;
},
addAge3:function(addNum){
this.age+=addNum;
},
updatexy:function(event){
// console.log(event);
this.x=event.offsetX;
this.y=event.offsetY;
// this.x=event.x;
// this.y=event.y;
}
}
})

html body部分：

<h1>vue事件</h1>
<div id="vue-app">
<!-- 在事件中函数后面如果没有参数可以加括号，也可以不加括号，一般情况下我们不加 -->
<button v-on:click="addAge">加一岁</button>
<button v-on:dblclick="addAge2">双击加两岁</button>
<button v-on:dblclick="addAge3(10)">双击传参加十岁</button>
<p>age is {{age}}</p>

<div id="box" v-on:mousemove="updatexy">{{x}}-------{{y}}</div>
</div>
<script src="app.js"></script>

显示效果



分析：

上面讲的是鼠标单击(click)、双击(dblclick)和移动(mousemove)事件，在事件之前有v-on:关键词，可以使用@代替,在事件后面的等于值是对事件的处理函数。在这里，对鼠标移动事件加以解释，在声明函数中，函数中是有一个参数event，这个参数是固定不变的，获取鼠标移动事件，我们可以在控制台打印事件日志，可以发现event中的参数。在这里我们打印的是offsetX与offsetY参数，这里的X、Y是相对父容器而言的；然而在写代码的过程中我发现了还有x,y参数，而这个x,y则是相对整个屏幕而言的。

关于vue中还有很多的事件，我们可以从官方文档中查找，作为初学者的我，也没有什么经验去分析哪些事件用的多，所以也就不多做总结。

Vue事件修饰符

首先我们来看官方文档中对事件修饰符的说明

事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once

我们在上面代码基础上进行修改：我们在box中加一个div

<div id="box" v-on:mousemove="updatexy">
<span id="in">
{{x}}-------{{y}}
</span>
<div id="in" v-on:mousemove.stop>
Stop moving
</div>
</div>

效果就是当我们把鼠标移动到Stop moving这个div上的时候，x,y的显示将会停止变化。

Vue键盘事件和键值修饰符

键盘事件和键值修饰符和上面所说的事件和事件修饰符类似，我们可以使用下面的类似语法：

<input type="text" v-on:keyup.enter="logInput()">

上面的这条语句中keyup是键盘事件，也就是按键松开，.enter就是键盘修饰符，如果没有键盘修饰符，那么一旦有在输入框中有按键事件发生，就会调用logInput这个函数，如果有键盘修饰符，只有用户按下enter之后才会调用logInput这个函数。对于其他的键值修饰符我们依然可以查找vue的官方文档。