[svelte]属性和逻辑块

属性 / Default values • Svelte 教程 | Svelte 中文网

属性
Declaring props

到目前为止,我们只处理了内部状态------也就是说,这些值只能在给定的组件中访问。 在任何实际应用程序中,都需要将数据从一个组件向下传递到其子组件。为此,我们需要声明属性,通常缩写为"props"。在 Svelte 中,我们使用关键字export来做到这一点

app.svelte

html 复制代码
<script>
	import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>

Nested.svelte

html 复制代码
<script>
	 export let answer;
</script>

<p>The answer is {answer}</p>

可以将export删除来看前后对比

一个会输出The answer is 42,一个是The answer is undefined

Default values

我们重新修改一下代码

app.svelte

html 复制代码
<script>
	import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>
<Nested/>

Nested.svelte

html 复制代码
<script>
	export let answer = 'a mystery';
</script>

<p>The answer is {answer}</p>

那这样子最后的输出是什么

The answer is 42

The answer is a mystery

前面一个42是,因为引入了answer的定义值

后面因为没有了,就变成Nested中的默认值了

属性传递

如果组件中含有一个对象属性,可以利用...语法将它们传到一个组件上,这样子就不用一个一个的指定

相反,如果你需要引用传递到组件中的所有道具,包括未使用export声明的道具,可以利用$$props 直接获取。但通常不建议这么做,因为Svelte难以优化,但在极少数情况下很有用。

Info.svelte

html 复制代码
<script>
	export let name;
	export let version;
	export let speed;
	export let website;
</script>

<p>
	The <code>{name}</code> package is {speed} fast.
	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
	and <a href={website}>learn more here</a>
</p>

app.svelte

html 复制代码
<script>
	import Info from './Info.svelte';

	const pkg = {
		name: 'svelte',
		version: 3,
		speed: 'blazing',
		website: 'https://svelte.dev'
	};
</script>

/*<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>*/
<Info {...pkg}/>
逻辑
if

HTMl没有表达逻辑的方式,但if可以被包装在一个块中

比如下面这样子

html 复制代码
<script>
	let user = { loggedIn: false };

	function toggle() {
		user.loggedIn = !user.loggedIn;
	}
</script>

