fbpx
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH3 Vue實例

上回這裡成功的建置環境後,進入下個環節的討論。就是在接觸框架之前,其實並不是非常明白所謂的架構,就會常常出現各種功能混在一起的情況,像是一個Js事件需要同時處理「資料變動」、「樣式修改」或是「資料處理」以及「後端互動」,雖說在開發時都算順利,但過了幾天後回來開發,或是後來要針對網站進行改動維護,卻完全不知該從何下手,而這也就是框架最大的價值,他讓我們在開發時,每一段Code可以專注處理某一個部分的任務,結構分明,在維護上也能更加輕鬆。   開始使用Vue.js   在Vue的官網其實有明確指出「建議不熟悉Vue或是node.js環境使用的開發者先不要使用Vue-Cli」,所以建議一開始接觸Vue.js框架可以先從CDN開始熟悉,基本上只需要在HTML檔的 <head> 中引入CDN即可使用: //開發者模式版本 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //產品開發使用的穩定版本 <script src="https://cdn.jsdelivr.net/npm/vue"></script>   創建Vue實例 在引入CDN之後,要讓網頁能夠成功顯示需要有兩個要件,分別是模板 (Template)與實例 (Vue Instance),模板可以直接建立在HTML檔中,而實例則是Vue的Javascript物件實例,首先我們先從實例開始說起。 Vue的實例主要是關注資料面的操作,他會負責控管資料以及處理資料,而在Vue的實例中,物件的屬性與方法是有既定寫法的,最核心的屬性設定有 el 以及 data ,el 是指Vue實際掛載在DOM的哪一個節點,通常這個屬性會設定為 "#app" ,這個「掛載」的觀念會在後面的章節中做解釋,這邊可以先把他理解為Vue實際能在DOM中的作用範圍,如果超出這個節點,Vue就無法控制了;接著 data 則是這個頁面會使用到的資料,寫法就是 Object ,key是在模板使用的資料名稱,Value是資料的實際內容,像下方的範例就是我們在Vue中建立了一筆資料,資料的變數名稱叫作 text ,而資料內容是 "Hello World!": var vm = new Vue({ el:…
學程式助教
March 11, 2020
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH2 環境建置

在上回這裡對Vue有了基礎概念後,在開寫Vue之前肯定需要經歷一番環境建置的陣痛期啦~不過其實在建置Vue.js的環境我個人覺得還算友善,不像某Tensor開頭的機器學習框架,要建立GPU計算的環境真的是弄到懷疑人生......,今天就來跟大家分享一下小弟在建置Vue.js環境時遇到的過程以及遇到的狀況   首先,那個Node.js與NVM (Node Version Manager)   因為在學習Vue之前我主要都是利用SFTP auto save上傳到Host然後再看改動的方式開發,基本上沒有接觸過本地端的開發方式,所以也沒有使用過Node.js的經驗,所以在安裝Vue之前必須先進行Node.js的環境安裝,基本上這也是在所以過程中最讓我印象深刻的地方。   安裝Node.js有幾種方式,第一種就是直接上Node.js的官方網站下載直接安裝,我一開始也是直接利用這種方法,但後來後悔了;第二種是利用Node的版本控制工具 - NVM進行安裝,這是我蠻推薦的作法,畢竟在開發或維護不同的專案時,每個專案開發時的Node版本可能不盡相同,所以這時候NVM的優勢就是可以讓我們直接快速地進行Node.js的版本切換,不用再刪除重裝之類的。   要安裝NVM的方法基本上非常簡單,只需要使用他們官方的Github上說明的指令,即可在Terminal進行安裝: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash 在下載完NVM之後可以嘗試在Terminal執行 nvm --version 如果他有回應相應的版本號,就代表NVM安裝成功了,接著就可以進一步利用NVM安裝Node.js。   利用NVM安裝Node.js…
學程式助教
March 11, 2020
Javascript工程思維網頁前端

用Vue.js框架實作自己的Blog – CH1 新的開端

