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> ~~~