<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="./02.css" type="text/css" rel="stylesheet" />
<script src="./vue.js"></script>
</head>
<body>
<div id="vue-app02">
<h1>Elment</h1>
<p>My name is : {{age}}</p>
<button v-on:click="add(1)">长一岁</button>
<button @click="substruct(1)">减一岁</button>
<button v-on:dblclick="add(10)">长一岁</button>
<button v-on:dblclick="substruct(10)">减一岁</button>
<div id="a" v-on:mousemove="takeXY">
{{x}} , {{y}}
</div>
</div>
<script src="event.js"></script>
</body>
</html>
vue.js
new Vue({
el:"#vue-app02",
data:{
age:30,
x:0,
y:0,
},
methods:{
add:function(inc){
this.age+=inc;
},
substruct:function(dec){
this.age-=dec;
},
takeXY:function(event){
this.x=event.offsetX;
this.y=event.offsetY;
}
}
})