[JS][Vue]学习记录之点击和键盘事件
2018-04-03 本文已影响1333人
未来行者
点击事件
上一节说了v-on:click,这里补充一种双击事件v-on:dblclick.
<!--dblclick表示双击-->
//写法一
<button @dblclick="increase(10)">加十岁</button>
//写法二
<button v-on:dblclick="decrease(10)">减十岁</button>
鼠标移动事件
v-on:mousemove可以绑定鼠标移动事件
<div id="button" v-on:mousemove="tap">
<script>
var app = new Vue({
el:'#button',
data:{
x:0,
y:0
},
methods:{
tap:function (event) {
//通过event可以拿到偏移量
this.x = event.offsetX;
this.y = event.offsetY;
},
}
});
</script>
这里可以获取移动鼠标时的x和y值.(这里有个小tip,如果不知道event内有什么属性,可以在console里面打印event,就可以知道它有哪些属性了).
修饰符
once:只能被点击一次.
<button @click.once="increase(1)">加一岁</button>
stop:表示某一个区域停止响应事件
<!--stop表示该span区域停止事件响应-->
<span v-on:mousemove.stop="">not move</span>
prevent:阻止某种事件
<!--prevent表示阻止事件发生-->
//弹出alert之后不允许跳转链接
<a v-on:click.prevent="show" href="https://www.baidu.com">showbaidu</a>
键盘事件
键盘事件分为,点击键盘,松开键盘等,这里以keyup为例.
<h1>键盘事件</h1>
<label>姓名:</label>
<!--keyup表示键盘点击的时候出发事件,enter表示回车键触发事件,alt.enter同时按住alt+enter才能触发事件-->
<input type="text" v-on:keyup="inputName" v-bind:value="name">
<label>年龄:</label>
<input type="text" v-on:keyup.alt.enter="inputAge" :value="age">
值得注意的是,vue支持链式调用来实现组合键的事件.v-on:keyup.alt.enter就表示需要同时按住alt+enter才可以触发事件.
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Day 2</title>
<script src="../1/vue.js"></script>
<link rel="stylesheet" href="2.css">
</head>
<body>
<div id="button" v-on:mousemove="tap">
my age is {{age}}
<!--once表示只点击一次-->
<button @click.once="increase(1)">加一岁</button>
<button v-on:click="decrease(1)">减一岁</button>
<!--dblclick表示双击-->
<button @dblclick="increase(10)">加十岁</button>
<button v-on:dblclick="decrease(10)">减十岁</button>
{{x}},{{y}}
<!--stop表示该区域停止事件响应-->
<span v-on:mousemove.stop="">not move</span>
<!--prevent表示阻止事件发生-->
<a v-on:click.prevent="show" href="https://www.baidu.com">showbaidu</a>
<hr>
<hr>
<h1>键盘事件</h1>
<label>姓名:</label>
<!--keyup表示键盘点击的时候出发事件,enter表示回车键触发事件,alt.enter同时按住alt+enter才能触发事件-->
<input type="text" v-on:keyup="inputName" v-bind:value="name">
<label>年龄:</label>
<input type="text" v-on:keyup.alt.enter="inputAge" :value="age">
</div>
<script>
var app = new Vue({
el:'#button',
data:{
name:'allen',
age:30,
x:0,
y:0
},
methods:{
increase:function (anAge) {
this.age += anAge;
},
decrease:function (anAge) {
this.age -= anAge;
},
tap:function (event) {
//通过event可以拿到偏移量
this.x = event.offsetX;
this.y = event.offsetY;
},
show:function () {
alert('hello');
},
inputName:function () {
alert('name');
},
inputAge:function () {
alert('age');
}
}
});
</script>
</body>
</html>
