2016年12月5日 星期一

[教學] Vue js快速上手 (七) 改變樣式的魔術棒 v-bind

離上一篇的for loop又隔了一段時間(擦汗),除了在思考這邊要說什麼以外,也是真的年底到了,忙了一堆不知道在忙什麼的事,不過我一直都沒有忘記我的教學還沒寫完......我想,應該也是我覺得我太忙了,所以我才每年都沒參加鐵人賽吧(搖頭)。

如果你會做網頁(我是指前端的部分),那你一定知道HTML一定要搭配一個叫CSS的東西才能讓版面變漂亮、變好看,問題是我如果我用了vue.js,我要怎麼改變我的配色?比方說要提醒的東西就要上紅色、警告的東西就要上黃色、只是一般普通訊息就要上綠色的這種紅綠燈訊息,我是要怎樣才能在同一個按鈕或同一個Div內透過vue.js的運算就做到更換的效果?

這個時候我就不得不來說一下v-bind這個東西了,v-bind是vue.js裡負責改變配色、大小等等所用的屬性,也就是說v-bind就是針對css而存在的屬性,而這樣的屬性會有什麼樣的屬性值呢?再講屬性值之前,我們要來認識一下v-bind的副屬性,也就是v-bind:style與v-bind:class!

如果你對css很熟,你一定會知道所謂的行內樣式style="OOXX",還有id與class樣式,當然由於id有不重複性,為了讓css可以更有效率,現在都會提倡大家用class,也因為此,所以只有v-bind:class,這個部分是比較特別的,可能稍微需要用一下大腦的記憶體。

首先我們先來看看v-bind:style怎麼用,其實用法還挺簡單的,屬性值裡面就直接寫行內樣式,但是樣式的數值,比方說顏色或文字大小,我們就可以設定在vue的data,這樣我們就可以直接帶進畫面,範例如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <div v-bind:style="{ color: myColor, fontSize: myFontSize + 'px' }">123</div>
        </div>

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

如果你有跟著前面的教學一路學過來,我相信到這裡一定難不倒你,因為只是把data裡面的變數直接帶進去而已。當然我們現在我們在coding的時候一定要講求維護性,最好是不要改HTML只改CSS或是不要改HTML或CSS我們直接改js,所以我們換個比較好維護的寫法:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <div v-bind:style="myStyle">123</div>
        </div>

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

是的,我們只要在v-bind:style裡面直接設定一個物件名稱,然後就可以在vue的data裡面直接透過物件去設定我們要屬性值,在這裡我們輸入的css是文字變紅並且文字變大成30px,簡單、明瞭、好維護!但是只能滿足我們基本需求,而且現在的網頁很少會用行內樣式啊!所以我們就來看看v-bind:class吧!

v-bind:class其實用法與寫法上當然就比剛剛的v-bind:style簡單,畢竟css部分我們都可以另外設定在css區域,日後要維護也是很容易,只要改css就好,不像剛剛好像把css混在js裡,當然看起來就會簡單很多,我們來看看範例:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
        <style>
          .active{
            color:red;
            font-size: 30px;
          }
        </style>
    </head>
    <body>

        <div id="app">
            <div v-bind:class="{ active: myCheck }">123</div>
        </div>

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

是的!在這個範例裡面我們很明顯的可以看到,使用v-bind:class,我們只要判斷這個class是不是要啟用就可以了,像我大括號裡面是血active:check,其中active就是我們的class名稱,而myCheck則是我設定的變數名稱,我在vue的data裡面設定的ture,意思就是啟用這個class,所以當我們打開頁面的時候,你就會看到123這行div被套上了一個叫active的class。

咦?既然可以設定ture,那是不是也有false?那既然有ture跟false,那我是不是可以設定很多個class??當然可以!你可以設定一連串的class名稱都沒有問題,因為重點在於要啟用哪一個class對吧? 那要怎麼設定很多個class?我們簡單範例如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
        <style>
          .active{
            color:red;
            font-size: 30px;
          }
          .normal{
            color:green;
            font-size: 30px;
          }
        </style>
    </head>
    <body>

        <div id="app">
            <div v-bind:class="{ active: myCheck , normal:myCheck2 }">123</div>
        </div>

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

看到範例有沒有覺得超簡單?只要在大括號裡面透過逗點連接,你就可以繼續輸入下一組class名稱跟判斷用的變數了,有沒有超簡單?你只要把myCheck與myCheck2的ture跟false對調,套在123這個div的class,就會對調囉!

