我们用Vue做一个计数器，所以我们学习2个新东西：
新属性： methods
新指令： @click (v-on:click)
逻辑 : 点击+按钮 变量+1并打印 点击-按钮 变量-1并打印：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="js/vue.js"></script> <div id="app"> <h2>当前数量:{{sum}}</h2> <!-- 注意这个button千万不能放外面 因为 确保你所有权被Vue控制！！ --> <button v-on:click="sum++;">+</button> <button v-on:click="sum--;">-</button> </div> <script> const app = new Vue({ el: "#app", data: { sum: 0 } } ) </script> </body> </html>
所以 v-on:click="xxxx;" 这就是监听，我们有新监听方法替代v-on:
所以既然替代了 那么也别在标签里面写语句了【因为如果写很多会很乱！！！】 我们在Vue中的methods中写：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="js/vue.js"></script> <div id="app"> <h2>当前数量:{{sum}}</h2> <!-- 下面写入方法名即可 --> <button @click="add">+</button> <button @click="sub">-</button> </div> <script> const app = new Vue({ el: "#app", data: { sum: 0 }, // methods写入函数方法 methods: { add() { this.sum++; //一定要加this 为了防止同名而且要养好习惯！ }, sub() { this.sum--; } } } ) </script> </body> </html>
所以： 很方便啊 很方便：：：
总结：
新的属性：methods，该属性用于在Vue对象中定 义方法。
新的指令：@click, 该指令用于监听某个元素的点 击事件，并且需要指定当发生点击时，执行的方法 (方法通常是methods中定义的方法)
这些@click是什么东西？
Vue对象中又是定义el/data/methods，到底都有 哪些东西可以定义，以及它们的作用是什么？
这些疑惑在后续学习中都会一一解开。