v-on:click="xxx"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="../js/vue.js"></script> <body> <div id="app"> <h2>当前常量为:{{count}}</h2> <!--<button v-on:click="count++">+</button> <button v-on:click="count--">-</button>--> <!--<button v-on:click="add">+</button> <button v-on:click="sub">-</button>--> <button @click="add">+</button> <button @click="sub">-</button> </div> </body> <script> const app=new Vue({ el:'#app', data :{ count:0 }, methods:{ add:function(){ console.log("数字+"); this.count++; }, sub:function(){ console.log("数字—"); this.count--; } } }) </script> </html>2:Vue生命周期:
除去Vue的el标签 data标签 还有一些function回调函数,会在执行在某一个阶段进行函数的回调进行执行。
Vue规范:一般的缩进是2个空格,我们还可以设置Template模板进行快速的开发