1. Svelte简介

Svelte是一种全新的构建用户界面的方法。传统框架React和Vue在浏览器中需要做大量的工作，而Svelte将这些共走放到构建应用程序的编译阶段来处理。
与使用虚拟DOM差异对比不同。Svelte编写的代码在应用程序的状态更改时就能像外科手术一样更新DOM。

• 减少代码量
  重复利用你所掌握的编程语言-HTML、CSS和JavaScript，构建的组件无需依赖模板文件。
• 无虚拟DOM
  Svelte将你的代码编译成体积小、不依赖框架的普通JS代码，让你的应用程序无论启动开始运行都变得迅速。
• 真正的反应能力
  无需复杂的状态管理库，Svelte为JavaScript自身添加反应能力。

2. 环境搭建

• npx degit sveltejs/template my-svelte-project 克隆一个svelte模板到我们的项目中
• cd my-svelte-project 进入项目内
• npm install 安装依赖

3. 变量声明

变量使用{}进行包裹，并在上面进行声明

	<script>
		export let name; // 此时可直接赋值		export let name = ‘ably’
		export let author;
	</script>
	
	<main>
		<h1>Hello {name}!</h1>
		<h2>my first app by {author.toUpperCase()}</h2>
	</main>
	<style>
	</style>
1
2
3
4
5
6
7
8
9
10
11

若变量使用时未在上面script中进行声明会报错。若声明了但是在main.js中没有定义则会成为undefined。{}中可以放置任何我们希望的JavaScript代码。main.js中设置的prop优先级高于组件export let时定义的

4. 动态属性

{}可以控制显示文本，也可以控制元素属性

	main.js
	import App from './App.svelte';
	
	const app = new App({
		target: document.body,
		props: {
			name: 'world',
			author: 'Ably',
			src: 'https://photokit.com/images/editor.min.webp'
		}
	});
	
	export default app;
	
	App.svelte
	<script>
		export let name;
		export let author;
		export let src
	</script>
	
	<main>
		<h1>Hello {name}!</h1>
		<h2>my first app by {author.toUpperCase()}</h2>
		<img src={src} alt="{name} 1212"/>
	</main>
	
	<style>
	</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

当碰到上述图片属性和值相同名称时，我们可以这样简写 <img src={src} alt="{name} 1212"/> ——> <img {src} alt="{name} 1212"/>

5. CSS样式

样式书写方式：放置在style标签内，根据定义的类名、id名、标签名称

<h1 class="title">Hello {name}!</h1>

<style>
.title {
	color: darkblue;
}
</style>
1
2
3
4
5
6
7

这些CSS样式规则的作用域被限定在当前组件中。不会意外的更改应用称重中其他地方的元素的样式。

6. 嵌套组件

为了便于代码的维护，我们一定不能将全部代码写入到同一个文件中，并且这也是不现实的，我们可以定义对应的组件，引入到具体的页面中去.

App.svelte

<script>
	import Header from './components/Header.svelte'
</script>

<main>
	<Header />
	<h1>页面</h1>
</main>

<style>
	h1 {
		color: red;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Header.svelte

<h1>
    这是Header组件
</h1>
1
2
3
4
5

虽然引入的组件中也包含h1这个标签，但是在App.svelte中给h1设置的样式是不会影响其他组件中的h1标签

7. HTML标签

当标签内的内容，想要以html来展示而不仅仅是字符串时，我们可以通过{@html htmlContent}的形式告诉此处的内容是html形式，<、>、等要以标签的形式进行解析。

<script>
    export let htmlcontent = `this string contains some <strong>HTML!!!</strong>`
</script>
<h1>
    这是Header组件
</h1>
<p>
{@html htmlcontent}
</p>
1
2
3
4
5
6
7
8
9

此时我们会发现，html因为加了strong标签被解析而呈现字体加粗的效果。如果使用此功能，则必须手动转义来自不信任源的 HTML 代码，否则会使用户面临 XSS 攻击的风险。

官方文档
如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~