Upgrade to Pro — share decks privately, control downloads, hide ads and more …

玩轉 Vue Component 積木堆起來

2102a6b8760bd6f57f672805723dd83a?s=47 LINE Developers Taiwan
PRO
March 22, 2022
Technology
1
2.9k

玩轉 Vue Component 積木堆起來

玩轉 Vue Component 積木堆起來 @ LINE
Event: https://vuejs.kktix.cc/events/v-tw-meetup-008

2102a6b8760bd6f57f672805723dd83a?s=128

LINE Developers Taiwan
PRO

March 22, 2022
Tweet

More Decks by LINE Developers Taiwan

See All by LINE Developers Taiwan
都到了研究所 真的想往資訊領域嗎？
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
210
2022 Central team introduction
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
12
2022 iOS & Android team introduction
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
10
2022 Data Dev team introduction
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
25
2022 LINE NEXT TW Dev introduction
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
17
2022 Global Common Platform introduction
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
14
2022 LINE Developers Recruitment Day opening
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
19
2022 LINE Pay development introduction
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
8
2022 QA team introduction
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
23

Other Decks in Technology

See All in Technology
What's Data Lake ? Azure Data Lake best practice
0d7a3b61c5c1f64a50136cf4bb5702b7?s=48 ryomaru0825
2
750
MRTK3 - DataBinding and Theming 入門
Fccbd625997f63e7b251d9725cb905a5?s=48 futo23
0
190
Power AutomateでのAdaptive Cards
C0c0e8e4d7f83912cb1b1a0699df82a5?s=48 miyakemito
1
590
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
3adaa5e19f64345a0fbdb2e5d00be571?s=48 freee
0
260
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
2
1.8k
ノーコードで Stripeを使いこなす３つの方法 / jp-stripes-online-vol-4
E77ca94266ffd3d69f8aee91f7468264?s=48 stripehideokamoto
0
300
Strategyパターン
65389cd2b6fdc531dcc4af999e864593?s=48 hankehly
0
140
開発組織の生産性を可視化する State of DevOpsとFour Keysとは / deep dive into State of DevOps
21761f8bc6d1dac4e02fb04b799cb45c?s=48 yfcgpsebp
0
280
データ分析で切り拓け！ エンジニアとしてのデータ分析職キャリア戦略
43ba5a2227c580ce2290544d81c6261c?s=48 ksnt
0
170
Oracle Base Database Service 技術詳細
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
3
9.1k
JDK Flight Recorder入門
484571ccba0db66b69dc11761afdd0c4?s=48 chiroito
1
510
インフラのCI/CDはGitHub Actionsに任せた
F5c597c41d9bc6a80cce50adbd6c7bd9?s=48 mihyon
0
110

Featured

See All Featured
Scaling GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
A designer walks into a library…
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Pencils Down: Stop Designing & Start Developing
79acae287842acf29084005533a7fb3b?s=48 hursman
112
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.3k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
Designing the Hi-DPI Web
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
272
32k
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
127
8.5k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
105
16k
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.4k

Transcript

  1. 玩轉Vue Component 積⽊堆起來 Angela Wang 2022.3.22

  2. 01 02 03 04 Contents About LINE TODAY Building Blocks

    Component Flexibility Blocks to Pages

  3. About LINE TODAY 鎖定LINE TODAY，不怕話題跟不上，每天⽣活超有梗！新聞、 影⾳與直播，各種豐富內容與貼⼼服務，就讓LINE TODAY陪 伴您的每⼀天！ aka 豐富的樣式

    豐富內容 aka 豐富的模組 aka 豐富的程式

  4. Content listing 各式 各樣 排列 長相

  5. Building Blocks With Vue

  6. ※Source from︓istockphoto Theming Text Button Image Link 1. Define Variant

    2. Behavior Logic

  7. ※Source from︓istockphoto Typing Module

  8. ${Block}-${Element}--${Modifier} ※Source from︓istockphoto Typing Module Module Header Article Card &--indigo900

    Element

  9. ※Source from︓istockphoto Typing Module Module Header Article Card &-rankingBadge &-typeTag

    &-titleBadge

  10. ※Source from︓https://vuejs.org/, istockphoto Container Block Module Container Listing Container

  11. ※Source from︓istockphoto Container Block Module Container Listing Container

  12. Component Flexibility With Vue

  13. ※Source from︓https://vuejs.org/ Slot scoped binding Can’t get article data

  14. ※Source from︓https://vuejs.org/ Slot dynamic slot

  15. ※Source from︓https://vuejs.org Inject & Provide

  16. ※Source from︓https://vuejs.org/ Inject & Provide

  17. ※Source from︓https://vuejs.org Inject & Provide Do wrap with computed for

    reactivity!!

  18. Blocks to Pages

  19. Dynamic Component

  20. Dynamic Component Headline Thumbnail List Carousel

  21. ※Source from︓https://vueschool.io/articles/vuejs-tutorials/lazy-loading-and-code-splitting-in-vue-js/ Lazy Loading

  22. ※Source from︓https://vuejs.org/ Lazy Loading Dynamic Import Lazy Loading Lazy Function

  23. ※Source from︓https://vuejs.org/ Lazy Loading Dynamic Import Lazy Loading Lazy Function

  24. ※Source from︓https://vuejs.org/ Lazy Loading Dynamic Import Lazy Loading Lazy Function

  25. Looking Back Got Them All Covered

  26. THANK YOU