fbpx
Tag

Vue Archives - 快樂學程式

Javascript工程思維網頁前端

如何在主流 JavaScript 框架中做選擇？横向對比 Vue, React, AngularJS, and Angular2

本文原文撰寫於2017年，部分資料可能因時空背景而有不同。 如果你不曉得該如何為你的產品選擇一個合適的前端框架，這篇文章也許可以給你一些啟發。 一個有趣的事實是：IBM 發表的 2017 年最值得學習編程語言名單中，JavaScript 榜上有名。 正是這位 IT 巨頭指出，JS 在網站中驚人地達到 94.4％ 的使用率，而且「不太可能降低」。 JavaScript 能確保「對用戶非常友好的網頁，因為它負責整個 web 界面，包括動畫和交互」。 不管你怎麼看，JavaScript 很重要。 這也指明了潛在 Web 開發人員的方向：如果你深入前端，你不得不在某些時刻面對 JavaScript。並且 正確的開發指南 可能有助於此。 讓我們假設你知道 JavaScript 基礎知識，不是一無所知的那種，如果假設是正確的，…
學程式助教
March 11, 2020
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
Javascript專案思維網頁前端

[筆記] 從零接觸 Google Map API 2：在 Vue.js 中使用 Geocoding 將地址轉換成地標

為了準備 Bootcamp 畢業前的 Final Project — 製作類似訂餐平台 — 開始接觸和學習 Google Map API，上一篇筆記是從零開始學習，並在 Vue.js 中嘗試使用，透過 Maps JavaScript API 服務實作地圖、地標、訊息視窗功能 — 最終將不同行政區的數間假餐廳展示在地圖上，提升使用者體驗 — 本篇將筆記使用 Maps JavaScript API 的另一項功能「Geocoding Service」 (more…)
學程式助教
December 11, 2019
Javascript專案思維網頁前端

[筆記] 從零接觸 Google Map API 1：在 Vue.js 中實作地圖、地標、訊息視窗

最近在準備 Bootcamp 畢業前的 Final Project，由於專案和訂餐平台有關，想說若使用者能透過地圖快速瀏覽營運中的餐廳，或能在訂單上看到地圖顯示領餐地點，可以增加使用者的體驗。由於之前還沒有碰過 Google Map API，更不用說在 Vue.js 當中使用，想說趁專案開始前，能嘗試自學一下，也看一下實作的可行性與成果。以下將筆記「從零接觸 Google Map API，在 Vue.js 中實作地圖、地標、地標訊息視窗」 (more…)
學程式助教
December 10, 2019
Javascript網頁前端

使用Vue的時候如何共用Sass變數?

我們在開發網站的時候常常會需要說將Sass的環境變數，或是function與mixin給抽取出來，達到共用，不要重複造輪子! 但是你會發現我在使用Vue開發的時候，雖然組件化方便我們管理每個組件的Sass，但是多了個不方便的就是如果要使用變數，或是function與mixin的時候要怎麼辦? 如果是聰明的你一定會想到這樣! 但是問題來了，如果今天你有100個 component 你就要引入100次，然後如果你忘記引入一個你就要慢慢找........(WTF 所以那有沒有方法可以全域共用了? 答案是 "有的" !!! 其實很簡單，我們只要對webpack的設定做一點小小修改就可以達到了 { test: /\.(sass|scss)$/, use: }, 看到了嗎~就是在loader裡面去做設定，這樣他就會幫你把那個_mixin.scss變成全域的使用，你就不用在component裡面在載入_mixin.scss了! 是不是很方便XD (more…)
學程式助教
November 26, 2019
Javascript

如何在Vue裡面使用Element-ui並修改CSS樣式呢？

大家好！我是Mike，今天要來說說大部分使用 Vue 開發公司內部後台系統的時候，通常大部分都會需要使用 Vue 的 Ui framework 來開發，雖然大部分的Ui framework 都有自己的 CSS 風格，我們不用再去寫 CSS，但是難免會有需要自己修改 UI 的 CSS的時候，但是每套 Ui framework 的修改方式又不太一樣，在這邊我將介紹這套 Element-ui 是如何在Vue裡面去做 CSS 修改。 首先我們先掛載 Element-ui 在這邊我們把所有的 element-ui 給掛載到全域，還有它的…
學程式助教
November 26, 2019