附有同一文件夹下的html文件、js文件和css文件
注释说的很详细
index.html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<h1>Event</h1>
<button @click="add(1)">单击涨一岁</button>
<button v-on:click="subtract(1)">单击减一岁</button>
<button @dblclick="add(10)">双击涨十岁</button>
<button v-on:dblclick="subtract(10)">双击减十岁</button>
<p>My age is {{age}}</p>
<div id="canvas" v-on:mousemove="updateXY">
{{x}},{{y}}
</div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js代码
//实例化VUE对象
new Vue({
el:"#vue-app",
//仅限于在vue-app容器下
data:{
age:30,
x:0,
y:0
},
methods:{
add:function(inc){
this.age += inc;
},
subtract:function(dec){
this.age -= dec;
},
updateXY:function(event){
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});
style.css文件
#canvas{
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333;
}
9009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