本篇教學就到這邊,希望我能更快擠出時間寫下一篇教學(點頭)!

2016年10月12日 星期三

[教學] Vue js快速上手 (六) 一定要懂for loop

在寫教學的過程中很囧的一件事就是,教學還沒寫完新版本就誕生了,這就是我中途又去忙了一個多月之後,回來發現的第一件囧事,是的,Vue.js 2.0 釋出了,所以我花了一點時間概略地在看了一下,還有之前寫的五篇教學。所幸,因為我寫的是快速上手,都是基本用法與觀念,在新版的Vue.js變化不大,不影響之前五篇的教學範例,所以已經看了這系列教學的朋友其實不用太擔心,我也將教學裡面本來使用1.0.26版本的Vue.js,全數都改成了2.0.1版本的Vue.js了。

好了,這篇我們要來學一個跟if一樣很重要的東西,就是所謂的for,通常你學一個新的程式語言,不管你怎麼學,都會看到if else跟for 這兩個東西,也就是說當你學一個新語言,這兩個東西一定是在必定要學、要看的範圍裡,所以本篇我們再來看看for loop吧!

for loop 通常是用來處理列表或是重複輸出一樣格式的元素時再使用的,比方說我要在頁面上產生10個div、10個li,或是輸出九九乘法表這類的資料時,for loop就是你肯定要使用的第一選擇了!首先我們先來看看如何輸出1~10吧!
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <span v-for="n in 10">{{ n }}</span>
        </div>

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

上面這段code執行後你會發現在頁面會出現“12345678910”,有沒有覺得超簡單?看不懂?,其實我在span這裡加上了v-for屬性,屬性值裡面寫的意思是“變數n在10裡面”,然後樣本{{ n }} 則是輸出n這個變數,所以vue.js自然就會知道我的n要從1開始,一直跑到10,自然頁面上就會輸出1~10了。如果你不是用Vue.js v2,你是用v1例如版本1.0.26,那n的變數會從0開始輸出10個數字,你就會得到“0123456789”,所以如果你想要從1開始記得用n+1喔。

那要怎麼寫出九九乘法呢?我跟你說,真的超簡單,就用上面那個範例再多幾行就結束了!
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <div v-for="i in 9">
              <h3>{{ i }}</h3>
              <div v-for="j in 9">{{ i }} x {{ j }}={{ i*j }}</div>
            </div>
        </div>

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

真的!就這樣四行,九九乘法就搞定了!有沒有超簡單?當然一般用v-for不光只是要輸出數字而已,就像我開頭有說for loop,通常拿來輸出列表用的,那假設我們有一個表是蘋果、香蕉、椰子,那我們要怎麼用v-for輸出呢?很簡單,我們只要把蘋果、香蕉、椰子放進data裡,我們就可以輸出在頁面了,以下就是範例。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <ul>
              <li v-for="item in items">
                {{ item.message }}
              </li>
            </ul>
        </div>

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

是的,所以我們把蘋果、香蕉、椰子這些資料放進data裡,取名items,然後在v-for屬性裡設定一個變數叫item(你要改叫n或改叫i都行),然後就會開始輸出items的第一個、第二個、第三個,而當前items裡的第一個值、第二個值、第三個值就會自動帶入item中,然後第一、第二、第三的一二三,我們稱之為index,也就是目錄順序的意思,有需要也是可以輸出的。

在舉一個例子,比方說地址好了,台北市裡面有中山區、大同區、中正區,這樣資料要怎麼放進data裡?
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <ul>
              <li v-for="(item, index) in items">
                {{ parentMessage }} - {{ index }} - {{ item.message }}
              </li>
            </ul>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',
                data: {
                  parentMessage: '台北市',
                  items: [
                    { message: '中正區' },
                    { message: '中山區' },
                    { message: '大同區' }
                  ]
                }
            });
        </script>
    </body>
</html>

這時候我們就可以用perantMessage來帶入台北市這樣的資料,然後上述的範例我也把index輸出在畫面上,你可以明確看到index的用途,最後,“item in items”這裡的in你要改成of 也是沒問題的,效果是一樣的,v-for的用法就介紹到這裡,用法真的不難,只是要如何運用得好就真的不是一件簡單的事了,希望到目前為止的教學可以讓你覺得得心應手、上手無障礙喔!

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

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/2.0.1/vue.min.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-if="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/2.0.1/vue.min.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的參數值不存在時也會顯示不一樣的文字,各位可以自行增加一些條件來做延伸練習。
Related Posts with Thumbnails