<!-- Vue-事件（鼠標(biāo)事件军拟、點(diǎn)擊事件） -->
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style2.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<h1>Event</h1>
<button @click.once="add(1)">漲一歲</button><!--只能點(diǎn)擊一次-->
<button v-on:click="sub(1)">減一歲</button>
<button v-on:dblclick="add(10)">漲十歲</button>
<button v-on:dblclick="sub(10)">減十歲</button><!-- 雙擊事件-->
<p>My age is {{ age }}</p>
<div id="canvase" v-on:mousemove="updateXY">{{ x }},{{ y }}
<span id="stopmove" v-on:mousemove.stop.prevent> 數(shù)據(jù)停止</span>
</div>
<a v-on:click.prevent="alert()">百度</a><!--阻止默認(rèn)事件-->
</div>
<script src="app2.js"></script>
</body>
</html>
//實(shí)例化vue對(duì)象
new Vue({
el:"#vue-app",
data:{
age:30,
x:0,
y:0
},
methods:{
add: function(int) {
this.age += int;
},
sub: function(int) {
this.age -= int;
},
updateXY: function(event){
// console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
},
alert: function(){
alert("hello world");
}
}
});
#canvase{
width:600px;
padding:100px 20px;
text-align: center;
border: 1px solid #333;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
