变量与数据绑定
在 Svelte 中，我们可以通过声明变量来存储数据。这些变量可以是任何基本类型，如数字、字符串或布尔值，也可以是更复杂的数据结构，如数组和对象。
示例：
-- -------------------- ---- -------
--------
--- ---- - --------
--- --- - ---
--- ---------- - ------
--- ------- - --- -- ---
--- ------ - -
----- ------
---- --
--
---------
------ ----------
------ ---------
-------- ----------- - --- - --------
-------- ---------------- -------
-------- -------------- -----------------在这个例子中，{} 用于插入变量的值。此外，我们还可以使用三元运算符来根据条件显示不同的内容。
条件渲染
条件渲染允许我们在页面上根据某些条件显示或隐藏元素。这可以通过 if 和 else 语句来实现。
示例：
-- -------------------- ---- ------- -------- --- ---------- - ----- --------- ---- ----------- ------------------ ------- ------------ -----
这里，{#if} 和 {:else} 分别用于开始和结束一个条件块。{/if} 则用来关闭这个条件块。
循环渲染
循环渲染允许我们基于数组或其他可迭代对象来重复渲染元素。这可以通过 each 指令来实现。
示例：
-- -------------------- ---- -------
--------
--- ----- - ------ ----- ------
---------
----
------ ----- -- -----
---------------
-------
-----在这个例子中，{#each} 指令用于遍历数组，并为每个元素生成一个 <li> 元素。
事件处理
事件处理允许我们响应用户的操作，比如点击按钮或输入文本。这可以通过 on: 语法来实现。
示例：
-- -------------------- ---- -------
--------
--- ------- - ---
-------- ------------- -
-----------------
-
-------- ------------------ -
------- - -------------------
-
---------
------- -----------------------------------
------ ----------- ---------------------- ------------------- --
----------- -------------在这个例子中，on:click 和 on:input 分别用于绑定点击和输入事件。当事件触发时，相应的函数会被调用。
组件
组件是 Svelte 应用程序的基本构建块。它们可以包含模板、脚本和样式，并且可以在应用的不同部分重用。
创建组件：
首先，在一个单独的文件中定义组件：
MyComponent.svelte:
-- -------------------- ---- ------- -------- ------ --- ------ ------ --- -------- --------- ---- ------------------ ---------------- ---------------- ------
然后，在主应用程序中引入并使用它：
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 的生命周期钩子以及如何管理组件之间的状态共享。