codecamp

Svelte 基础

欢迎使用 Svelte 教程。这将教会您轻松构建快速、小型 Web 应用程序所需的一切知识。

您还可以查阅 API 文档 和 示例,或者——如果您迫不及待地想在本地开始 —— 60 秒快速入门

什么是 Svelte?

Svelte 是一种用于构建快速 Web 应用程序的工具。

它类似于 React 和 Vue 等 JavaScript 框架,它们的共同目标是轻松构建流畅的交互式用户界面。

但有一个关键的区别:Svelte 在构建时将您的应用程序转换为理想的 JavaScript,而不是在运行时解释您的应用程序代码。这意味着您无需支付框架抽象的性能成本,并且您的应用程序首次加载时不会受到惩罚。

您可以使用 Svelte 构建整个应用程序,也可以将其增量添加到现有代码库中。您还可以将组件作为可在任何地方使用的独立包进行交付,而无需依赖传统框架的开销。

如何使用本教程

您需要对 HTML、CSS 和 JavaScript 有基本的了解才能理解 Svelte。

在学习本教程的过程中,您将看到旨在说明新功能的小练习。后面的章节建立在前面章节中获得的知识之上,因此建议您从头到尾阅读。

了解组件

在 Svelte 中,应用程序由一个或多个组件组成。组件是一个可重复使用的独立代码块,它封装了属于一起的 HTML、CSS 和 JavaScript,并写入一个 ​.svelte​ 文件中。代码编辑器中的“hello world”示例是一个简单的组件。

  • App.svelte
<h1>Hello world!</h1>


Svelte 添加数据
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Svelte module context

Svelte 调试

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }