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

文章分類:

發佈留言

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

相關推薦文章

希望您會喜歡
2020 年 5 月 21 日
[創業] 關於職業道德這件事

一直以來我覺得要做好一個網站,絕對不是個人戰,而是團體戰,畢竟一個人能涉略的內容始終有限,學得廣的人不見得可以 […]

Read More
2015 年 9 月 8 日
[php] 快速分割datetime資料

這其實沒什麼了不起,但是我五六年的菜菜鳥就是不常用,所以一天到晚都忘記,乾脆寫一篇放在部落格裡,這樣我就不會忘 […]

Read More
2008 年 5 月 27 日
[欣賞]Kiwi!

人因夢想而偉大,那kiwi呢? 什麼是Kiwi? 鷸鴕,又譯為幾維鳥、奇異鳥、奇威鳥(我聽過的是奇異鳥),是紐 […]

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