svelte - 1. 基础知识

svelte中文官网
vue和svelt语法对比
掘金-svelte入门简介

1、基本页面框架

<script>
	let src = 'tutorial/image.gif';
</script>

<img src={
   src} alt="a man dance">

<style></style>

2、动态属性

用 {}包裹

<script>
	let src = 'tutorial/image.gif';
</script>

<img src={
   src} alt="a man dance">

3、嵌套组件

https://www.svelte.cn/tutorial/nested-components

• 通过import引入
• 直接首字母大写标签使用，不需要像 vue 在 components 中注册
• 样式不会溢出，即每个.svelte 组件中<style>里面写的样式不会影响别的组件相同元素

例：

（1）父组件 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>

（2）子组件 nested.svelte

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

4、@html: 插入html标签，显示真实dom元素

@html：类似 vue 的 v-html

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

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

5、点击事件 on:click={handleClick}

6、响应式声明

（1）简单类型 — 通过赋值触发

let count = 0; // 普通定义
$: doubled = count * 2; // 响应式声明

// HTML中使用，count 改变，doubled就改变
<p>{
   count} doubled is {
   doubled}</p>

（2）复杂类型响应

由于 Svelte 的反应性是由赋值语句触发的，使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新。

法1：再次赋值

function addNumber() {
   
	numbers.push(numbers.length + 1);
	numbers = numbers;
}

法2：用解构

<script>
	let numbers = [1, 2, 3, 4];

	function addNumber() {
   
		// 法1
		// numbers.push(numbers.length + 1);
		// numbers = numbers
		// 法2
		numbers = [...numbers, numbers.length + 1]
	}

	$: sum = numbers.reduce((t, n)