VueJS

[IT 鐵人賽] 簡易的後端輸出與 Hybrid 模式 Day 20

昨天提到了後端與前端的混和( Hybrid )模式,我們今天就會提出比較完整的例子,來說明一下我自己目前比較喜歡的方式。由於 Phalcon 實在有點冷門,所以我今天會用一個更冷門的 Slim PHP Framework 來介紹( 你是故意的嗎 )。 對了,今天也會有 Docker 會分享給各位,方便大家不用處理環境問題。 後端的設計 我們昨天有提到後端的作法,今天我們來實作一些關於後端的操作方式。首先,我們需要準備一些需要的工具: PHP 7.3 with PHP-FPM Nginx Slim PHP Framework

  • Hina Chen
    Hina Chen
5 min read
VueJS

[IT 鐵人賽] 後端的 Template Layout Day 19

我們昨天看完了 SSR 的部分,有沒有覺得 我好興奮!我好興奮啊!(並沒有好嗎)。聊了那麼多前端的事情,我們今天來聊一下關於後端的部分。我之所以沒有採用 SSR,最主要還是因為我不太會寫 JavaScript,所以我還是繼續使用 PHP 比較妥當(欸)。 接下來的後端我大概都會用 PHP 當例子,當然你要換成其他的也可以。但是,如果你要用 NodeJS 的話,那你還是回去 SSR 好了(慢走不送)。 index.xxx 樣版 現在我們知道

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] 為何我不用 SSR? Day 18

昨天提到了關於 SEO 的狀況,那麼,我們是不是使用 SSR 就能解決那些問題?關於這件事情我還是持保留態度。我們今天會帶大家來看一下 Vue 的 SSR 是怎麼運作的。 至於為何我沒有採用,沒有為什麼,因為我不會用啊(啊哈哈哈哈) SSR 要如何開始? SSR 的全名為 Server Side Render,顧名思義,就是先在伺服器端渲染的意思。那麼,跟原本使用 JavaScript 前端渲染,到底為何又要牽扯到後端?最主要的目的還是為了解決 SEO

  • Hina Chen
    Hina Chen
19 min read
VueJS

[IT 鐵人賽] SEO 的問題 Day 17

現在的 JavaScript 框架面對搜尋引擎,普遍的問題大概都會圍繞著 SEO 打轉,這是以往在伺服器渲染的前端頁面下所沒有的。然後,對於這樣的狀況,多數也是有相對應的解決方案,只是是否合乎你的使用情境,就見仁見智了。 我們今天會提到一些關於 SEO 與其工具的介紹,就讓我們繼續看下去。 前端渲染 不僅僅是 Vue 這個框架,另外兩家若僅僅只是前端渲染的話,多少會遇到 SEO 的問題。而撇除掉網頁的內容( content ),我們還要處理關於 <meta> 的事情,中文說法有很多:元資料、

  • Hina Chen
    Hina Chen
7 min read
VueJS

[IT 鐵人賽] 題外話:原始碼之藏在 $watch 當中的神奇設定 Day 16

