Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
玩轉 Vue Component 積木堆起來
Search
LINE Developers Taiwan
PRO
March 22, 2022
Technology
1
4.4k
玩轉 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
LLM 商品規格萃取大冒險- Vila
line_developers_tw
PRO
0
9
Playwright/MCP/AI -Winter
line_developers_tw
PRO
0
9
LINE EC Product Catalog Development- Rei
line_developers_tw
PRO
0
8
LINE 與 AI 機器人技術應用現況
line_developers_tw
PRO
0
6
QA Testing
line_developers_tw
PRO
0
3
jcconf_datadev_prod
line_developers_tw
PRO
0
7
jcconf_SPM_prod
line_developers_tw
PRO
0
4
jcconf_LINEPay_prod
line_developers_tw
PRO
0
4
Live Activities in LINE
line_developers_tw
PRO
0
13
Other Decks in Technology
See All in Technology
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
210
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
OSSで50の競合と戦うためにやったこと
yamadashy
3
960
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
300
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
230
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
320
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
What's new in OpenShift 4.20
redhatlivestreaming
0
130
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
2
330
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Side Projects
sachag
455
43k
Why Our Code Smells
bkeepers
PRO
340
57k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Embracing the Ebb and Flow
colly
88
4.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Building an army of robots
kneath
305
46k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
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