重生之初识svelte框架（1）

本文主要是介绍重生之初识svelte框架（1），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1 什么是 Svelte？

官网写到：

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

但是有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。

你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。

2 添加数据

再开始之前需要了解一下在 Svelte 中的组件：

应用程序由一个或多个 组件（components） 构成。它将 HTML、CSS 和 JavaScript 代码封装在一起并写入 .svelte 后缀名的文件中。

总结：简单来说一个.svelte文件就是一个组件。这和Vue类似。但是其中的区别就在于Vue需要再在引入的文件中 component对象中注册。svelte不需要。

官网中添加数据：

在组件中添加一个 script 标签，并声明一个 name 变量，在dom中回显。

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

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

总结：此时{name} 变量就像vue中的模板语法：{{name}}，这样就容易理解。

3 动态属性

就像可以使用花括号控制文本一样，也可以使用花括号控制元素属性。

我们的图像缺少一个 src 属性，让我们添加一个吧：

<img src={src}>

在上面这个例子中，我们缺少 alt 属性，该属性用于描述这个标签的用途，以便让使用屏幕阅读器的用户，或网络连接缓慢、不稳定的用户了解这幅图像的用途。

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

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

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

4 CSS样式

就像在 HTML 中一样，可以向组件添加一个 <style> 标签。

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

总结：重要的是，这些规则是“作用域内的组件”。不会在应用程序的其他地方意外更改<p>元素的样式，这就行我们在Vue中写到的 <style scoped> ...</style>

5 嵌套组件

将整个应用程序放在一个组件中是不切实际的。取而代之的是，我们可以从其他文件中导入组件，并像包含元素一样包含它们。

以下是我们的 App.svelte 组件

<script>import Nested from './Nested.svelte';
</script><style>p {color: purple;font-family: 'Comic Sans MS', cursive;font-size: 2em;}
</style><p>This is a paragraph.</p>
<Nested/>

Nested 组件：