其實,這是我之前寫過的 一篇文章(我絕對不會承認是拿來墊檔的)。雖然我覺得這件事情很奇妙,但是比起 EventBus 的都市傳說,這個應該算還行。只要你看過原始碼應該就能理解。 是說,有誰會沒事去挖人家的原始碼來看( 就你啊 )。 再看一次 $watch 我們平常在操作 $watch 的時候,會有兩種寫法: export default { name: 'Component', data () { return { myAge: 18 } }, watch: { myAge (newAge, oldAge) { // newAge 表示改變後的新值

  • Hina Chen
    Hina Chen
8 min read
Vue 元件溝通

[IT 鐵人賽] Component 的溝通方式 :props Day 14

這裡拿 :props 來回鍋複習一下,也順帶的,我們會提及一些關於事件溝通的方式。或者說反過來,講事件溝通,然後順帶提一下 :props 也可以。元件溝通其實一直都是各種框架裡面比較麻煩的事情,昨天提到的 Vuex 其實算是偷吃步,元件之間在沒有狀態管理機制的情況下,多數還是仰賴事件傳播為主。 只是,當元件趨於複雜,事件傳播就相對惱人。 props 之前在提及元件的時候有提到這個屬性,如果忘記的人可以再回去看一下: Component 基本入門 Day 2 當我們需要將資料傳遞給元件的時候,我們可以利用 props 來達成這件事情,當然請記得,他是屬於單向綁定的,如果需要雙向資料溝通,

  • Hina Chen
    Hina Chen
11 min read
Vuex

[IT 鐵人賽] Component 的溝通方式 Vuex Day 13

我們會把 Vuex 放的比較前面,是因為既然使用了狀態管理機制,那麼,用他來跟各種元件溝通,是比較方便的一件事情。然後,我拖了那麼久才講到元件溝通好像有點奇怪,也是啦,其實我本來就不是很喜歡溝通(欸不對)。 是說,溝通只是 Vuex 附加的好處而已其實。 元件交換資料 我們之前有提過元件之間的資料交換,也提過 Vuex 的基本應用: Component 基本入門 Day 2 Vuex 基本入門 Day 8 之前說過 Vuex 是幫我們做狀態管理的,所以說我們拿來做元件交換資料也是很適切的事情。

  • Hina Chen
    Hina Chen
7 min read
2019

[IT 鐵人賽] 薛丁格的生命週期 Day 12

是的,這個篇幅會用來聊一下生命週期當中,比較奇怪的事情。薛丁格 我就不解釋了,程式執行其實並沒有像是量子力學的那種疊加狀態,只是,當 Vue 的元件趨於複雜,再搭配上 Vue Router 的時候,你的某些生命週期中的勾子,就會有你所不知道的狀態。 最終狀態 有些時候你可能會遇到一個情況,當我們使用 console.log() 去印出某個物件的時候,你會發現他是有東西的。然後你如果印了某個物件的屬性,例如說 HelloKitty.foo 結果是 undefined。 不要問我為什麼,這是 JavaScript 的

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] Router 與生命週期 Day 11

我在先前的篇幅當中,有提到生命週期與路由的關係。我們這一個篇章,就將路由與生命週期之間的事情,做一個全面性的剖析。如果你之前有稍稍稍稍微留意我的部落格,應該會看過我曾經碎念過 Router 與生命週期之間的事情。 重新檢視 lifecycle 與 vue-router 關於 vue-router 外面的兩三事 VueJS 快速入門 Day 1 所以我就不跪求心理陰影面積了。 生命週期與 Hooks(勾子) 我們除了 Vue 原本就有的方法之外,如果另外再加上 Router 所提供的,那麼大家的順序上就很容易搞混,我們先條列一下到底會有哪些方法: beforeCreate

  • Hina Chen
    Hina Chen
10 min read
2019

[IT 鐵人賽] Router 進階應用 Day 10

聊完了基礎的路由功能後,我們接著來看看關於路由的進階應用方式。你放心,前陣子一直提到的動態元件載入,這邊一樣會出現,所以先給各位打個預防針。不過,如果你真的看膩了什麼動態載入的事情,那麼你想要跳過我也是欣然接受。 何況,進來就進來,出去就出去, 哪有人一直動態載入的啦。 路由守衛方法( Guards Methods ) Navigation Guards 在 Router 當中提供了幾種所謂的路由守衛方法: 其實我覺得叫路由防衛比較好(聽起來超中二的) beforeEach 每個路由要被執行之前,都會先經過這裡,他會傳入三個參數: to 你要去的路由位置。 from 你從哪一個路由位置進來,如果沒有,預設是

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] Router 基本入門 Day 9

聊完狀態管理之後,我們來聊一下前端的路由。最近各大家前端工具都有支援前端路由的功能。而 Vue-Router 是官方推出的。功能上都大同小異,你也可以自己做一個(我最喜歡自己做輪子了)。 如果你做好了記得開源出來~ 前端路由 前端做這件事情應該是 Angular 起了一個頭,畢竟身為 Google 的親生兒子,所以很熱門。其實他並不是什麼很新穎的技術,主要是依靠 HTML5 History API 來做操作。在不支援 History API 的瀏覽器當中,大多都是使用 URL hash 的方式來達成。 例如說:

  • Hina Chen
    Hina Chen
11 min read
VueJS

[IT 鐵人賽] Vuex 基本入門 Day 8

在我們要聊元件溝通之前,我們先來聊一下關於 Vuex 這個套件。他是官方推出的狀態管理的工具,官方中文翻譯叫做倉庫(?),也是啦,如果把 store 直接翻譯的話,好像叫倉庫也是挺合理的。 但我覺得好像狀態管理會比較符合事實。 Vuex 如果你是使用 Vue CLI 的話,那就是用 yarn 或 npm 裝一下就好, yarn add vuex # OR npm i vuex 然後在你的 App 裡面,你會有幾件事情要做:

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] new Vue v.s new Vue Day 7

