Svelte.js教程-DEV365 开发者社区

svelte.js简介

svelte.js是一个现代的JavaScript框架，可让您通过编写组件来构建Web应用程序。它着重于有效的渲染和最小捆绑尺寸，从而产生了快速，优化的应用程序。在本教程中，我们将介绍Svelte.js的基础知识并探索各种示例。

1.安装和设置

要开始使用svelte.js，您需要在计算机上安装node.js。有Node.js后，请按照以下步骤：

打开终端或命令提示。
为您的Svelte Project创建一个新目录：mkdir svelte-tutorial
导航到项目目录：cd svelte-tutorial
初始化一个新的node.js项目：npm init -y
安装svelte.js作为dev依赖性：npm install svelte --save-dev

2.创建您的第一个苗条组件

让我们创建一个简单的“ Hello World”组件来开始。在项目目录中创建一个名为Hello.svelte的新文件，并添加以下代码：

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

<h1>Hello {name}!</h1>

要渲染此组件，创建一个名为main.js的新文件，并添加以下代码：

import Hello from './Hello.svelte';

const app = new Hello({
  target: document.body,
});

现在，在浏览器中打开index.html文件，您应该看到“你好！”显示在页面上。

3.反应性声明和绑定

Svelte提供了反应性声明，以自动更新UI时，当基础数据更改时。让我们修改我们的Hello.svelte组件以使名称更改：

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

<input bind:value={name} placeholder="Enter your name" />

<h1>Hello {name}!</h1>

现在，当您输入输入字段时，标题中的名称将相应更新。

4.处理用户输入

除了反应性绑定外，Svelte还允许您使用事件侦听器处理用户输入。让我们添加一个按钮来打招呼用户：

<script>
  let name = 'Svelte';

  function greet() {
    alert(`Hello, ${name}!`);
  }
</script>

<input bind:value={name} placeholder="Enter your name" />
<button on:click={greet}>Greet</button>

单击“问候”按钮将显示带有输入名称的问候消息。

5.条件和循环

Svelte支持有条件的渲染和循环数据。让我们创建一个显示名称列表的列表组件：

<script>
  let names = ['Alice', 'Bob', 'Charlie'];
</script>

<ul>
  {#each names as name}
    <li>{name}</li>
  {/each}
</ul>

<button on:click={() => names = names.concat('Dave')}>Add Name</button>

列表最初将显示“爱丽丝”，“鲍勃”和“查理”。单击“添加名称”按钮将在列表中添加新名称。

6。

组件生命周期
Svelte组件具有生命周期钩，可让您在组件生命周期的特定阶段执行操作。这是一个例子：

<script>
  import { onMount, onDestroy } from 'svelte';

  onMount(() => {
    console.log('Component mounted');
  });

  onDestroy(() => {
    console.log('Component destroyed');
  });
</script>

<h1>Component Lifecycle Example</h1>

打开浏览器的开发人员控制台，当组件被渲染时，您将看到“组件已挂载的”消息，并且从DOM中删除的“组件被销毁”消息时，您会看到“组件”消息。

。

7.国家管理

Svelte用内置商店使国家管理直接使国家管理变得直接。让我们创建一个计数器组件，以增加计数器值：

<script>
  import { writable } from 'svelte/store';

  let count = writable(0);

  function increment() {
    count.update(n => n + 1);
  }
</script>

<h1>Counter: {$count}</h1>
<button on:click={increment}>Increment</button>

单击“增量”按钮时，计数器将动态更新。

8. API集成

Svelte可以轻松地与API集成以获取和显示数据。这是使用fetch函数的示例：

<script>
  let user;

  async function fetchUser() {
    const response = await fetch('https://api.example.com/user');
    user = await response.json();
  }

  fetchUser();
</script>

{#if user}
  <h1>Welcome, {user.name}!</h1>
{else}
  <p>Loading...</p>
{/if}

当组件渲染时，它将从API获取用户数据，并在数据可用后显示欢迎消息。

9.建造和部署

要构建您的Svelte生产应用程序，请在项目目录中运行以下命令：

npx svelte-kit build

这将生成一个build目录，其中包含您应用程序的优化和捆绑版本。然后，您可以将build目录的内容部署到托管提供商。

恭喜！您已经完成了Svelte.js教程。这应该为您提供坚实的基础，以使用Svelte.js构建Web应用程序。请记住要探索官方文档以获取更多深入的知识和高级功能。

快乐编码！