最新 New

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

[教學] Vue js快速上手 (四) Vue.js要如何v-on:click?

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ,將於3秒後自動跳轉
從開始到現在,我們的範例都是real  time即時執行,但是一般網站幾乎都不是real time即時執行的,尤其是希望那些透過網友點擊才會出現互動的內容,本篇我們就來談談v-on這個屬性吧!v-on呢其實就有點類似jquery的on(),所以就會有click、submit、keyup等等這些延伸設定,我們假設畫面上有一個按鈕,按鈕按下後會跳出文字框,以下是範例程式碼。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3 click</title>
    </head>
    <body>
        <div id="app">
            <input type="submit" value="立即送出" v-on:click="clickme">
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',

                methods:{
                    clickme: function(){
                        alert("here I am!");
                    }
                }

            });
        </script>
    </body>
</html>

是的,當你點擊了立即送出後,透啟動v-on:click屬性,屬性值是clickme,所以就會呼叫下方methods裡面clickme的function內容,然後你就會看到文字視窗內容顯示“here I am!”,當然有些人會說這個範例有點弱,我用javascript一樣做得到,當然!vue.js本身就是javascript 的 framework,所以javascript本來就可以辦得到,那我們來改造一下這個範例,讓頁面會統計你點擊這個按鈕次數,做一個小小的計數器,以下是修改過後的範例!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3 click</title>
    </head>
    <body>
        <div id="app">
            <p>目前以點擊:{{count}}次</p>
            <input type="submit" value="立即送出" v-on:click="clickme">
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    count:0
                },

                methods:{
                    clickme: function(){
                         this.count += 1;
                    }
                }
            });
        </script>
    </body>
</html>

只要稍加修改,加上前幾篇教過的data,就可以做出一個簡單的計數器了!這邊要記得count這裡直接0的話,型別判斷就是數字,但是如果你寫'0',就會被當文字型別,最後的結果就不是你想要計數器了!

好啦!最後再來一個簡單的click範例,這個範例就是假設我們有兩顆按鈕,分別按下去都會跳出不一樣的文字視窗,但是文字視窗的訊息不寫在methods裡面的function裡,而是共用相同的function,所以簡單說就是要可以丟參數進去function裡,以下就是範例!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3 click</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="handleIt('uh')">I say uh</button>
            <button v-on:click="handleIt('ah')">you say ah</button>

        </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(msg){
                        alert(msg)
                    }

                }
            });
        </script>
    </body>
</html>

是的!根據這個範例呢,你也可以在那邊uh~~~ah~~~(這是某首DJ的歌,有點老了),當你點了"I say uh",v-on:clicke就會呼叫handleIt function,然後把uh這個值丟到handleIt function裡,所以alert出來的內容就會變成“uh”,當然當你點了“you say ah”,就會把ah這個值丟入handleIt function中,最後alert出來的內容就會變成“ah”了!

由於v-on還有其他運用方式,要講的東西有點多,所以下一篇我們還是會繼續講v-on的其他用法,所以如果這一篇還不是很了解,建議多練習幾次範例,不然下一篇可能會更不懂喔!當然有問題你也可以在下方留言或上粉絲團社團一起討論喔!

留言

張貼留言