Svelte之基础知识一

参考资料

• 官网-中文

什么是Svelte？

• Svelte 是一个构建 web 应用程序的工具。
• Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。
  但是有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。
  你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。

简介

添加数据{}

Hello {name}!

对比Vue：{{}} => {}

动态属性{}

对比Vue：:src = "" => src={}

嵌套组件

注意：组件名称 Nested 的首字母大写。采用此约定是为了使我们能够区分用户自定义的组件和一般的 HTML 标签。

This is a paragraph.

HTML标签@html

{@html string}

对比Vue：v-html => @html

创建一个应用程序

• VS Code安装插件：Svelte扩展

反应性能力

赋值on:click={}

	Clicked {count} {count === 1 ? 'time' : 'times'}

对比Vue：@click="" => on:click={}

声明$:

	Clicked {count} {count === 1 ? 'time' : 'times'}


	{count} doubled is {doubled}

对比Vue：computed => $:

语句$:{}

	Clicked {count} {count === 1 ? 'time' : 'times'}

更新数组和对象

• 由于 Svelte 的反应性是由赋值语句触发的，因此使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新。
• 解决该问题的一种方法是添加一个多余的赋值语句
• 一个简单的经验法则是：被更新的变量的名称必须出现在赋值语句的左侧。

	

	
{numbers.join(' + ')} = {sum}

	
		Add a number
	
	

		{obj.foo.bar}
	

属性

Declaring propsexport

• 用于父子组件传值
  子组件：

	

	
The answer is {answer}

父组件：

对比Vue：prop => export

属性对象传递{...xxx}

逻辑

if语句{#if xxx}...{/if}

{#if user.loggedIn}

	Log out

{/if}
{#if !user.loggedIn}

	Log in

{/if}

对比vue：v-if=>{#if xxx}...{/if}

else语句{#if xxx}...{:else}...{/if}

{#if user.loggedIn}
	
		Log out
	
{:else}
	
		Log in
	
{/if}

对比vue：v-if v-else=>{#if xxx}...{:else}...{/if}

else-if语句{#if xxx}...{:else if xxx}...{:else}...{/if}

{#if x > 10}
	
{x} is greater than 10
{:else if 5 > x}
		
{x} is less than 5
{:else}
		
{x} is between 5 and 10
{/if}

each语句{#each xxx as xx}...{/each}

The Famous Cats of YouTube


	
	{#each cats as cat, i}
		

			{i + 1}：{cat.name}
		
	{/each}
	

对比vue：v-for=>{#each xxx as xx}...{/each}

为each语句添加key值{#each xxx as xx(key-xxx)}...{/each}

	Remove first thing


{#each things as thing (thing.id)}
	
{thing.id}
{/each}

对比vue：:key="key-xxx"=>{#each xxx as xx(key-xxx)}...{/each}

await语句{#await xxx}...{:then xxx}...{:catch error}...{/await}

	generate random number



{#await promise}
waiting
{:then value}

	{value}

{:catch error}

	{error}

{/await}


{#await promise then value}
{value}
{/await}

事件

DOM 事件on:xxx={xxx}

	The mouse position is {m.x} x {m.y}

inline handlers

 m = {x: e.clientX, y: e.clientY}}>
	The mouse position is {m.x} x {m.y}

事件修饰器on:xxx|once

所有修饰符列表：

• preventDefault ：调用event.preventDefault() ，在运行处理程序之前调用。比如，对客户端表单处理有用。
• stopPropagation ：调用 event.stopPropagation(), 防止事件影响到下一个元素。
• passive ： 优化了对 touch/wheel 事件的滚动表现(Svelte 会在合适的地方自动添加滚动条)。
• capture — 在 capture 阶段而不是bubbling 阶段触发事件处理程序 ()
• once ：运行一次事件处理程序后将其删除。
• self — 仅当 event.target 是其本身时才执行。

	

	
		Click me
	

• 可以将修饰符组合在一起使用，例如：on:click|once|capture={...}

组件事件

• 子组件：createEventDispatcher()(‘xxx’, param)
  createEventDispatcher 必须在首次实例化组件时调用它，—组件本身不支持如 setTimeout 之类的事件回调。 定义一个dispatch进行连接，进而把组件实例化。

	

	
		Click to say hello zoey
	

• 父组件：on:xxx

事件转发on:message、on:click

message 没有赋予特定的值得情况下意味着转发所有massage事件：