超级简短的 Svelte 框架入门教程,仅需十条推文
2020/4/17 11:06:43
本文主要是介绍超级简短的 Svelte 框架入门教程,仅需十条推文,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Xiaoru "Leo" Li 原作,翻译转载自 New Frontend 。
总想了解下 Svelte(web 开发的下一次革命)但是一直没时间?
01
这份十条推文组成的旋风教程正是为你准备的!
(剧透警告:Svelte 是如此直观易用,以至于你可能感觉这些你都已经知道了!)
Svelte 的工作机制:
- 编译器:并不会分发一个 Svelte 「库」给用户,而是在构建阶段编译出优化的纯 JS 代码
- 组件:应用由可组合的 UI 元素组成
- 响应式:事件/用户交互触发一系列状态改变,自动更新整个应用的组件
![编译、响应](/upload/202004/17/202004171106426122.png)
02
用户界面是组件树。组件定义了应用应当如何解释一些抽象的「状态」值,以便在浏览器中转换为 DOM 元素,并最终转换为屏幕上的像素。
![组件树和状态变量](/upload/202004/17/202004171106426640.png)
03
每个 .svelte
文件包含一个组件,由三部分组成:
-
<stript>
是 JS 编写的组件逻辑 -
<style>
是 CSS 样式,作用域和应用范围仅限于当前组件 -
Svelte 模板,以 HTML 基础,加上一些定制组件和内嵌逻辑(类似 JSX)
![脚本、样式、模板](/upload/202004/17/202004171106427138.png)
04
除了 HTML 元素外,Svelte 模板中还可以使用自定义组件。在不会引起歧义的情况下,在模板中引入自定义组件时可以省略 .svelte
文件扩展名,但是自定义组件的首字母 必须 大写。
花括号中可以使用 JS 表达式。
![Svelte 模板示例](/upload/202004/17/202004171106428232.png)
05
「控制」子组件行为的常见做法是将数据作为属性(props
)传入。
使用 export
暴露属性变量。注意赋值时使用 let
而不是 const
,因为 const
无法重新赋值。
![暴露变量和传入属性](/upload/202004/17/202004171106428866.png)
06
用户动作会触发事件。我们使用 on:
监听事件并运行函数以更新状态。用户界面会随着状态的更新自动更新。
一般来说数据从上往下流动,但我们可以使用 bind:
开放双向数据流动以简化状态更新逻辑。
![on 和 bind 用法示例](/upload/202004/17/202004171106429853.png)
07
$:
开头的语句是「响应式语句」。
Svelte 会分析响应式语句依赖的变量。任意依赖变量的值改变时,会重新执行相应的响应式语句。声明衍生状态或触发「副作用」时这个特性十分好用。
![响应式语句示例:检测密码强度](/upload/202004/17/202004171106430595.png)
08
响应式「store」方便在组件之间共享状态。store 放在单独的 JS 文件里,只需用 writable
封装一个值就可以创建。
在组件中引用(读写)时,store 名称带上 $
前缀。编译器真奇妙!
![store 的声明和使用](/upload/202004/17/202004171106431454.png)
09
在 Svelte 模板中,使用 {#if}
可以实现有条件地渲染组件({#if}
有一个可选的 {:else}
分支)。
使用 {#each}
渲染列表中的每个成员。
别忘了总是使用 {/if}
或 {/each}
收尾。
(下面的例子中其实应该使用 <ol>
,我用 <ul>
是为了演示如何访问数组索引)。
![if 和 each 示例](/upload/202004/17/202004171106432431.png)
10
Svelte 下进行 API 请求之类的异步操作非常容易。
我们可以直接 {#await}
Promise 完成,在结果就绪前显示「加载中」。
注意 {#await}
关键字只适用于模板部分,无法在 <script>
中使用。
![{#await}、{:then}、{:catch}](/upload/202004/17/202004171106433417.png)
Svelte 自带精美的动画变换效果。试着给你的组件加上 transition:fly
属性!还可以尝试下其他类型的动画效果,比如 fade
(淡入淡出) 和 slide
(滑动)。你还能使用 in:
、out:
分别为出现和消失指定不同的效果。
传入参数可以进一步微调动画效果。
![动画效果演示](/upload/202004/17/202004171106434619.png)
好了,这就是上手 Svelte 前需要了解的所有内容。😁
开发愉快!
(这篇旋风教程的形式借鉴了 Chris Achard 写的 React 超短入门教程)
这篇关于超级简短的 Svelte 框架入门教程,仅需十条推文的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现