SvelteSvelte介绍 Svelte 是一个构建 web 应用程序的工具。 Svelte 与诸如 React 和

Svelte介绍

Svelte 是一个构建 web 应用程序的工具。

Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。

但是有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。

组件

在 Svelte 中，应用程序由一个或多个 组件（components） 构成。组件是一个可重用的、自包含的代码块，它将 HTML、CSS 和 JavaScript 代码封装在一起并写入 .svelte 后缀名的文件中。一个 .svelte 文件中同时包含js代码，css和html元素。

<script>
	let name = 'world';
</script>


<h1>Hello {name}!</h1>

<style>
	h1 {
		color:beige;
	}
</style>

1.开始

下载项目到本地

这里参考内容。进入到网址，点击现在download zip file按钮。下载后解压文件。 Svelte 模板解读

运行

切换到项目目录并运行

cd svelte-app
npm install
npm run dev

2.使用

变量

变量由{}包裹，由js传递到html，内部也可以是表达式。

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p> //html标签

动态属性

<img src={src}>

速记属性

名称和值相同的属性并不少见，比如 src={src}。Svelte 为这些情况提供了一个方便的速记法：

<img {src} alt="A man dances.">

css样式

就像在 HTML 中一样，你可以向组件添加一个 <style> 标签。接下来就让我们为 <p> 元素添加一些样式吧：

<style>
    p {
        color: purple;
        font-family: 'Comic Sans MS', cursive;
        font-size: 2em;
    }
</style>

<p>This is a paragraph.</p>

重要的是，这些 CSS 样式规则的 作用域被限定在当前组件中。