1. 业务要求
（1）点击 + 号，计数器 + 1
（2）点击 - 号，计数器 - 1
2. 不考虑逻辑功能时，编写 html 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 数据与界面分离--> <div id="app"> <h2>当前计数：{{counter}}</h2> <button>+</button> <button>-</button> </div> <script src="../js/vue.js"></script> <script> //点击 + 计数器 + 1 //点击 - 计数器 -1 const app = new Vue({ el: '#app',//用于挂载要管理的元素 data:{//定义数据 counter : 0 } }) </script> </body> </html>
3. Vue的点击事件： v-on:click
<button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button>
4. 将 "counter++" "counter--"封装为函数
<button v-on:click="add">+</button> <button v-on:click="sub">-</button> ... const app = new Vue({ el: '#app',//用于挂载要管理的元素 data:{//定义数据 counter : 0 }, methods:{//定义方法 add : function(){ this.counter++; console.log("add被执行")//控制台打印 }, sub : function(){ this.counter--; console.log("sub被执行") } } })
5. 源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 数据与界面分离--> <div id="app"> <h2>当前计数：{{counter}}</h2> <!-- 如果点击的同时 还想打印一句话通知修改了，那就比较麻烦 <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button>--> <!-- click 指令 --> <button v-on:click="add">+</button> <button v-on:click="sub">-</button> </div> <script src="../js/vue.js"></script> <script> //点击 + 计数器 + 1 //点击 - 计数器 -1 const app = new Vue({ el: '#app',//用于挂载要管理的元素 data:{//定义数据 counter : 0 }, methods:{//定义方法 add : function(){ this.counter++; console.log("add被执行") }, sub : function(){ this.counter--; console.log("sub被执行") } } }) </script> </body> </html>