svelte.js是一个现代的JavaScript框架，可以通过在构建时间编译组件而不是在浏览器中运行它们来简化Web开发。该作弊表提供了Sivte.js中的关键概念和功能的快速参考，用于开发人员的初学者和中级级别。
入门
安装
要开始使用Svelte.js，您需要设置开发环境。您可以使用官方模板创建一个新的Svelte项目：
npm create svelte@latest myapp
cd myapp
npm install
npm run dev
苗条的组件
Svelte应用程序是使用组件构建的。每个组件都在.svelte文件中定义，并封装其HTML，CSS和JavaScript逻辑。
<!-- HelloWorld.svelte -->
<script>
let name = 'Svelte';
</script>
<h1>Hello, {name}!</h1>
<style>
h1 {
color: blue;
}
</style>
数据绑定
变量
您可以在较小的组件中声明并使用变量。可变更新会自动触发反应性。
<script>
let count = 0;
</script>
<button on:click={() => count += 1}>Increment</button>
<p>Count: {count}</p>
双向绑定
您可以使用bind指令实现双向绑定：
<script>
let name = 'Svelte';
</script>
<input bind:value={name} />
<p>Your name is: {name}</p>
有条件和循环
有条件的渲染
您可以使用{#if}和{:else}：
有条件地渲染元素
{#if loggedIn}
<p>Welcome, {user.name}!</p>
{:else}
<p>Please log in.</p>
{/if}
列表渲染
您可以使用{#each}循环循环：
<ul>
{#each items as item}
<li>{item}</li>
{/each}
</ul>
事件和活动处理
活动听众
您可以收听DOM事件并使用功能处理：
<button on:click={handleClick}>Click Me</button>
<script>
function handleClick() {
alert('Button clicked!');
}
</script>
事件修饰符
svelte提供诸如preventDefault和stopPropagation的事件修饰符6：
<a href="/example" on:click|preventDefault={handleClick}>
Clicking this link won't navigate.
</a>
组件通信
道具
您可以使用道具将数据从父级传递到子女组件：
<!-- Parent.svelte -->
<script>
let message = 'Hello from Parent!';
</script>
<Child message={message} />
<!-- Child.svelte -->
<script>
export let message;
</script>
<p>{message}</p>
自定义活动
儿童组件可以使用自定义事件与父母交流：
<!-- Child.svelte -->
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function notifyParent() {
dispatch('customEvent', 'Data from Child');
}
</script>
<button on:click={notifyParent}>Notify Parent</button>
<!-- Parent.svelte -->
<script>
let dataFromChild = '';
function handleCustomEvent(event) {
dataFromChild = event.detail;
}
</script>
<Child on:customEvent={handleCustomEvent} />
<p>Data from Child: {dataFromChild}</p>
生命周期方法
Svelte组件具有诸如onMount，beforeUpdate和afterUpdate之类的生命周期方法：
<script>
import { onMount } from 'svelte';
onMount(() => {
console.log('Component mounted');
});
</script>
商店
Svelte为共享状态管理提供了商店：
<script>
import { writable } from 'svelte/store';
const count = writable(0);
function increment() {
$count += 1;
}
</script>
<button on:click={increment}>Increment</button>
<p>Count: {$count}</p>
路由
您可以使用svelte-routing之类的库中在Svelte中实现客户端路由。
CSS
Svelte使用组件中的<style>块支持示波器样式。
开发工具
Svelte具有用于调试和检查组件的浏览器扩展。
结论
svelte.js提供了一种直接有效的方法来构建Web应用程序，重点是反应性和简单性。该作弊表涵盖了基本概念和功能，以帮助初学者和中级开发人员开始使用Svelte开发。
估计的阅读时间：6分钟