今天这节课我们接着对上节课所写的计数器，进行改版。之前是自动增加数值的，现在我们把它改成手动增加数值，自动挡换成手动挡。
编写页面的基本结构
在项目根目录，新建一个demo3.html文件，复制一下上节课代码，然后开始修改代码，在template里我们添加两个按钮一个为自增加按钮，一个为自减按钮。
template: `<div>
<button v-on:click="descCounter">-</button>
<span>{{counter}}</sapn>
<button v-on:click="addCounter">+</button>
</div>`vue3事件声明和绑定
接下来我们需要给两个按钮绑定事件，让它们能进行数值的增加和减少。在vue中的事件绑定和原生事件绑定是不一样的，我需要的在methods属性中声明两个方法 addCounter 和 descCounter，添加一个alert来试试水。
methods:{
addCounter(){
alert("add")
},
descCounter(){
alert("desc")
}
}在template中为button绑定事件，需要使用 v-on 模板指令来为button绑定事件方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器-手动版</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data(){
return{
counter:1
}
},
methods:{
addCounter(){
alert("add")
},
descCounter(){
alert("desc")
}
},
template: `<div>
<button v-on:click="descCounter">-</button>
<span>{{counter}}</sapn>
<button v-on:click="addCounter">+</button>
</div>`
}).mount("#app")
</script>
</html>写完这部分就可以在浏览器测试一下，你写的代码是否好用了，alert试过水之后，我们修改一下响应事件的方法。
methods:{
addCounter(){
this.counter++
},
descCounter(){
this.counter--
}
},好了这个例子咱们就写好了，总结一下，这节课我们需要在methods中声明事件方法的和使用v-on指令绑定响应事件。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器-手动版</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data() {
return {
counter: 1
}
},
methods: {
addCounter() {
this.counter++
},
descCounter() {
this.counter--
}
},
template: `<div>
<button v-on:click="descCounter">-</button>
<span>{{counter}}</sapn>
<button v-on:click="addCounter">+</button>
</div>`
}).mount("#app")
</script>
</html>