VueJS

[IT 鐵人賽] 動態載入 Components Day 21

我們又回到動態載入系列了,如果覺得我很煩的話可以先行離席沒關係。由於我昨天整理 Dockfile 的時候有點過於厭世,所以今天我這邊一樣會帶入一些昨天的結構,至於說 Dockfile 的話還沒好,如果想要先看結構的,可以先去我的 Github 上面看。 ITHome Ironman 2019 Hybrid App 混合模式的動態載入 其實我比較偷懶,上面的例子我直接掃全部的資料夾,然後將檔案加入樣版中。不過這個將來一定會 壞調 壞掉,所以小朋友不要亂學。 $jsFiles = ['main.js']; foreach (new \DirectoryIterator(ROOT

  • Hina Chen
    Hina Chen
6 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
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