本节知识点
概述
- v-on:click就是监听事件。他也有个简写就是@click
- 然后在methods里面写方法
简易demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{score}}</span>
<button v-on:click="add">加分</button>
<button @click="del">减分</button>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
score: 1
},
methods:{
add:function(){
return this.score++;
},
del:function(){
return this.score--;
}
}
})
</script>
</html>
我们还可以绑定键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{score}}</span>
<button v-on:click="add">加分</button>
<button @click="del">减分</button>
<input @keyup = "key($event)">
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
score: 1
},
methods:{
add:function(){
return this.score++;
},
del:function(){
return this.score--;
},
key:function (ev) {
window.alert(ev.keyCode)
}
}
})
</script>
</html>
