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.3k
玩轉 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 Taiwan 的後端雙刀流
line_developers_tw
PRO
0
1.2k
讓測試不再 BB! 從 BDD 到 CI/CD, 不靠人力也能 MVP
line_developers_tw
PRO
0
1.3k
DB 醬,嗨!哪泥嘎斯基?
line_developers_tw
PRO
0
1.3k
比起獨自升級 我更喜歡 DevOps 文化 <3
line_developers_tw
PRO
0
1.3k
工具人的一生: 開發很多 AI 工具讓我 慵懶過一生
line_developers_tw
PRO
0
1.2k
從四件事帶你見識見識 事件驅動架構設計 (EDA)
line_developers_tw
PRO
0
1.1k
TODAY 看世界(?) 是我們在看扣啦!
line_developers_tw
PRO
0
1.3k
你想成為什麼樣的開發者?
line_developers_tw
PRO
0
26
研究生的 LINER生活
line_developers_tw
PRO
0
28
Other Decks in Technology
See All in Technology
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
180
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
120
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
140
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
150
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
420
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
110
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
360
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
280
ビギナーであり続ける/beginning
ikuodanaka
3
770
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Why Our Code Smells
bkeepers
PRO
336
57k
Adopting Sorbet at Scale
ufuk
77
9.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Typedesign – Prime Four
hannesfritz
42
2.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Gamification - CAS2011
davidbonilla
81
5.4k
How GitHub (no longer) Works
holman
314
140k
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