點擊事件
上一節說了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" >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" >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>
