Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
玩轉 Vue Component 積木堆起來
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
LINE Developers Taiwan
PRO
March 22, 2022
Tweet
Share
More Decks by LINE Developers Taiwan
See All by LINE Developers Taiwan
都到了研究所 真的想往資訊領域嗎?
line_developers_tw
PRO
0
210
2022 Central team introduction
line_developers_tw
PRO
0
12
2022 iOS & Android team introduction
line_developers_tw
PRO
0
10
2022 Data Dev team introduction
line_developers_tw
PRO
0
25
2022 LINE NEXT TW Dev introduction
line_developers_tw
PRO
0
17
2022 Global Common Platform introduction
line_developers_tw
PRO
0
14
2022 LINE Developers Recruitment Day opening
line_developers_tw
PRO
0
19
2022 LINE Pay development introduction
line_developers_tw
PRO
0
8
2022 QA team introduction
line_developers_tw
PRO
0
23
Other Decks in Technology
See All in Technology
What's Data Lake ? Azure Data Lake best practice
ryomaru0825
2
750
MRTK3 - DataBinding and Theming 入門
futo23
0
190
Power AutomateでのAdaptive Cards
miyakemito
1
590
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
freee
0
260
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.8k
ノーコードで Stripeを使いこなす3つの方法 / jp-stripes-online-vol-4
stripehideokamoto
0
300
Strategyパターン
hankehly
0
140
開発組織の生産性を可視化する State of DevOpsとFour Keysとは / deep dive into State of DevOps
yfcgpsebp
0
280
データ分析で切り拓け! エンジニアとしてのデータ分析職キャリア戦略
ksnt
0
170
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
9.1k
JDK Flight Recorder入門
chiroito
1
510
インフラのCI/CDはGitHub Actionsに任せた
mihyon
0
110
Featured
See All Featured
Scaling GitHub
holman
451
140k
A designer walks into a library…
pauljervisheath
196
16k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
The Language of Interfaces
destraynor
148
20k
Designing the Hi-DPI Web
ddemaree
272
32k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
105
16k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Transcript
玩轉Vue Component 積⽊堆起來 Angela Wang 2022.3.22
01 02 03 04 Contents About LINE TODAY Building Blocks
Component Flexibility Blocks to Pages
About LINE TODAY 鎖定LINE TODAY,不怕話題跟不上,每天⽣活超有梗!新聞、 影⾳與直播,各種豐富內容與貼⼼服務,就讓LINE TODAY陪 伴您的每⼀天! aka 豐富的樣式
豐富內容 aka 豐富的模組 aka 豐富的程式
Content listing 各式 各樣 排列 長相
Building Blocks With Vue
※Source from︓istockphoto Theming Text Button Image Link 1. Define Variant
2. Behavior Logic
※Source from︓istockphoto Typing Module
${Block}-${Element}--${Modifier} ※Source from︓istockphoto Typing Module Module Header Article Card &--indigo900
Element
※Source from︓istockphoto Typing Module Module Header Article Card &-rankingBadge &-typeTag
&-titleBadge
※Source from︓https://vuejs.org/, istockphoto Container Block Module Container Listing Container
※Source from︓istockphoto Container Block Module Container Listing Container
Component Flexibility With Vue
※Source from︓https://vuejs.org/ Slot scoped binding Can’t get article data
※Source from︓https://vuejs.org/ Slot dynamic slot
※Source from︓https://vuejs.org Inject & Provide
※Source from︓https://vuejs.org/ Inject & Provide
※Source from︓https://vuejs.org Inject & Provide Do wrap with computed for
reactivity!!
Blocks to Pages
Dynamic Component
Dynamic Component Headline Thumbnail List Carousel
※Source from︓https://vueschool.io/articles/vuejs-tutorials/lazy-loading-and-code-splitting-in-vue-js/ Lazy Loading
※Source from︓https://vuejs.org/ Lazy Loading Dynamic Import Lazy Loading Lazy Function
※Source from︓https://vuejs.org/ Lazy Loading Dynamic Import Lazy Loading Lazy Function
※Source from︓https://vuejs.org/ Lazy Loading Dynamic Import Lazy Loading Lazy Function
Looking Back Got Them All Covered
THANK YOU