最轻量的前端框架Svelte教程，基础进阶+实战案例（已完结）

传送门：

▲扫描二维码

即可观看课程

配套资料可向班主任/课程老师索取~

Svelte是一款高性能的JavaScript前端UI框架，它将组件构建过程提前到编译期，减少了代码量、提高性能和开发效率，具有简明的语法规则、丰富的内置组件功能、自动优化、组件化设计等特点，适用于构建各种规模和类型的应用程序，包括大型Web应用、静态网站、小型单页应用等。

与Vue、React等前端框架相比，Svelte的语法更加简洁，生成的代码更小，适合构建轻量级的应用程序。

对于已经熟悉其他前端框架的开发人员来说，学习Svelte可以扩展技能并提高开发效率。总的来说，Svelte是一种有前途的前端框架，值得学习和掌握。

本课程将教授Svelte的基础知识和语法规则，以及如何创建和使用组件、进行状态管理和数据绑定、处理事件和表单、进行路由和导航、实现动画和过渡效果以及服务器端渲染。

通过本课程的学习，你将掌握使用Svelte构建现代Web应用程序的能力，并深入了解Svelte的设计理念和特点。

技术储备要求

具备一定的HTML、CSS和JavaScript语法基础，以便更好地理解和应用框架的核心概念和基本知识。

适合人群

● 对前端开发感兴趣的同学

●喜欢研究新技术的同学

●企业准备使用Svelte开发的在职前端开发

讲师介绍

大家好，我是俊杰老师，拥有10年的开发经验和5年的团队管理经验。在实际生产开发中，我积累了丰富的前后端开发经验，精通前端开发、Linux、PHP、Go等多个领域。我相信我可以带领大家更好地理解和掌握Svelte框架的知识和应用。

本次课程，你将收获

1、学习到一种全新的前端开发方式，这种方式可以帮助你更加高效地构建交互性更强的Web应用。

2、掌握Svelte框架的基本概念和技巧，包括如何使用Svelte编写组件、处理数据、管理状态以及优化性能等等。

3、掌握一种简单而直观的语法规则，以及一些实用的工具和技巧，来快速搭建具有吸引力和功能性的Web应用程序。

课程目录

第一天：

day01 01-Svelte项目基础-介绍

day01 02-Svelte项目基础-创建项目

day01 03-Svelte项目基础-hello world

day01 04-Svelte项目基础-数据渲染

day01 05-Svelte项目基础-img标签

day01 06-Svelte项目基础-双向绑定

day01 07-Svelte项目基础-单选框、复选框、选择的绑定

day01 08-Svelte项目基础-svelte样式

day01 09-Svelte项目基础-组件创建

day01 10-上午复习

day01 11-Svelte项目基础-匿名插槽

day01 12-Svelte项目基础-具名插槽

day01 13-Svelte项目基础-父传子

day01 14-Svelte项目基础-子传父

day01 15-Svelte项目基础-上下传参

day01 16-Svelte项目基础-渲染html

day01 17-Svelte项目基础-事件

day01 18-Svelte项目基础-响应性

day01 19-Svelte项目基础-对象或数组响应式数据

day01 20-Svelte项目基础-条件渲染

day01 21-Svelte项目基础-列表渲染

day01 22-Svelte项目基础-await模板

小结：我们学习了如何创建项目，以及如何进行基本的数据渲染和双向绑定。我们还学习了如何使用Svelte样式、创建组件、以及如何使用事件和响应性来处理数据。

第二天：

day02 01-复习回顾

day02 02-todolist项目-布局

day02 03-todolist项目-添加

day02 04-todolist项目-完成

day02 05-todolist项目-修改

day02 06-todolist项目-删除

day02 07-todolist项目-分组件

day02 08-todolist项目-完成

day02 09-svelte进阶-生命周期

小结：我们将所学的内容应用到了一个todolist项目中。我们学习了如何添加、完成、修改和删除任务，并将项目拆分为不同的组件，最终完成了一个可用的todolist应用。

第三天：

day03 01-复习回顾

day03 02-动画-补间动画

day03 03-动画-spring动画

day03 04-动画-显隐动画

day03 05-动画-在body标签上绑定事件

day03 06-数据大屏-网格布局入门

day03 07-数据大屏-网格布局2

day03 08-数据大屏-网格布局3

day03 09-数据大屏-弹性布局

day03 10-数据大屏-布局1

day03 11-acro admin-后台管理系统搭建

day03 12-数据大屏-布局2

day03 13-可视化-echarts

小结：我们学习了如何使用Svelte实现各种动画效果，包括补间动画、spring动画和显隐动画。我们还深入学习了网格布局和弹性布局，并应用它们来创建数据大屏布局。

配套笔记资料可以向班主任或课程老师索取~