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

玩轉 Vue Component 積木堆起來

玩轉 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

Other Decks in Technology

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