<!-- Vue-事件（鼠标事件、点击事件） -->
<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><!--只能点击一次-->
<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> 数据停止</span>
</div>
<a href="https://www.baidu.com" v-on:click.prevent="alert()">百度</a><!--阻止默认事件-->
</div>
<script src="app2.js"></script>
</body>
</html>
//实例化vue对象
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;
}
网友评论