Methods Option 方法选项 · web前端

一个数字，每点击一下按钮加1. ~~~ <body> <div id="app"> {{a}} <p> <button @click="add">add</button> </p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { a: 1, }, methods: { add: function () { this.a++; } } }); </script> ~~~ # methods中参数的传递使用方法和正常的javascript传递参数的方法一样，分为两部： 1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出`add:function(num){}.` 2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。`<button @click=”add(2)”></button>.` ~~~ <body> <div id="app"> {{a}} <p> <button @click="add(2)">add</button> </p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { a: 1, }, methods: { add: function (num) { if (num != '') { this.a += num; } else { this.a++; } } } }); </script> ~~~ # methods中的$event参数传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。传递：`<button @click=”add(2,$event)”>add</button> `。我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。 ~~~ methods: { add: function (num, event) { console.log(event); } } ~~~ 然后你点击下那个button,控制台就打印出来了 # native 给组件绑定构造器里的原生事件。在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。现在我们把我们的add按钮封装成组件：声明btn对象： ~~~ var btn={ template:`<button>组件Add</button>` } ~~~ 在构造器里声明： ~~~ components:{ "btn":btn } ~~~ 用.native修饰器来调用构造器里的add方法 ~~~ <p><btn @click.native="add(3)"></btn></p> ~~~ ~~~ <body> <div id="app"> {{a}} <p> <btn @click.native="add(3)"></btn> </p> </div> </body> <script type="text/javascript"> var btn = { template: `<button>组件add</button>` }; var app = new Vue({ el: '#app', data: { a: 1, }, components: { "btn": btn }, methods: { add: function (num) { console.log(num); } }, }); </script> ~~~ # 作用域外部调用构造器里的方法这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好 ~~~ <button onclick="app.add(4)" >外部调用构造器里的方法</button> ~~~ ~~~ <body> <div id="app"> <p><button onclick="app.add(4)">add</button></p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { a: 1, }, methods: { add: function (num) { console.log(num); } }, }); </script> ~~~