接觸前端到現在也差不多快一年半了,過去在開發前端的時後,都是使用原生javascript與jQuery以及php進行開發,雖然隨著時間推移接觸到的東西越來越多,開始有了有系統性開發與後續維護的需求,剛開始頂多就是將JS與php物件化,但還是無法完全解決頁面控制以及資料、事件、渲染、樣式控制等不同任務間的分離,所以開始接觸Vue.js框架來增加開發效率並且將原本幾乎純手刻的這個Glovecoding blog進行翻新,順便寫篇系列紀錄一下~ Beginner of Vue 在約莫半年前的時候其實就有試著自學Vue框架的想法了,但當時自己的背景知識量還不大夠,包括AJAX的運作以及同步異步的線程阻塞問題等,在當時都是我無法掌握的技術,最近把這些東西補齊並且看了根webpack相關的技術之後,才回頭撿起這個框架慢慢開始啃。Vue的框架有一個非常大的優點,尤其是對於英文較不熟練的開發者而言,因為開發Vue框架的工程師是來自中國的,所以他本身官網的技術文件都支援簡體中文,如果不習慣閱讀簡中的朋友也可以利用Chrome 的功能把它翻成繁中XD,在進入實作之前還是得先來了解一下這個框架本身的特性。 Components 組件的概念 在使用Vue框架的時候會不斷地使用到Components來進行網站頁面的組裝,依照不同的頁面需求,引入不同的components 到根(Root) 或是常見的App頁面,在這個框架中,其實整個網站結構很像一個葡萄串,從最上面的Root 到下面的頁面(View) 與組件(Component) 不斷的往下串,最終變成一個不斷串連組裝的網站結構,像我的Blog 結構大概長這樣: 整個部落格主要分為首頁、分類、關於、文章、404Notfound 五個頁面,這五個頁面會附著於#APP這個根上,而每一個頁面各自會使用到不一樣的組件進行組裝,這些組件的方便之處就在於:像是首頁與分類頁面都會使用到卡片作為文章的顯示方式,在一般的情況我們需要把相同的版型寫在不同的頁面,這就會造成在維護上的麻煩,尤其又是使用PHP生成內容的時候,只會使頁面變得越來越複雜,然而在Vue框架中,我們可以把這些會重複使用到的版型部分化做組件(Component) 他是一個獨立的模板,在需要使用到這個模板的時候,我們只需要引入這個版型即可,像blog首頁的卡片式文章顯示就是利用上圖中的紅色組件 - CardUi 所架構,而組件的運作方式在之後的文章中,我會在獨立介紹他。 資料驅動一切 在Vue框架當中,有另一項特色就在於它是利用資料驅動所有變化的,當資料發生變化時,Vue會根據我們設定的情況做出相應的改變,首先在這個架構中,資料與模板是獨立分離的,在一開始寫網頁時,我們會直接將內容寫在HTML的標籤當中,或是透過PHP在預處理階段時生成,但在Vue框架中,資料會獨立存取在Vue物件的Data中,然後在物件被實例化的Creat階段時渲染(Render) 進模板當中,像是這樣:…
學程式助教
March 11, 2020
HTMLJavascript工程思維技術問題網頁前端資源整理

盤點10個超多人使用的前端動畫庫!

在網頁設計上,你可能固定使用某幾個動畫庫,但你知道 GitHub 上面其實有超多超夯的前端動畫庫嗎? 前端動畫不僅能代表該網頁製作者與單位的用心,同時也能增加使用者好的體驗, 這篇文章幫喜愛網頁互動動畫的你整理了10個超多人推薦的前端動畫庫! 我們趕快往下看吧! 1. jQuery.countdown 創立者:hilios GitHub 人氣:2.2K stars GitHub 傳送門:https://github.com/hilios/jQuery.countdown 2. aniJS 創立者:anijs GitHub 人氣:3.6K stars GitHub 傳送門:https://github.com/anijs/anijs 3. matter-js 創立者:liabru…
學程式助教
March 4, 2020
Python初學程式

【線上課程心得】用一個假日進行 Python 資料分析視覺化實戰 By Blueboy0937

