Placeholder Image

字幕列表 影片播放

由 AI 自動生成
  • Svelte.

    苗條。

  • It's a JavaScript tool for building UI components, just like React, Angular, or Vue.

    它是一種用於構建用戶界面組件的 JavaScript 工具,就像 React、Angular 或 Vue 一樣。

  • But unlike its peers, which ship a JavaScript runtime to the browser to make your code work, Svelte is a compiler.

    但是,Svelte 與其他同類產品不同,後者是通過向瀏覽器發送 JavaScript 運行時來實現代碼運行的,而 Svelte 則是一個編譯器。

  • It converts the declarative code that you love to write as a developer into imperative code that works with native browser APIs.

    它可將開發人員喜歡編寫的聲明式代碼轉換為可與在地瀏覽器 API 配合使用的命令式代碼。

  • As a result, you get highly performant code in a very small package.

    是以,你可以在一個非常小的套裝軟體中獲得高性能的代碼。

  • But most importantly, it's the only JavaScript framework that's actually enjoyable to use.

    但最重要的是,它是唯一一個使用起來真正令人愉快的 JavaScript 框架。

  • We create components in .svelte files.

    我們在 .svelte 文件中創建組件。

  • Which contain three main parts.

    其中包括三個主要部分。

  • A script for your JavaScript code, which can also be TypeScript.

    用於 JavaScript 代碼的腳本,也可以是 TypeScript。

  • A style tag for your CSS, which can also use a preprocessor like Sass.

    CSS 的樣式標籤,也可以使用 Sass 等預處理器。

  • And the main template represented as regular HTML.

    而主模板則以普通 HTML 表示。

  • But it's no ordinary HTML.

    但它不是普通的 HTML。

  • It's been empowered with all kinds of extra syntax for writing declarative code.

    它被賦予了各種額外的文法,用於編寫聲明式代碼。

  • Need reactive state?

    需要被動狀態?

  • Simply define a variable with the let keyword.

    只需使用 let 關鍵字定義一個變量即可。

  • Then reference it dynamically in the HTML using braces.

    然後使用大括號在 HTML 中動態引用。

  • If we want to change the state, we can do that by defining a function, then listen to an event in the DOM with on, and bind the function to it as the handler.

    如果我們想改變狀態,可以通過定義一個函數來實現,然後用 on 監聽 DOM 中的事件,並將函數綁定為處理程序。

  • Now when the value of that variable changes, the component will automatically re-render to show the updated state.

    現在,當該變量的值發生變化時,組件將自動重新渲染,以顯示更新後的狀態。

  • In many cases, you'll need to run conditional logic or loops in your template.

    在很多情況下,您需要在模板中運行條件邏輯或循環。

  • Instead of fighting against JavaScript functions, it empowers you with a syntax where you can clearly create an if-else statement or a for-each loop when working with a list.

    在處理列表時,它不再與 JavaScript 函數對抗,而是賦予你一種文法,讓你可以清晰地創建 if-else 語句或 for-each 循環。

  • Now when it comes to cross-component communication, Svelte provides multiple different strategies for sharing data between components.

    在跨組件通信方面,Svelte 提供了多種不同的組件間數據共享策略。

  • To pass data from a parent to child, you can use props by adding the export keyword to a variable.

    要從父代向子代傳遞數據,可以通過在變量中添加導出關鍵字來使用道具。

  • And now you can pass data into this component.

    現在你可以向這個組件傳遞數據了。

  • And if you have a ton of props, you can use the spread syntax to keep your code looking fit and healthy.

    如果你有大量的道具,你可以使用擴展文法,讓你的代碼看起來更健康。

  • Now for more complex component trees, you have a context API just like React.

    現在,對於更復雜的組件樹,你可以像 React 一樣使用上下文 API。

  • And if that wasn't enough, Svelte also has a really nice mechanism called stores, which are like observables that can be shared anywhere in the a dollar sign in front of them.

    如果這還不夠,Svelte 還有一個非常不錯的機制,叫做商店,它就像一個可觀察的對象,可以在任何地方共享。

  • After you've built an awesome UI, you can then use the compiler to convert it to vanilla JavaScript.

    在創建了出色的用戶界面後,您可以使用編譯器將其轉換為普通 JavaScript。

  • And if you're building a full-blown web application, you can use SvelteKit to quickly implement server-side rendering, routing, and code splitting.

    如果你正在構建一個完整的網絡應用程序,你可以使用 SvelteKit 快速實現服務器端渲染、路由和代碼分割。

  • This has been Svelte in 100 seconds.

    這已經是 100 秒內的 Svelte 了。

  • Hit the like button if you want to see more.

    如果想看更多,請點擊 "喜歡 "按鈕。

  • Thanks for watching, and I will see you in the next one.

    感謝您的收看,我們下期再見。

Svelte.

苗條。

字幕與單字
由 AI 自動生成

單字即點即查 點擊單字可以查詢單字解釋