大家一定會覺得這個標題很奇怪,不就都是 new Vue 嗎?是有什麼差別?對啊,其實都是 Vue 沒錯,但是就像是斯斯有兩種,Vue 也是有好多種不同面向。 是說現在斯斯好像不只兩種了。 new Vue 通常,我們在實作一個 App 的時候,最終我們使用了 new Vue 來將整個 App 綁定在某一個 DOM 的元件上。如果,你綁定一次不夠,想要綁定兩次呢?也不是不可以, import

  • Hina Chen
    Hina Chen
8 min read
ITHome

[IT 鐵人賽] Component 魔術方法 Day 6

這是關於元件方法的最後一篇,實際上來說,Vue.options 並不能算是很魔術的方法。如果把他歸類為奇技淫巧可能比較適合(政治正確)。由於元件的註冊過程當中,會將相對應的實體放到這個屬性當中,所以,我們就可以利用這個地方來做一些事情。 身為邊緣人,我最喜歡這種邪門歪道了。 App 實體 a.k.k Vue 替身 我們在使用 Vue 的時候,在最後一定是使用 new Vue 之後再 $mount 到某個 DOM 底下。 import Vue

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] Component 魔術方法 Day 5

上一篇提及了 import 與 require 之後,我們現在把重心移到元件本身的一些屬性上面。本次內容將會圍繞在 :is 這一個元件屬性上面,我們來看看這個魔術方法到底可以做到哪些事情。 還有,可以做到什麼程度(燦笑) :is 屬性 這個屬性相當特別,他的目的是,將使用這個屬性的元件替換掉,替換成你所 指定 的 Vue 元件。換句話說,你只要把你的 Vue 元件引入後,甚至可以不需要在父層元件設定 components,就可以使用。 <template>

  • Hina Chen
    Hina Chen
8 min read
2019

[IT 鐵人賽] Component 魔術方法 Day 4

我們講完元件的應用之後,本次篇章我們會來說明一下,關於 import 與 require 在元件當中的應用。這兩個方法對於現今的 JavaScript 來說,並不是什麼新奇的東西。而搭配 Vue 的元件又能玩出什麼新的把戲?讓我們繼續看下去。 require 方法 這個方法在一般的 JavaScript 當中很常見,主要目的就是為了將檔案讀取進來。而在 Vue 裡面,他不僅僅是可以引入 JavaScript 檔案,連同圖片檔案也可以利用這種方式來載入。只是圖片檔案利用 require 載入後,會變成以 base64

  • Hina Chen
    Hina Chen
10 min read
2019

[IT 鐵人賽] Component 進階應用 Day 3

上一個篇章提到了基本的元件使用,雖然說是比較基礎的部分,但前前後後也寫了超過四千字的廢話。對於 Vue 比較熟悉的人來說,應該不會有什麼障礙才對。我們今天將會繼續提及,關於元件使用上的一些進階應用,也會接續上一篇比較沒有著墨的部分。 關於混合 Mixins 上一篇有約略提到 Mixins 的個特性,有曾經寫過 SCSS/SASS 的人應該對於這個東西不陌生。是的,他有點類似,也是將一些共用的函數提出去的一種作法。 實際上,Mixins 很類似一個元件的結構,只是他是被封裝成一個物件( Object ),然後透過元件的 mixins 屬性來導入。而 Mixins 本身有兩種作法,

  • Hina Chen
    Hina Chen
6 min read
2019

[IT 鐵人賽] Component 基本入門 Day 2

現今算是 Web Component 當道,如果撇除 HTML5 原生的元件,那麼其實各家不管是 Vue, React 還是 Angular,大多都是圍繞的這個議題。 我們這裡開始會針對 Component 做一系列的操作,你可以想像成整個 Vue 生態中,大部分的時間是圍繞在 Component 上面的。所以我們這裡會慢慢的從基本使用上提起,如果對於 Vue 有初階認識的,或許可以跳過這裡(應該吧?) Component a.k.a 元件

  • Hina Chen
    Hina Chen
17 min read
VueJS

[IT 鐵人賽] Vue 從前端到後端 Day 0

上次參加好像是 2014 年,然後我寫到第二篇就超過時間,索性直接放棄(欸)。不過,由於 Famo.us 也莫名的退流行(等等,好像根本沒流行過)。所以就算是一個,只有我一個人自己玩得很高興的東西,說著說著著實感傷了起來。 這次想說,趁著稍微有一點時間,可以寫一下這些日子接觸 VueJS,到現在的一些心路歷程。像是那個說好的 ReactJS 好像就一直被我遺忘了(啊哈哈哈哈哈)。然後 Ng2,欸,現在好像是 Ng8 了吧?就當作我從來沒寫過 Angular

  • Hina Chen
    Hina Chen
5 min read