---
# System prepended metadata

title: Qwik 教學

---

Qwik 教學
===

手冊前導
---
- [引言](https://hackmd.io/Uq3gMByaQCyvK-_ep_gjdw)
- [任意門](https://hackmd.io/66e9S5PnQyypcKntM2LD0A)


教學概述
---
- [歡迎光臨 Qwik](https://hackmd.io/qRhRjeRESyWqzdC-blPy7w)

Simple Application 簡易應用
---
- [Basic Component](https://hackmd.io/Y6BhkW-GQD2nXDFNA3v1FA)
- [State Manangement](https://hackmd.io/Tq251uFGQj64WGAM-Ro67Q)
- [Event Listeners](https://hackmd.io/ldaRQB8wTqSAgRbRecT0gA)
- [Fetching Resource On State Change](https://hackmd.io/QcCraOeIQjaSbYC9ZR-JEw)

Components
---
- [Basic Component](https://hackmd.io/_xbDxWTORoeBO6W9FUButA)
- [Binding Expressions](https://hackmd.io/4ergorcnT-e3vxVdPmRqyQ)
- [Composing Components](https://hackmd.io/nKNiXl8bSHi-DA3uquQhqg)
- [Inline Components](https://hackmd.io/x8mAud4WRH6OCYRqldivwQ)

Events
---
- [Listening On Events](https://hackmd.io/59L-uiheR3eFB39sjExVIQ?both)
- [Listening On Document/Window](https://hackmd.io/NCzzr_ckRzGKXO2CI7Etzg?both)
- [Preventing default Behavior](https://hackmd.io/Gw5KuviXQtiOTP_m3BP5Sg?both)
- [Synchronous Events](https://hackmd.io/D4eWL5EPQr-Lh-LRpztfWw?both)
- [useOn() / useOnDocument() / useOnWindow() - Programmatic Listeners](https://hackmd.io/ScqezJVHRXO-muL60fwJ3A?both)

Stores
---
- [Storing State](https://hackmd.io/Kul6xdf0RMS2kD-nM63FSA)
- [Recursive Store](https://hackmd.io/3HG5Z7aQQSm-Ubemm8a1iA)
- [Serialization Graph](https://hackmd.io/YywzaDsoTv61yQVMHC56IA)
- [Non-serializable Properties](https://hackmd.io/HN6TbPnpQYeIhePagCoHJw)

Component Props
---
- [Passing Data to Components](https://hackmd.io/YigWlRx8S0iD-1ubDS5VGg)
- [Passing Stores](https://hackmd.io/hUDhp5BxSMKGYuf0sTnB4A)
- [Passing Closures](https://hackmd.io/mCPSmLeoR6-8zySMKNluUw)

Reactivty
---
- [Implicit Template Updates](https://hackmd.io/II01YoaqTUezUdUOzNTOIg)
- [useTask$()-Explicit Reactivity](https://hackmd.io/-9ZNZFmERbmvuvGbapgxWg)
- [useResource$()-Explicit Reactivity](https://hackmd.io/K5D7oexQTcCf_rxZgcg5NQ)

Context
---
- [Using context](https://hackmd.io/qdmn-I3HRCGhHfVPWdmUyQ) 

Lifecycle Hooks
---
- [useMount$()](https://hackmd.io/WUC1AJBOSPm-TjLw_dmZSg)
- [useUnMount$()](https://hackmd.io/UguRQekFQcGh3y2n8YWKkg)
- [useClientEffect$()](https://hackmd.io/1LbxjvoLQUq8lp6UH3OcBA)
- [useTask$()](https://hackmd.io/NsTNbaJUSt6Gk6SJujSxsA)
- [useSignal()](https://hackmd.io/bhdSMjFbTHasWfxQV75ekg)
- [useOn()/ useOnDocument()/ useOnWindow()](https://hackmd.io/iKelGZLLSYOVVfwtH5fg_A)

Projection
---
- [Basic Projection](https://hackmd.io/o6hYgUIMRqGp3fyeldM0rQ)
- [Named Slots](https://hackmd.io/mrN1tvtrQ3OZJuKDZoFplQ)
- [Fallback content](https://hackmd.io/W21HDO4bRvy8P6YAMDXGbQ)

Styling
---
- [useStyles() - Styles](https://hackmd.io/zaHuHNpuTYGDtm9OfgHHPQ)
- [useStylesScoped() - Scoped styles](https://hackmd.io/fXPIrKCbRfq0-2USCBkN1Q)

$ and QRL
---
- [Optimizer](https://hackmd.io/9CuftYGDSUOofZvEElrylg)
- [Lazy Loading constants](https://hackmd.io/0Pj1xjbdQECHyYgrnE3vag)
- [Lazy Loading closures](https://hackmd.io/aXUh45M8SC-AJCRmia7mIQ)

Composing new APIs
---
- [Creating APIs with $](https://hackmd.io/INH0ddnIRK2Zj5ivXS-nkA)
- [Composing use Hooks](https://hackmd.io/7LBT7ZSBSaG8EJMFI2h8Bw)

Understanding Qwik difference
---
- [Three-shaking static components](https://hackmd.io/OIkGVL54Q9-UsR5xjLKmOg)
- [Capturing lexical scope](https://hackmd.io/xcvixbUxQ9atp-C4HxFTfg)
