上一篇我們講了很多v-on:click的運用，但是說到按鈕，最常出現的地方應該就是表單了，既然是表單，那就有所謂的submit這個動作，所以本篇一開始，我們就來說說v-on:submit吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<form action="submit.html" v-on:submit="handleIt">
<button type="submit">立即送出</button>
</form>
</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(){
alert("here I am!");
}
}
});
</script>
</body>
</html>
上述的範例與上一篇一開始的範例非常像，只是在這邊我們用了一個form表單，當表單送出時就會轉到submit.html，我的submit.html只是一個空白頁面，裡面寫著送出成功，所以目前這個範例是不會傳送任何東西到submit.html頁面的，只會在你按下按鈕的時候，跳出文字視窗寫著“here I am！”。到目前為止你會覺得v-on:submit跟上一篇v-on:click很像，如果不看原理只看結果基本上一模一樣的，只是一個是click一個是submit的差別而已。
好啦，那假設我們今天有一顆按鈕，但是我不希望他就這樣直接submit出去，那怎麼辦？我還是希望他按下按鈕之後會跑出“here I am！”，但是他不要送出資訊轉到submit.html，那這時我們要怎麼做？很簡單，我們只要寫v-on:submit.prevent就好了，有沒有很簡單？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<form action="submit.html" v-on:submit.prevent="handleIt">
<button type="submit">立即送出</button>
</form>
</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(){
alert("here I am!");
}
}
});
</script>
</body>
</html>
除了.prevent之外，還有.stop、.self、.capture等等，效果如何就留著給你自己嘗試與研究了。再來除了submit以外，還有keyup，keyup後面可以點的就多了，比方說.enter、.up、.down、.left、.right等等，後續如果有機會會想幾個範例來給大家看看。
連續寫了兩篇v-on，最後大家是不是開始覺得v-on好像會很常需要寫到？畢竟這些都是在互動性操作下會啟動function的功能，實戰上就顯得用到的比例很高，所以在vue.js裡就變成有簡寫的方法了。簡寫的方法很簡單，就是把“v-on:”改寫成@就可以了，我們拿一開始“here I am！”做範例如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3 click</title>
</head>
<body>
<div id="app">
<form action="submit.html" @submit="handleIt">
<button type="submit">立即送出</button>
</form>
</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(){
alert("here I am!");
}
}
});
</script>
</body>
</html>
透過@這樣的簡寫，我們就可以把“v-on:click”改寫成“@click”，把“v-on:submit”改寫成“@submit”，讓我們以後再用v-on的時候可以更快速的輸入，也可以避免你一直寫v-on、v-on的煩躁程度了，是不是很貼心呢！