最新 New

[公告]草監網路更改網址至gratch.tw

0

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

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉
上一篇我們講了很多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的煩躁程度了，是不是很貼心呢！

留言

張貼留言