第一節由老師解析python基礎功能並利用練習題先來思考如何呈現再來熟悉各項指令,這是相當不錯的進入到python的第一步,但我會希望print可以提早幾的單元,因為print 功能是相當常用的功能,安排在99乘法表的作業後較無沒有什麼作用。 第二節利用pandas了解資料視覺化的前處理,資料處理數據呈現的重要,在之前學習會常常想把已有的資料數據就想要做出圖表卻無法呈現,原因就是資料需要做處理並篩選,在這課程中老師有在這部分給了很多方法,將各式不同來源資料用適合的處理的方式,先將數據列出以便後續圖的繪製。 第三節Maplotlib 與 Seaborn 已經是python常見視覺話套件,在本次課程讓我更了解這兩個套件更多套件搭配不只有折線、柱狀這兩樣還有點狀、箱圖、小提琴情圖….還有KDE在統計上的輔助使用。 套件指令由老師解析後,如何使用並發揮視覺化功能,也能夠多加嘗試有助於更多面向的資料型態出現不同的樣貌,可以在分析上能以不同角度來評估。 希望能夠加入視覺化中文顯示範例 因課程上都以英文呈現table但在目前的工作環境上還是會希望以中文介面呈現,網路上雖爬文也找得到中文顯示方式,若能夠直接在本課堂教學一次打包更讓人為之一亮。   Udemy 線上課程:【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰 成為快樂學習員:為推廣與提升學習 Python 資料分析之環境,提供學習員鼓勵計畫。分享本篇文章做推薦學習至臉書動態牆並來訊「快樂學程式」粉專分享你學習該堂課的動機與該貼文連結,學程式提供八折優惠折扣。被分享數有達10個以上進行申請(oh!你的學習意願有目共睹,必須給你拍拍手),更提供你六折優惠!讓快樂學程式幫助你快樂學習,提升職場競爭力:)   心得出處[email protected]
學程式助教
February 29, 2020
Python初學程式

【線上課程心得】用一個假日進行 Python 資料分析視覺化實戰 By Sayokagain

先講優點,我覺得老師口齒非常清晰,而且對課程編排的方式別具匠心.這個課程設計內容跟外面比起來的最大不同點在於,是以實戰方式為導向,將所有實戰資料分析時最常用的知識與技巧,做為課程內容設計.因此,不會像一般的教學那樣多到包山包海,反而只有最濃縮的重點精華,而且每一項舉例幾乎都是實際處理資料分析時需要用到的小技巧(不論是一開始程式語法教學或者第二章Pandas都是),所以學起來會感覺東西特別少又特別好學,因為我之前看過其他書籍的教學,很多Python語法或範例都是資料分析不常用的,但這份影片內容的教學卻很有親切感,且非常實際. 我對這份課程的一些建議如下: 1.老師示範時是使用Mac系統,但我實際是使用Windows系統,因此一開始操作時就會遇到很多不一樣的狀況,我建議路課程前可以用Windows系統實際操作一次每個步驟看看,因為有很多狀況可能都不同.(我一開始是連jupyter notebook都進不了,但我自己解決了Path問題,可是一般不懂Dos的學生應該就會放棄了),又或者某些套件是否已經預設安裝,好像Mac跟Windows系統也會有落差,這個可能也需要測過才知道. 2.好像沒有教到左取字串跟右取字串的方法(或者從字串某個字取到某個字),另外,關於那個join的用法,不知道老師是否能順便教自訂函數(或方法),因為很多學過其它程式語言的人可能都會犯跟老師影片示範中一樣的錯誤(一般join陣列會把陣列放前面,join內放用來合併元素的字元).想知道有辦法透過自訂函數將語法改為像老師誤打得那樣嗎?還有,從第二單元開始影片的聲音就變超小聲! 3.我有實際將老師的每一行指令打過一次(我並不是純粹看影片而以),但我發現過程中遇到好多障礙,第一個好像是那個範例檔我找不到(因為資源沒有擺在正確的課程單元位置),接著是下載後的範例檔要擺放的位置(影片中並沒有教jupyter notebook的預設目錄在哪,所以學生下載後不一定知道要如何打開),然後某個CSV檔打開時我發現竟然是UTF-8,但照理應該要是ANSI才是(而且這段影片教得跟我在範例檔內看到的並不相同),還有我試過老師教的某些參數,好比index_col,好像只能用在read_excel,用在read_csv就會掛,一些奇奇怪怪的小錯誤讓我自己跟打時花了好多時間除錯. 4.我覺得這份教材對學生的定位是混亂的,感覺好像想針對初學者,但是又不是完全的初學者.像前一點所提到的問題,如果是純初學者,應該會採坑採到死,但若不是針對完全初學者,前面教安裝與基礎語法那段,感覺好像也有一點太過基礎.又比如資料分析有一段,教到使用統計的平均數減標準差算z值,這個好像已經假定了學生是懂統計,如果是對初學者,應該會完全聽不懂才對(尤其一般學程式的統計學通常不會太好甚至沒學過) 其實我沒有來得及看完,我只看到第二章,我最後一件想說的就是,如果真的乖乖看影片,並且把每個單元都實做過,另外還乖乖記錄下所有錯誤更正,可能還需要更多時間.我剛好這兩周周末比較忙,平日晚上也不是都每天有空,所以只能盡量看盡量測,大概到2/28連假才有辦法全部看完吧,如果有可能,以同樣內容長度的東西,希望下次測試時間可以再多一些(抱歉,我知道截止時間是今天中午,我已經超過時間交了,但我想我應該是有很認真幫你們寫回饋的,如果需要,第三章的部分我可以之後補給你們,也謝謝給我機會試看這份教材) Udemy 線上課程:【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰 成為快樂學習員:為推廣與提升學習 Python 資料分析之環境,提供學習員鼓勵計畫。分享本篇文章做推薦學習至臉書動態牆並來訊「快樂學程式」粉專分享你學習該堂課的動機與該貼文連結,學程式提供八折優惠折扣。被分享數有達10個以上進行申請(oh!你的學習意願有目共睹,必須給你拍拍手),更提供你六折優惠!讓快樂學程式幫助你快樂學習,提升職場競爭力:) 心得出處[email protected]
學程式助教
February 25, 2020
Python初學程式