{#if user.loggedIn}
<button on:click={toggle}>
	Log out
</button>
{/if}

{#if !user.loggedIn}
	<button on:click={toggle}>
		Log in
	</button>
{/if}
else

因为上面代码中的两个条件是互斥的,所以其实可以用else来简化组件

html 复制代码
<script>
	let user = { loggedIn: false };

	function toggle() {
		user.loggedIn = !user.loggedIn;
	}
</script>

{#if user.loggedIn}
	<button on:click={toggle}>
		Log out
	</button>
{:else}
	<button on:click={toggle}>
		Log in
	</button>
{/if}

#开始,/结束,: 中间插入

else if

将多个条件链接在一起的时候就需要 else if 上场了

html 复制代码
<script>
	let x = 7;
</script>

{#if x > 10}
	<p>{x} is greater than 10</p>
{:else if 5 > x}
	<p>{x} is less than 5</p>
{:else}
	<p>{x} is between 5 and 10</p>
{/if}
each遍历

遇见需要进行遍历的数据列表

遇到数组或类似于数组的对象 (即具有length 属性)。都可以通过 each [...iterable]遍历迭代该对象。

html 复制代码
<script>
	let cats = [
		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
		{ id: 'z_AbfPXTKms', name: 'Maru' },
		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
	];
</script>

<h1>The Famous Cats </h1>


<ul>
	{#each cats as cat}
		<li><a target="_blank" href="https://www.baidu.com/">
			{cat.name}
		</a></li>
	{/each}
</ul>


<ul>
	{#each cats as { id, name }, i}
		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
			{i + 1}: {name}
		</a></li>
	{/each}
</ul>
each添加key值

一般来说,当你修改each 块中的值时,它将会在 尾端 进行添加或删除条目,并更新所有变化, 这可能不是你想要的效果。

Thing.svelte

html 复制代码
<script>
	// `current` is updated whenever the prop value changes...
	export let current;

	// ...but `initial` is fixed upon initialisation
	const initial = current;
</script>

<p>
	<span style="background-color: {initial}">initial</span>
	<span style="background-color: {current}">current</span>
</p>

<style>
	span {
		display: inline-block;
		padding: 0.2em 0.5em;
		margin: 0 0.2em 0.2em 0;
		width: 4em;
		text-align: center;
		border-radius: 0.2em;
		color: white;
	}
</style>

App.svelte

html 复制代码
<script>
	import Thing from './Thing.svelte';

	let things = [
		{ id: 1, color: '#0d0887' },
		{ id: 2, color: '#6a00a8' },
		{ id: 3, color: '#b12a90' },
		{ id: 4, color: '#e16462' },
		{ id: 5, color: '#fca636' }
	];

	function handleClick() {
		things = things.slice(1);
	}
</script>

<button on:click={handleClick}>
	Remove first thing
</button>

{#each things as thing}
	<Thing current={thing.color}/>
{/each}

可以运行上面的代码进行实例查看,尝试多次点击'Remove first thing' 按钮,这时<Thing> 组件是从尾端开始被移除,这显然不是我们想要的,我们希望是从上至下依次开始删除组件。

很明显,他直接删除的是最下面的initial,为此,我们为 each 块指定一个唯一标识符,作为 key 值:

html 复制代码
{#each things as thing (thing.id)}
	<Thing current={thing.color}/>
{/each}

(thing.id) 告诉 Svelte 什么地方需要改变。

可以将任何对象用作 key 来使用,就像Svelte 用 Map 在内部作为key一样,换句话说,你可以用 (thing) 来代替 (thing.id)作为 key 值。但是,使用字符串或者数字作为 key 值通常更安全,因为这能确保它的唯一性,例如,使用来自API服务器的新数据进行更新时。

Await

很多Web应用程序都可能在某个时候有需要处理异步数据的需求。使用 Svelte 在标签中使用 await 处理promises 数据亦是十分容易:

promise总是获取最新的信息,无需关心 rece 状态。

html 复制代码
<script>
	let promise = getRandomNumber();

	async function getRandomNumber() {
		const res = await fetch(`tutorial/random-number`);
		const text = await res.text();

		if (res.ok) {
			return text;
		} else {
			throw new Error(text);
		}
	}

	function handleClick() {
		promise = getRandomNumber();
	}
</script>

<button on:click={handleClick}>
	generate random number
</button>

{#await promise}
	<p>...waiting</p>
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

Promise 是 JavaScript 中用于处理异步操作的一种机制。它代表了一个异步操作的最终完成或失败,并且可以将相关的处理逻辑附加到这个操作上。

在 JavaScript 中,异步操作通常涉及到网络请求、文件读取、定时器等需要花费一定时间才能完成的任务。

传统的回调函数方式处理异步操作可能会导致回调地狱(callback hell)和难以理解的代码结构。而 Promise 则提供了一种更清晰和可靠的方式来处理异步操作。

一个 Promise 对象有三种状态:

Pending(进行中):初始状态,表示异步操作尚未完成,也未失败。

Fulfilled(已完成):表示异步操作成功完成。

Rejected(已失败):表示异步操作失败。

一个 Promise 对象可以通过调用 resolve 函数来将其状态从 pending 变为 fulfilled,也可以通过调用 reject 函数将其状态从 pending 变为 rejected。一旦状态发生改变,Promise 对象的状态就不会再改变,它的状态一旦改变,就会一直保持在当前状态,直到被处理(通过 .then() 或 .catch() 方法)。

在使用 Promise 的时候,通常会使用 .then() 方法来处理异步操作成功时的情况,使用 .catch() 方法来处理异步操作失败时的情况。

相关推荐
好开心3311 分钟前
axios的使用
开发语言·前端·javascript·前端框架·html
Domain-zhuo20 分钟前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec1 小时前
XSS跨站脚本攻击漏洞练习
前端·xss
m0_748257181 小时前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工1 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
指尖上跳动的旋律2 小时前
shell脚本定义特殊字符导致执行mysql文件错误的问题
数据库·mysql
一勺菠萝丶2 小时前
MongoDB 常用操作指南(Docker 环境下)
数据库·mongodb·docker
百万蹄蹄向前冲2 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
Anlici2 小时前
three.js建立3D模型展示地球+高亮
前端·数据可视化·canvas
轻口味2 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos