2016 年 8 月 29 日

[教學] 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的煩躁程度了,是不是很貼心呢!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關推薦文章

希望您會喜歡
2016 年 8 月 21 日
[教學] Vue js快速上手 (一) Hello World!

對於前端框架目前有許多的選擇,比方說React、Angular,以及還有今天要介紹的Vue.js!Vue.js […]

Read More
2012 年 2 月 27 日
[免費]avast! Mac版免費防毒軟體

對於Mac要不要安裝防毒軟體的事情還真的眾說紛紜,就我個人的部份我以前安裝過一個完全免費的iAntiVirus […]

Read More
2008 年 8 月 11 日
[設計]Nokia 888 Design 超現實手機!

諾基亞888可不是NOKIA即將上市的最新產品,它是榮獲“諾基亞設計大獎”的參賽作品。在眾多超現實主義的手機當 […]

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram