從0開始寫程式

將HTML網頁Vue元件化 前一篇簡單的介紹了 元件的基本常識 。這篇我們要來試試看，實際上如何做出元件化的網頁。 第一個例子，我們要透過bootstrap網站上面的html範例，逐步將它改成Vue元件的頁面。 今天我們要練習的畫面，大家可以在這裡取得，下載為html檔案。下載html的方法這裡就不贅述。 https://getbootstrap.com/docs/4.1/examples/ 分析頁面 首先，我們先分析一下這個bootstrap的html範例 有頁首、頁尾、且中間主畫面可以分成兩個區塊。 下面區塊可以再分成更細的區塊，總共有六個區塊構成。 我們可以把分析的結果畫成下面的圖表。 網頁可以分割成Header、Footer、主要內容三段。主要內容的部分可以分上下，上面是bigBoard下面是一個個Item組成，總共有六個Item。 再回來對應下載的html原始碼。我們發現： Header 區塊，從 <header> 開始到 </header> 結束。 Footer 區塊，從 <footer class="text-muted"> 開始到 </footer> 結束。 主要內容區塊，從 <main role="main"> 開始到 </main> 結束。 主要內容區塊，又可以分成兩段，上半段從 <section class="jumbotron text-center"> 開始，到 </section> 結束; 下半段從 <div class="album py-5 bg-light"> 開始，到 </div> 結束，裡面有六個Item，每個Item都從。 <div class="col-md-4"> 開始，到 </div> 結束。 建立Vue 依照上面的分割方式，我們可以將整個網站分成幾個Vue元件。在分割之前，我們先在頁面上安裝Vue.js。一樣，我們先插入下面兩個部分。 Vue.js的CDN檔案連結

什麼是元件？ 一般來說，當我們製作一個網頁時，可以將網頁拆解成一個一個的區塊。這個由各種區塊組成的網頁，除了中間的主內容區之外，還包含了頁首、頁尾、側欄等區塊。每個區塊都有對應該區塊所需要執行的javascript程式碼與CSS檔案。在開發網頁時，如果將這些程式碼全部寫在一起，會導致整個專案的程式碼冗長，檔案也變得很肥大。 試想，若把網頁部分的區塊取出來獨立成一個個的元件，並且將重複用到元件拿來重複使用的話，是否就可以減低程式碼冗長的狀況？Vue元件的出現，就是解決這樣的問題。 為什麼使用元件？ Vue元件（Vue Component）可以說是 Vue JS 最核心的功能。Vue元件可以加強重用性，讓一些常用的程式碼，例如控制項程式，可以被重複使用。你可以把元件想像成樂高積木，一塊塊小程式元件像積木一樣的組合成一個完整的系統。 以上面這個網頁來說，我們可以把Header、Footer、Content、Aside等拆分出來，成為個別的元件，並且在Aside裡面放置Item子元件。透過這樣的設計，可簡化程式碼讓程式更小，並且每個元件可以被多次呼叫使用。整個程式碼看起來更具備組織性、更容易被維護。可以達到DRY Code的效果。 如何使用元件？ 使用元件有兩個步驟：註冊與安裝『Register first and install later』。元件需要註冊才可以使用。註冊有兩種方式，分為全域註冊與區域註冊兩種。經過全域註冊的元件是為全域元件（Global Component ），經過區域註冊的元件是為區域元件（ Local Component）。兩者的差別是，全域元件可以被「所有的」vue 實例使用，而區域元件只能在其所在vue 實例的作用範圍內有效使用。此外，也可以使元件成為巢狀結構，在元件中再註冊元件。以下是全域註冊與區域註冊的註冊方式： 全域註冊 (Registration) 使用Vue.component(tagName, options)來註冊一個元件。第一個是元件的名稱，它必須是小寫，第二個參數是JSON物件。JSON物件通常會放下面四種屬性： props data methods computed 另外要注意的是，元件的註冊必須在Vue實例初始化前完成。而且Vue.component 的

Vue CLI是個用來快速建置Vue專案的工具。目前已經推出第三版。如果你現在才開始學習使用Vue CLI的話，可以把腦容量省下來，直些參考官網說明使用Vue CLI 3來建置專案就好。萬一你是在去年開始接觸到Vue CLI的話，可能當時碰到的是Vue CLI 2的版本，這時可能感受到版本過渡的差異。到底Vue CLI 3跟以前的版本有什麼差別呢？ 有別於上一個版本，Vue CLI 3提供GUI介面，降低使用者門檻，在圖形介面下點一點按鈕就可以做到Vue CLI 2相同的事。如果不習慣command line介面的話，可以使用GUI介面操作。 Vue CLI 是以 WEBPACK搭配相關套件SASS、 ESLint 、BABEL 編譯成可運行的版本。可以用ES6寫.js .Vue。 Vue Cli 3提供插件方式安裝，例如Type Script、SASS、 ESLint 、BABEL ，再透過以 WEBPACK編譯成可運行的版本。 安裝Vue CLI 2 安裝之前先確認一下是否已經安裝過Vue。 可以使用下面指令確認： $ vue -V 注意：V要大寫。 npm的網站 上有vue cli2的安裝說明 ( https://www.npmjs.com/package/vue-cli ) 順道一提的是，在安裝vue cli之前，必須先安裝 Node.js 。至於如何安裝Node.js在這裡就不贅述了。 $ npm install -g vue-cli 你有六種Template可以安裝Vue CLI Current available templates include: webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. webpack-simple - A simple Webpack + vue-loader setup for quick prototyping. browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit

要透過Django製作網站，urls.py可說是一切的起點。 由於每當使用者在瀏覽器上面輸入網址的時，urls.py 就會帶領使用者到達指定點位置。因此，我們可以在urls.py 裡設定每個網址可以到達的地方。 例如，下面是urls.py預設的狀態( 首度安裝 完成後的狀態)。當我們啟動網站時，只要進入 http://127.0.0.1:8000/  就可以看到Django預設的首頁。 from django.contrib import admin from django.urls import path urlpatterns = [ path('admin/', admin.site.urls), ] 如果我們在瀏覽器的網址列中輸入 http://127.0.0.1:8000/admin/ 的話，urls.py 會帶我們去 admin指定的 admin.site.urls 頁面。( http://127.0.0.1:8000/admin/login/?next=/admin/ ) from django.contrib import admin from django.urls import path urlpatterns = [ path('hello/', admin.site.urls), ] 如上面的程式碼，現在我們將path('admin/', admin.site.urls), 改為 path('hello/', admin.site.urls), ，在瀏覽器的網址列中輸入 http://127.0.0.1:8000/admin/ ，將不再導向 admin.site.urls 頁面，反而會告訴你 ： Page not found (404) 。The current path, admin/, didn't match any of these. 但是，如果你在瀏覽器的網址列中輸入 http://127.0.0.1:8000/hello/ 時，urls.py 會帶我們去 hello 指定的 admin.site.urls 頁面。( http://127.0.0.1:8000/hello/login/?next=/h

下載與安裝Django有下面幾個步驟： 在撰寫Django程式碼之前，先建立一個虛擬環境，並且在這個虛擬環境裡面開發你的程式。 由於virtualenv最大的好處是，可以讓每一個python項目單獨使用一個環境，而不會影響python系統環境，也不會影響其他項目的環境。這樣子的話，如果開發項目中的程式有什麼問題，也不會破壞到原本電腦系統中的其他項目。 因此，我們在安裝Django的步驟前面建議先加上建立虛擬環境的步驟。如果你不想要建立虛擬環境的話，也可以直接從第二步驟開始安裝Django。 步驟一：建立虛擬環境 virtualenv安裝的位置在 venv/中的 lib/site-packages/目錄裏，而不是在原本系統的python的lib/site-packages目錄裏。換句話說，virtualenv 創建的虛擬環境與主機的 Python 環境無關，你主機配置的libary不能在 virtualenv 中直接使用。你需要在虛擬環境中利用 pip install 再次安裝配置後才能使用。 1. 在python 3下安裝 virtualenv，用這樣創建的 virtualenv 預設的 python版本是python3。 pip3 install virtualenv 2. 透過virtualenv 建立一個虛擬環境：venv python3 -m virtualenv venv 3. 進入venv資料夾中 cd venv 4. 啟動虛擬環境 source bin/activate 步驟二：在虛擬環境中安裝Django 你可以安裝最新版本的Django pip install django 或者，你可以指定特定的Django版本來安裝，例如下面的指令我們指定要安裝Django 2.0.2版。 pip install django==2.0.2 在目前這種做法下，你可以重複第一步驟來開啟多個虛擬環境，並且在每個虛擬環境中安裝不一樣版本的Django。這些程式雖然版本不同，但是它們只在自己的虛擬環境中發會作用，虛擬環境與虛擬環境相互之間卻不會互相干擾。 步驟三：透過 django-admin 開啟一個專案 接下來你可以透過 django-admin 開啟一個專案，下面

Python的主要迴圈指令有二，分別是For迴圈與While迴圈。兩者的差別在於while迴圈不會預設重複的次數，也就是說如果使用while迴圈時，可以無限次的重複。如果預先知道需要重複多少次的話，使用For迴圈會比較恰當。 For迴圈(For loops) 如果預先知道需要重複多少次的話，採用for迴圈是比較洽當的。他的語法如下： for 變數 in 串列： 程式區塊 例如下面的例子。其中ｉ是變數，mylist是串列 ，而程式區塊的內容則是 print(i)。 mylist = [1,2,3,4,5] for i in mylist: print(i) 上面的程式碼執行後，電腦會陸續的將mylist串列的內容印出來，就像下面一樣。 當一切元素都處理完畢後，就會結束for迴圈。 另外，也可以使用range()來設定迴圈的執行次數，其語法如下： for 變數名稱 in range(重複次數):   重複執行的程式 巢狀迴圈 for迴圈也可以放在另外一個for迴圈裡面，這樣就成為所謂的巢狀迴圈。巢狀迴圈的執行次數是各層迴圈的乗績。 利用這個特性，我們可以透過巢狀迴圈製作九九乘法表。 for x in range ( 1 , 10 ): for y in range ( 1 , 10 ): product = x * y print ( "%d x %d =%d" %(x , y , product) , end = "" ) print () While 迴圈（While Loops） 如果條件符合的話，程式區塊就會被執行。反之，若條件不符合時，就結束迴圈繼續執行迴圈後面的程式碼。也就是說while迴圈會在條件為True的狀況下，重複執行內部的程式區塊內容。while迴圈通常沒有固定執行的次數，語法如下： while 條件:     程式區塊 下面的例子。條件是 n <3 ，程式區塊的內容是：print("name") n = 0 while n < 3 print ( "name" ) 需要特別注意