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/1.0.26/vue.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/1.0.26/vue.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/1.0.26/vue.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月28日 星期日

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

從開始到現在,我們的範例都是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/1.0.26/vue.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/1.0.26/vue.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的其他用法,所以如果這一篇還不是很了解,建議多練習幾次範例,不然下一篇可能會更不懂喔!當然有問題你也可以在下方留言或上粉絲團社團一起討論喔!

2016年8月23日 星期二

[教學] Vue js快速上手 (三) 必學的if else!v-show!

上一篇我們學到了real time即時更新頁面的方法,在學習任何一種程式語言時,基本上都會有一些必學的東西,比方說變數、參數、if else 、 for loop 、 for each 、 while 與一些運算子(加、減、乘、除、and、or等等),這些都是一定會學到的東西,一旦你真的搞懂,即便換了一套程式語言,你也會發現這些部分都很似曾相識,所以這篇我們要來講的就是if else!

來介紹一下這一篇你會學到的三個html 擴充屬性:
  1.  v-show :這是Vue.js特有的寫法,基本上就是等於v-if,所以屬性質就是所謂的運算條件了。
  2.  v-if :同v-show。
  3.  v-else : 這是當v-show或v-if條件不成立時需要選擇的答案
看完上面三點如果你覺得你完全沒看懂,千萬不要緊張,也不要覺得困難,就把它當專有名詞就好,就像橘子為什麼叫橘子,柳丁為什麼叫柳丁一樣,就只是一個名詞而已,不要為了看不懂這些名詞就停下來。現在我們來舉個實際範例來實現if else功能!

不知道到目前為止大家覺得Vue.js好不好學?如果要打個分數,1~10分你會打幾分?我們假設6分才及格,所以當你打6分以上,畫面會出現Vue.js so easy,如果不到6分,畫面上就會出現still learning Vue.js。好了!題目出來了,稍微思考一下大概要怎麼做吧,在程式開發過程中其實最難的部分是思考,思考如何把程式寫出來,還要考量架構、效能等等,這才是我覺得最難的地方,所幸題目是我出的,所以很簡單,你有想好一個大概了嗎?讓我們繼續看下去!

第一步當然是運用上一篇所學,先建立一個可以即時打分數的頁面,程式碼如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>2 v-show</title>
    </head>
    <body>

        <div id="app">
            <h1 class="error">{{ score }}分</h1>
            <p>你覺得vue.js簡單嗎?請輸入1~10分</p>
            <input type="text" v-model="score">
        </div>



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

好了!如果你執行上面的code,你會發現你已經完成一個簡單、可以即時顯示分數的頁面,只是第一行很奇怪,會一直掛個分在那邊,如果你輸入了1,它就變成1分,那就合理了,所以你可以帶入score的預設值是0,這樣就會顯示0分,看起來就會合理多了!

第二步就是,如果score分數超過6分就要顯示“Vue.js so easy”,但不足6分就要顯示“still learning Vue.js”,這部分要怎麼寫呢?那當然就要用到v-show與v-else了,以下就是範例程式碼: <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>2 v-show</title>
    </head>
    <body>

        <div id="app">
            <h1 class="error">{{ score }}分</h1>
            <div v-show="score">
                <p v-show="score >= 6">Vue.js so easy</p>
                <p v-else>still learning Vue.js</p>
            </div>

            <p>你覺得vue.js簡單嗎?請輸入1~10分</p>
            <input type="text" v-model="score">
        </div>


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

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

上面的範例程式碼,我加上了score預設值是0,然後當score是有值的,就會根據目前輸入的分數去做判斷,判斷內容就是大於等於6分以上就會顯示“Vue.js so easy”,不足6分就會顯示“still learning Vue.js”,當然你也可以把條件是改成大於5分,結果會是一樣的,當然你把所有的v-show都改成v-if,結果還是會一樣的。

當然這個題目還可以繼續延伸下去,比方說當輸入文字超過10時會出現警告訊息,而當score的參數值不存在時也會顯示不一樣的文字,各位可以自行增加一些條件來做延伸練習。

2016年8月22日 星期一

[教學] Vue js快速上手 (二) 第一支Real-Time即時更新

上篇我們教了Hello World的寫法,是不是非常簡單好懂,Vue.js其實還有許多不同的寫法是在輔助各種開發情況下,可以快速維護,減少前端人員來來回回找code的時間,而快速維護也變得是這一兩年來最重要的網站發展重點,不管是MVC、MVP或MVVM等等開發模式,其實主要的本質我覺得都在畫清職責、方便維護、提升效能,而這些寫法在後續的教學裡都會一一舉例。學習所有的寫法有助於您判斷、規劃一個好的開發架構,讓你日後維護或是開發類似的功能時可以事半功倍。本篇當然延續上篇,用“Hello World!”來做範例,不過會做一些修改與調整好來做展示。

首先在這裡我先提出一種與上篇不一樣的寫法,也是最簡單的變形,那就是將參數設定另外寫,也就是當你參數預設值非常複雜時,為了讓您可以發便維護,會建議你採用這種寫法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            {{ message }}
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }

            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>

