第二天(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的官方文档。