Svelte 之 Conditional Rendering
根據不同 Data 條件動態 Render 出 HTML 也是現代前端必備功能,Svelte 也提供了 if
、else
與 else if
處理。
失くすものさえない今が強くなるチャンスよ
根據不同 Data 條件動態 Render 出 HTML 也是現代前端必備功能,Svelte 也提供了 if
、else
與 else if
處理。
Svelte 也是以 Component 為核心,故也提供 Props 供外界傳入資料,其語法設計非常精簡,也善用 ECMAScript 2015 特色。
若要使 Array 也能 Reactive,Svelte 有些限制,必須改變傳統 ECMAScript 寫法,改用 ECMAScript 2015 方式。
Svelte 支援類似 Vue 的 watch
,只要加上 $
Label 即可,Svelte Compiler 會幫你產生相對應的 Code。
Svelte 支援類似 Vue 的 computed
,只要加上 $
Label 即可,Svelte Compiler 會幫你產生相對應的 Code。
Svelte 要使用其他 Component 很簡單,只要使用 ECMAScript 2015 的 import
進來就可使用。
從 API 回傳的資料常是 Array,因此將 Array 展開成 HTML 也是必須的,Svelte 提供了 each
處理 Array。
Two Way Binding 也算現代前端代表性功能,Svelte 寫法與 Vue 相當類似。
Attribute Binding 也是現代前端必備功能,如此我們才能以 JavaScript 改變 HTML Attribute,且 Svelte 寫法比 Vue 更直覺更精簡。
任何 JavaScript 的 Function 都可直接綁定到 HTML 的 Event,且可完全使用 ECMAScript 2015+ 的 Arrow Function,不必再擔心使用了 this
而必須使用 Function Expression 或 Function Declaration。
Data Binding 為現代前端 Framework 首要功能,如此才能以 Data 為中心開發前端,讓我們來學習 Svelte 如何將 Variable 綁定到 HTML。
Svelte 是 2019 年最受注目的新前端 Framework,其 Compiler 技術有別於 Virtual DOM,不僅 Bundle Size 超小,執行效率直逼 Vanilla JS,且 Codebase 非常精簡,其 Class-free 風格特別適合 FP。