[教學]Vue js快速上手(五)Vue.js要如何v-on的其他運用

上一篇我們講了很多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的煩躁程度了,是不是很貼心呢!


YOTTA 你最專業的學習夥伴,提供優質內容與有趣觀點,擴大豐富你的視野。