【線上課程心得】用一個假日進行 Python 資料分析視覺化實戰 By

之前有修過其他網路上的相關基礎python課程,但是概念上並不是很能夠理解清楚,所以我算是沒什麼機基礎可言。哈哈!!但是修完本課程真的清楚理解了許多,老師不管在說話語速、基礎名詞解說(像是什麼是資料結構、變數、型別等等)以及整體『資料分析視覺化』的概念上都講解的很清楚,一步一步的慢慢解說,並且會舉許多例子供大家更加地去明白那是什麼,讓沒有基礎的我真的理解了許多,並且能夠讓人聽起來覺得舒服以及有趣,並不會覺得無聊想睡,會想繼續聽下去。 另外,這門課程也有提供3個小的作業練習以及『第4個運用所學進行開放資料的視覺化分析』,並且有作業說明,所以覺得透過聽完老師的課程解說,做起來真的滿有成就感。而且老師在解說時是搭配ppt以及一步步的打出內容來慢慢解說的,所以在理解課程上會有時間去理解內容的。 最後,我覺得有興趣的朋友也可以利用線上免費的開放資料來照著老師的步驟練習,一定會越來越有成就感的。因此我滿推薦沒有程式基礎或是想增加一種技能的朋友,真心覺得能夠考慮看看『【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰』這門課程覺得值得推薦。 Udemy 線上課程:【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰 成為快樂學習員:為推廣與提升學習 Python 資料分析之環境,提供學習員鼓勵計畫。分享本篇文章做推薦學習至臉書動態牆並來訊「快樂學程式」粉專分享你學習該堂課的動機與該貼文連結,學程式提供八折優惠折扣。被分享數有達10個以上進行申請(oh!你的學習意願有目共睹,必須給你拍拍手),更提供你六折優惠!讓快樂學程式幫助你快樂學習,提升職場競爭力:) 心得出處[email protected]
學程式助教
February 25, 2020
Python初學程式

【線上課程心得】用一個假日進行 Python 資料分析視覺化實戰 By Jimjim

