开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

基础知识

如上篇文章所讲,svelte是一个非常优秀的框架之一.而它使用起来也是十分方便的,如:

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

<h1>Hello world!</h1>

然后我们需要在标签内使用花括号使用.{name}:

甚至我们可以在花括号内做一些逻辑运算.

<script>
	let name = 'world';
	const a = 3;
	const b = 2;
</script>

<h1>Hello {name.toUpperCase()}!</h1>
<h1>
	a * b = { a*b }
</h1>

css样式

svelte样式和我们在html页面中使用css是一样的,使用sytle包裹起来就行,比如我们在刚才代码中将那个乘法的颜色改为红色:

<script>
	const a = 3;
	const b = 2;
</script>
<h1>
	a * b = { a*b }
</h1>
<style>
	h1{
    color:red;
	}
</style>

得到的结果如下:

同时它像Vue一样,将样式的作用域限定在了当前组件中,这样便不会影响到其它组件.

我们一般的数据都是以纯文本形式进行插入,这就相当于没有特殊字符,但是比如我们做一个富文本编辑器,可能需要插入带有标签的html,此时可以使用@html关键字来告诉表达式这是一个html,例如:

<script>
	let string = `这是一个带有标签的html <strong>HTML!!!</strong>`;
</script>

<p>{string}</p>

得到的结果如下:

来自svelte中文文档的tips:> 在将表达式的输出插入到 DOM 之前，Svelte 不会对 {@html ...} 内的表达式的输出做任何清理的。换言之，如果使用此功能，则必须手动转义来自不信任源的 HTML 代码，否则会使用户面临 XSS 攻击的风险。

我们可以使用on:click给标签加一个点击事件: 如:

<button on:click={handleClick}>

在handleClick函数内我们可以做任何的操作和计算.