從開始到現在，我們的範例都是real time即時執行，但是一般網站幾乎都不是real time即時執行的，尤其是希望那些透過網友點擊才會出現互動的內容，本篇我們就來談談v-on這個屬性吧！v-on呢其實就有點類似jquery的on()，所以就會有click、submit、keyup等等這些延伸設定，我們假設畫面上有一個按鈕，按鈕按下後會跳出文字框，以下是範例程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<input type="submit" value="立即送出" v-on:click="clickme">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app',
methods:{
clickme: function(){
alert("here I am!");
}
}
});
</script>
</body>
</html>
是的，當你點擊了立即送出後，透啟動v-on:click屬性，屬性值是clickme，所以就會呼叫下方methods裡面clickme的function內容，然後你就會看到文字視窗內容顯示“here I am！”，當然有些人會說這個範例有點弱，我用javascript一樣做得到，當然！vue.js本身就是javascript 的 framework，所以javascript本來就可以辦得到，那我們來改造一下這個範例，讓頁面會統計你點擊這個按鈕次數，做一個小小的計數器，以下是修改過後的範例！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<p>目前以點擊：{{count}}次</p>
<input type="submit" value="立即送出" v-on:click="clickme">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
count:0
},
methods:{
clickme: function(){
this.count += 1;
}
}
});
</script>
</body>
</html>
只要稍加修改，加上前幾篇教過的data，就可以做出一個簡單的計數器了！這邊要記得count這裡直接0的話，型別判斷就是數字，但是如果你寫’0’，就會被當文字型別，最後的結果就不是你想要計數器了！
好啦！最後再來一個簡單的click範例，這個範例就是假設我們有兩顆按鈕，分別按下去都會跳出不一樣的文字視窗，但是文字視窗的訊息不寫在methods裡面的function裡，而是共用相同的function，所以簡單說就是要可以丟參數進去function裡，以下就是範例！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<button v-on:click="handleIt('uh')">I say uh</button>
<button v-on:click="handleIt('ah')">you say ah</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app',
methods:{
handleIt: function(msg){
alert(msg)
}
}
});
</script>
</body>
</html>
是的！根據這個範例呢，你也可以在那邊uh～～～ah～～～（這是某首DJ的歌，有點老了），當你點了”I say uh”，v-on:clicke就會呼叫handleIt function，然後把uh這個值丟到handleIt function裡，所以alert出來的內容就會變成“uh”，當然當你點了“you say ah”，就會把ah這個值丟入handleIt function中，最後alert出來的內容就會變成“ah”了！
由於v-on還有其他運用方式，要講的東西有點多，所以下一篇我們還是會繼續講v-on的其他用法，所以如果這一篇還不是很了解，建議多練習幾次範例，不然下一篇可能會更不懂喔！當然有問題你也可以在下方留言或上粉絲團、社團一起討論喔！