老師,課程講解的蠻仔細的,蠻認真的,但聽得出來,有時候老師錄音時應該很緊張,造成常常會有結巴,或是一直打結的感覺,希望老師可以放慢語調,也許可以降低緊張感,簡報可以再多做幾張,視覺代替聲音,畢竟看不到老師的臉,滑鼠也沒有再動,只聽到老師一直不斷講話,如果可以多些簡報畫面來解說,可以讓人更容易理解,印象也會更深刻。 Udemy 線上課程:【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰 成為快樂學習員:為推廣與提升學習 Python 資料分析之環境,提供學習員鼓勵計畫。分享本篇文章做推薦學習至臉書動態牆並來訊「快樂學程式」粉專分享你學習該堂課的動機與該貼文連結,學程式提供八折優惠折扣。被分享數有達10個以上進行申請(oh!你的學習意願有目共睹,必須給你拍拍手),更提供你六折優惠!讓快樂學程式幫助你快樂學習,提升職場競爭力:) 心得出處[email protected]
學程式助教
February 24, 2020
Python初學程式

【線上課程心得】用一個假日進行 Python 資料分析視覺化實戰 By Orztw2006

我是一位沒有程式基礎的學員,會參加測試的原因是,行業中有時候需要溝通製作一些數據的圖表。上完課後發現原來「找尋數據」也是非常困難的事。課程整體非常平易近人,除了第二節需要另外找一些資料理解更基礎的邏輯外,第一節和第三節都很容易理解,但是進入實際操作的時候會卡卡的,不外乎對資料不熟悉,對程式為什麼要這樣下指令不熟悉。 三章課程中,最需要花時間理解的是「Pandas資料處理」需要想出用什麼情境、什麼方法去做整理又為什麼要這樣整理都是功夫。講師的簡報很清楚的講解,Pandas的使用邏輯 功能非常容易理解。 環境建制與Python與資料視覺化講解都非常清楚,也很好理解。對於只是想理解操作和粗略懂資料視覺化是怎麼回事的學員,對這兩節課程應該很容易理解。 我會建議假如你沒有任何程式基礎,你也沒有興趣整理數據,可以不用購買課程。若你有程式基礎,想理解怎麼使用Python這是堂非常好入門的課程。 Udemy 線上課程:【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰 成為快樂學習員:為推廣與提升學習 Python 資料分析之環境,提供學習員鼓勵計畫。分享本篇文章做推薦學習至臉書動態牆並來訊「快樂學程式」粉專分享你學習該堂課的動機與該貼文連結,學程式提供八折優惠折扣。被分享數有達10個以上進行申請(oh!你的學習意願有目共睹,必須給你拍拍手),更提供你六折優惠!讓快樂學程式幫助你快樂學習,提升職場競爭力:) 心得出處[email protected]  
學程式助教
February 24, 2020
Python初學程式

【線上課程心得】用一個假日進行 Python 資料分析視覺化實戰 By Bluefish1121

很高興可以參與這次的測試,【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰 ,可以讓未接觸程式設計的使用者快速地上手,並瞭解Python帶來簡潔,快速的體驗.python是目前最熱門使用的工具,各大論壇都可以找到相關的文章和問題,因此在學習過程中,不用擔心沒有人可以問的狀況發生,透過這個課程輕鬆了解python的運作方式以及簡單閱讀語法,相信透過這個課程能快速掌握Python語言,學習無負擔. Udemy 線上課程:【增加職場技能】用一個假日進行 Python 資料分析視覺化實戰 成為快樂學習員:為推廣與提升學習 Python 資料分析之環境,提供學習員鼓勵計畫。分享本篇文章做推薦學習至臉書動態牆並來訊「快樂學程式」粉專分享你學習該堂課的動機與該貼文連結,學程式提供八折優惠折扣。被分享數有達10個以上進行申請(oh!你的學習意願有目共睹,必須給你拍拍手),更提供你六折優惠!讓快樂學程式幫助你快樂學習,提升職場競爭力:)   心得出處[email protected]
學程式助教
February 24, 2020