index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<h1>Events</h1>
<!--@符号是一种简写-->
<button @click="age++">涨一岁</button>
<!--使用方法进行减少-->
<!--给不给括号都可以,如果是通过{{}}获取的方法是需要给括号的不然以为是属性-->
<!--在事件中如果传参就必须给括号了-->
<button v-on:click="subtract">减一岁</button>
<!--双击事件-->
<button v-on:dblclick="subtract">减一岁</button>
<!--使用传参方式进行加10岁-->
<button @click="add(10)">涨十岁</button>
<!--鼠标移动事件,获取x轴和y轴-->
<!--添加事件修饰符-->
<div id="canvas" v-on:mousemove="updataXy">
{{x}},{{y}} - <span v-on:mousemove="stopMoveing">Stop Moving</span>
<!--使用事件修饰符进行停止-->
<span v-on:mousemove.stop="">停止</span>
</div>
<!--通过事件修事件修饰符:只能涨一次-->
<button @click.once="add(1)">只能点一次</button>
<!--点击不让进行跳转-->
<a v-on:click.prevent="alert()" href="http://www.baidu.com">The new step</a>
<p>My age is {{age}}</p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
new Vue({
el:"#vue-app",
data:{
age:30,
x:0,
y:0
},
methods:{
subtract:function () {
this.age--;
},
add: function (inc) {
this.age += inc;
},
updataXy:function (event) {
this.x=event.offsetX;
this.y=event.offsetY;
},
stopMoveing:function (event) {
event.stopPropagation()
},
alert:function () {
alert("弹框")
}
}
})
style.css
#canvas{
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333;
}