<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>methods方法选项</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{num}}</p> <button @click="add(2,$event)">add</button> <!--点击事件 调用函数方法，传值 实参--> <p><btn @click.native="add(5)"></btn></p> <!--native意思是调用构造器里的原始方法--> </div> <button onclick="app.add(10)">作用域外点击</button> <!--作用域外原生方法调用 vue里的函数方法--> </body> <script type="text/javascript"> var btntmp={ template:`<button>点我加</button>` //模版 } var app=new Vue({ el:"#app", data:{ num:0, }, components:{ // 组件 'btn':btntmp // btn组件名 btntmp模版变量 在外定义了 }, methods:{ add:function(numb,event){ // 函数方法 形参 console.log(event); //鼠标操作的属性 if(num=!''){ this.num+=numb; // 左加右付给左 }else{ this.num++ // num 自己 加一 } } } }) </script> </html>