接下來,我要在這裡介紹一個新的html擴充屬性,叫V-model,如果要直接按照屬性名來翻譯大概就是呼叫vue裡面的model功能,所以其實還蠻直白的,在AngularJS也有所謂的ng-model屬性,功能上是差不多的。怎麼使用V-model?很簡單,我們將剛剛的“Hello World!”加上一個input,如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <h1>{{ message }}</h1>
            <input type="text" v-model="message">

        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>

我們將{{message}} 加上h1標籤,然後在下方新增一個文字的input輸入表單,接著v-model名稱是message,所以這個input就會自動帶入與{{message}} 相同的參數內容,而你只要變更inupt裡面的文字,頁面上的{{message}}參數也會立刻馬上一起更新,非常好玩,而且,恭喜你!你在不知不覺中寫了第一隻用Vue.js完成的Real-time即時更新頁面!真是太厲害了你!有沒有很簡單!

這到底是什麼原理呢?如果你上一篇有注意看,你會發現我在解釋data裡面的message時,我是說“預設值”是"Hello World!",是的!它是預設值,所以當你在v-model裡面輸入文字或刪減文字時,你修改的其實就是data裡面message的參數值,既然參數值改變,vue.js就會自動幫你啟動model進而修改{{message}} 在頁面上呈現的內容,進而達到Real-time即時更新頁面的效果。

最後要來說一下一個簡單的debug方式,開頭我們有說將data另外寫可以避免參數過多時顯得混亂,那們我們要怎麼確定我們參數的內容是對的?最簡單得方式就是顯示在頁面上,我們只要多一行就可以達到我們要的效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <h1>{{ message }}</h1>
            <input type="text" v-model="message">
            
            <div>{{ $data | json }}</div>
        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>

在這裡又看到{{}} 了,在裡面寫的是$data,也就是下面var data的內容,而|在這邊是filter的意思,也就是篩選,還蠻好用的,之後有時間會再好好的提一提,而最後的json就是大家可能還蠻熟悉的json格式,所以最後在畫面上你就可以看到用json格式組出來的data參數值了!

再試試看修改input內容看看,下方json格式的參數值是不是也會跟著改變?沒錯,你又再一次證明你真的完成了一個Real-Time即時更新頁面了!恭喜你!!

2016年8月21日 星期日

[教學] Vue js快速上手 (一) Hello World!

對於前端框架目前有許多的選擇,比方說React、AngularJS,以及還有今天要介紹的Vue.js!Vue.js有人說它像React,也有人說它像AngularJS,Vue.js主要是View跟Model的部分,但是效能、速度以及學習門檻都比React或AngularJS低,所以上手簡單,對於javascript苦手,或是一直遲遲無法學會React或AngularJS的同學們來說,簡直是一道曙光!

Vue.js的優點呢,主要就是專注在web技術上,支援html template、jade、coffeescript,甚至可與sass、less等加強版CSS做整合,而擴充性質的plugin也是頗多的,所以對於專注web技術研發的朋友呢,這就真的值得學一下了,畢竟不像React、AngularJS專注跨平台、跨載具,導致要學的東西就變很多,或是有很多新的架構概念要學習,當然Vue.js也是有缺點的,那就是太專注於web上了,其他平台就沒辦法好好使用了,不過反過來說,如果你主要是開發web,那你來說就沒什麼差了,而且Vue.js可以說是簡單版的AngularJS,當你學會Vue.js之後要轉到AngularJS反而可以讓你學習快速,神奇吧!趕快來看一下怎麼用Vue.js吧!

仔細看官網文件你會發現有一堆安裝方式要看,感覺好像非常複雜,其實一點也不複雜,就跟你載入jquery一樣:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
只要把上面這一行放在html檔案裡就可以了,有沒有很簡單?當然你要下載下來放在網站目錄裡也是一個不錯的選擇!

按照寫程式慣例,我們就來示範一個Hello World吧!

第一步,非常簡單,建立空白的html頁面。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    </body>
</html>

第二步,引入Vue.js,並建立一個div命名id為app。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
    </body>
</html>

第三步,建立Vue執行的function,在div#app寫入Hello World!
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            {{ message }}
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    message:'Hello World!'
                }
            });
        </script>
    </body>
</html>

結束!有沒有超簡單!看不太懂?沒關係我來稍微解釋一下,在div#app裡面,你會看到{{ message }} 這樣的東西,如果你以前學過Smarty(PHP的樣板引擎),你會覺得有點熟悉,如果沒學過Smarty也沒關係,jade也類似{}的東西,簡單來說{{}}就是會幫你帶參數進去這個位置上,而在new Vue裡面我指定在id名稱為app的這個element(通常會翻成元素)裡帶進message參數,而message我在這裡指定預設值為Hello World! ,以上就是示範Hellow world的寫法,有沒有很簡單!很簡單吧!如果你還搞不懂,沒關係,可以在本篇或Facebook社團裡提問,我會盡快解決你的問題的!
Related Posts with Thumbnails