变量与数据绑定
在 Svelte 中，我们可以通过声明变量来存储数据。这些变量可以是任何基本类型，如数字、字符串或布尔值，也可以是更复杂的数据结构，如数组和对象。
示例：
// www.javascriptcn.com code example
<script>
let name = 'Alice';
let age = 30;
let isLoggedIn = false;
let numbers = [1, 2, 3];
let person = {
name: 'Bob',
age: 25
};
</script>
<p>姓名: {name}</p>
<p>年龄: {age}</p>
<p>是否登录: {isLoggedIn ? '是' : '否'}</p>
<p>数字列表: {numbers.join(', ')}</p>
<p>个人信息: {person.name}, {person.age}岁</p>在这个例子中，{} 用于插入变量的值。此外，我们还可以使用三元运算符来根据条件显示不同的内容。
条件渲染
条件渲染允许我们在页面上根据某些条件显示或隐藏元素。这可以通过 if 和 else 语句来实现。
示例：
// www.javascriptcn.com code example
<script>
let isLoggedIn = true;
</script>
{#if isLoggedIn}
<p>欢迎回来，已登录用户！</p>
{:else}
<p>请先登录。</p>
{/if}这里，{#if} 和 {:else} 分别用于开始和结束一个条件块。{/if} 则用来关闭这个条件块。
循环渲染
循环渲染允许我们基于数组或其他可迭代对象来重复渲染元素。这可以通过 each 指令来实现。
示例：
// www.javascriptcn.com code example
<script>
let items = ['苹果', '香蕉', '橙子'];
</script>
<ul>
{#each items as item}
<li>{item}</li>
{/each}
</ul>在这个例子中，{#each} 指令用于遍历数组，并为每个元素生成一个 <li> 元素。
事件处理
事件处理允许我们响应用户的操作，比如点击按钮或输入文本。这可以通过 on: 语法来实现。
示例：
// www.javascriptcn.com code example
<script>
let message = '';
function handleClick() {
alert('按钮被点击了！');
}
function handleInput(event) {
message = event.target.value;
}
</script>
<button on:click={handleClick}>点击我</button>
<input type="text" on:input={handleInput} placeholder="请输入内容" />
<p>你输入的内容是: {message}</p>在这个例子中，on:click 和 on:input 分别用于绑定点击和输入事件。当事件触发时，相应的函数会被调用。
组件
组件是 Svelte 应用程序的基本构建块。它们可以包含模板、脚本和样式，并且可以在应用的不同部分重用。
创建组件：
首先，在一个单独的文件中定义组件：
MyComponent.svelte:
// www.javascriptcn.com code example
<script>
export let title;
export let content;
</script>
<div class="component">
<h2>{title}</h2>
<p>{content}</p>
</div>然后，在主应用程序中引入并使用它：
App.svelte:
<script> import MyComponent from './MyComponent.svelte'; </script> <MyComponent title="标题" content="这是组件的内容" />
通过这种方式，我们可以将代码组织得更加模块化和易于维护。
动态类名和样式
动态类名和样式的应用可以让我们根据状态动态地改变元素的外观。这可以通过结合条件渲染和 CSS 类名来实现。
示例：
<script>
let isActive = true;
let fontSize = 16;
</script>
<div class:active={isActive} style="font-size: {fontSize}px;">
这是一个动态变化的段落。
</div>在这个例子中，class:active 将根据 isActive 的值来添加或移除 active 类。同时，style 属性中的 font-size 会根据 fontSize 的值进行动态更新。
总结
以上就是 Svelte 的一些基础语法。通过这些语法，你可以创建出具有动态交互性的 Web 应用程序。希望这些内容对你有所帮助！
接下来我们将学习如何使用 Svelte 的生命周期钩子以及如何管理组件之间的状态共享。