一、methods中參數的傳遞
使用方法和正常的javascript傳遞參數的方法一樣，分為兩部：
1、在methods的方法中進行聲明，比如我們給add方法加上一個num參數，就要寫出add:function(num){}.
2、調用方法時直接傳遞，比如我們要傳遞2這個參數，我們在button上就直接可以寫。<button @click=”add(2)”></button>.
現在知道了加參數的方法，看一段完整的代碼，代碼中給add添加了num參數，並在按鈕上調用傳遞了。
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>methods Option</title>
</head>
<body>
<h1>methods Option</h1>
<hr>
<div id="app">
{{ a }}
<p><button @click="add(2)">add</button></p>
</div>
<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>
</body>
</html>
|
這時，再點擊按鈕是每次加2個數字。
二、methods中的$event參數
傳遞的$event參數都是關於你點擊鼠標的一些事件和屬性。我們先看看傳遞的方法。
傳遞：<button @click=”add(2,$event)”>add</button> 。
我們這時候可以打印一下，看看event到底是個怎樣的對象。你會發現，它包含了大部分鼠標事件的屬性。
三、native 給組件綁定構造器里的原生事件。
在實際開發中經常需要把某個按鈕封裝成組件，然后反復使用，如何讓組件調用構造器里的方法，而不是組件里的方法。就需要用到我們的.native修飾器了。
現在我們把我們的add按鈕封裝成組件：
聲明btn對象：
|
var btn={
template:`<button>組件Add</button>`
}
|
在構造器里聲明：
|
components:{
"btn":btn
}
|
用.native修飾器來調用構造器里的add方法
|
<p><btn @click.native="add(3)"></btn></p>
|
四、作用域外部調用構造器里的方法
這種不經常使用，如果你出現了這種情況，說明你的代碼組織不夠好。
|
<button onclick="app.add(4)" >外部調用構造器里的方法</button>
|