<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.css">
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
<title>Document</title>
<style>
.canvse{
height: 300px;
width: 300px;
border: 1px solid red;
margin: 0 auto;
line-height:300px;
text-align:center;
}
</style>
</head>
<body>
<div id="app">
<h1>{{greeting()}} </h1>
<p>my age is {{age}}</p>
<button @click="addAge(3)">点击</button>
<button @dblclick="subAge(2)">点两下</button>
<div class="canvse" @mousemove="updateXy">
{{x}}--{{y}}
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
age:28,
vals:'',
x:null,
y:null,
},
methods:{
greeting:function(){
return "hello world"
},
addAge:function(val){
this.age += val;
},
subAge:function(val){
this.age -= val;
},
updateXy:function(e){
console.log(e)
this.x = e.offsetX;
this.y = e.offsetY;
}
}
})
</script>
</body>
</html>