- 博客(25)
- 收藏
- 关注
RSS订阅原创 Svelte实现模态框
模态框（Modal）是前端开发中常用的一种用户界面元素，用于在当前页面上显示一个对话框或窗口，通常用于提示用户、确认操作或显示额外的信息。模态框会覆盖页面的其他内容，直到用户与之交互（例如关闭、确认或取消）后才会消失，从而确保用户注意到模态框中的内容。
2024-07-20 17:41:17
569
原创 Svelte实现防抖函数
兄弟们！今天来跟大家聊聊前端开发中的一个神器 —— 防抖函数！🚀✨🤔 What？什么是防抖函数？防抖函数就像是给你的操作加了个"冷静期"。它能让连续触发的事件只执行最后一次，简直是处理频繁操作的必备良药！🎯 Why？为什么要用防抖函数？🌈 Where？在哪里用防抖函数？💡 How？怎么用好防抖函数？记住，合理使用防抖函数，让你的网页速度嗖嗖的，用户体验棒棒哒！👍#前端开发 #性能优化 #防抖函数 #coding小技巧。
2024-07-20 17:33:01
467
原创 Svelte学习 COMPONENT COMPOSITION （十六）
Slots:Slots 允许父组件向子组件传递内容,子组件可以在适当的位置渲染这些内容。子组件使用<slot>元素来定义插槽。父组件在使用子组件时,可以在子组件标签内部放置内容来填充插槽。如果父组件没有提供插槽内容,子组件可以定义默认的回退内容。这可以通过在<slot>元素内部放置默认内容来实现。子组件可以定义多个具名插槽,父组件可以将内容放置在对应的插槽中。父组件使用属性来指定内容应该渲染到哪个插槽。子组件可以向插槽传递数据,父组件可以访问这些数据并根据它们渲染内容。
2024-07-20 17:32:24
43
原创 Svelte学习十五 CLASSES
Classes 是 Svelte 中的一个核心概念，用于在组件中定义 CSS 类（Class）和样式。它允许你在组件中使用 CSS 选择器来定义样式，并且可以轻松地应用样式到组件中。
2024-07-20 17:31:38
35
原创 Svelte学习十四
Actions 是 Svelte 中的一个核心概念，用于在组件之间共享状态。它允许你在不同的组件之间共享状态，并且可以轻松地实现状态的更新和访问。
2024-07-20 17:30:59
9
原创 Svelte学习十三 SVG
Svelte 中的 SVG 是指在 Svelte 组件中使用 SVG 图形的能力。SVG（Scalable Vector Graphics）是一种基于向量的图形格式，可以被渲染到 HTML 页面中。
2024-07-20 17:30:25
14
原创 学习Svelte Easing（十二）
😊Svelte 提供了一个名为 的功能，可以用于实现动画效果。 是一种函数，它将输入值映射到输出值之间的某个位置，用于控制动画的速度和缓冲。Svelte 中提供了多种内置的 easing 函数，包括：1. : 一种线性 easing 函数，用于实现匀速的动画效果。2. : 一种 ease-in easing 函数，用于实现从开始到结束的缓慢加速动画效果。3. : 一种 ease-out easing 函数，用于实现从开始到结束的缓慢减速动画效果。4. : 一种 ease-in-out easing 函
2024-07-20 17:29:48
9
原创 学习Svelte ANIMATIONS（十一）
总的来说,Svelte 的动画特性是其亮点之一,能够帮助开发者轻松地为应用添加流畅的视觉效果,提升用户体验。通过结合 Svelte 的声明式语法和内置的动画支持,开发者可以用很少的代码实现出色的动画效果。
2024-07-20 17:28:52
10
原创 Svelte实现请求 fetch/axios
选择使用哪个取决于你的具体需求。如果你需要更多的功能和更简单的API，axios可能是更好的选择。如果你希望减少依赖并且主要在现代浏览器中使用，fetch可能更合适。这样就完成了使用Svelte和Axios实现GET请求并处理指定数据格式的任务。记得要处理可能的错误情况,以提供更好的用户体验。这个表格总结了fetch和axios在各个方面的主要区别，希望能帮助您更清晰地比较这两种方法。在模板部分,根据是否有错误来渲染不同的内容。然后,创建一个新的Svelte组件,例如。来存储API响应和可能的错误。
2024-07-13 14:35:37
31
原创 Svelte实现吃饭叫号(简单版)
customerscustomerscustomerscustomers这个示例演示了如何使用 Svelte 来构建一个简单的交互式应用程序。你可以根据需要进一步扩展和完善这个程序,比如添加计时器、音效提示等功能。升级版。
2024-07-13 00:13:30
171
原创 学习Svelte TRANSITIONS（十）
top: 50%;span {虽然通常应该尽可能多地使用CSS进行过渡，但是如果不借助JavaScript，有些效果是无法实现的，例如“逐字打印”效果：App.svelteif (!valid) {
2024-07-13 00:02:05
13
原创 学习Svelte MOTION（九）
MOTION（Motion In Our Template）是一个在 Svelte 中使用的状态管理机制。它允许你在组件之间共享状态，实现了一个简单 yet powerful 的状态管理机制。
2024-07-13 00:01:12
8
原创 学习Svelte STORES（八）
Svelte 中的 Stores 是一种用于管理应用程序状态的机制。Stores 是响应式的,这意味着当 Store 中的数据发生变化时,所有依赖于该数据的组件都会自动更新。subscribesetupdate在这个示例中,我们定义了一个可写 Storecount,并在App.svelte组件中使用它。App.svelte$countclickstore.jswritable当点击"Increment"按钮时,$count的值会自动更新,并且所有依赖于$count的组件都会自动重新渲染。
2024-07-13 00:00:19
13
原创 学习Svelte Lifecycle（七）
Svelte 中的生命周期钩子提供了一种在组件的不同阶段执行代码的方式。这些钩子函数可以帮助开发者更好地控制组件的行为和状态。这些生命周期钩子可以帮助开发者更好地控制组件的行为和状态。例如,可以在onMount中初始化第三方库,在onDestroy中清理资源,在onUpdate中执行额外的逻辑等。此外,Svelte 还提供了一些特殊的生命周期钩子,如ssr和hydrate。这些钩子可以用于服务端渲染和客户端hydration的场景。
2024-07-12 23:58:50
13
原创 学习Svelte BINDINGS（六）
Svelte中的BINDINGS是一种在组件模板中声明数据绑定的方式,它可以将组件的属性和状态与DOM元素的属性相链接。这些绑定使得数据在组件和DOM之间自动同步更新。bind:valuebind:groupv-model总的来说,Svelte的绑定机制使得数据和UI的同步更加简单和直观,减轻了开发者的负担。这是Svelte相比于其他框架的一大优势。
2024-07-08 15:30:41
20
原创 学习Svelte EVENTS（五）
在 Svelte 中,事件处理是通过使用指令来实现的。这个指令后面跟的是一个函数,当相应的事件被触发时,这个函数就会被调用。总的来说,Svelte 的事件处理机制是建立在响应式系统之上的,它能够自动管理事件绑定和 DOM 更新,使得开发者可以更加专注于业务逻辑的实现。总的来说,Svelte 的事件处理机制更加声明式、自动化和高性能,相比 Vue 的事件处理更加简洁和易于理解。这些特点使得 Svelte 在构建交互式 UI 时更加高效和优雅。
2024-07-08 15:29:47
29
原创 学习Svelte Logic（四）
Svelte 是一个轻量级、灵活的前端框架，旨在帮助开发者快速构建高效、可维护的 Web 应用程序。ComponentmountupdatedestroyStateDOM总之，Svelte 的 Logic 部分提供了一种轻松、灵活和高效的方式来编写前端逻辑代码。
2024-07-08 15:29:00
15
原创 Svelte购物车完美版
总的来说,这段代码实现了一个简单的购物车功能,包括商品列表、添加商品到购物车、从购物车中移除商品,以及计算购物车总价等。这是一个很好的Svelte入门示例,展示了Svelte的基本特性,如响应式数据绑定、列表渲染等。总的来说,这个简单的购物车示例展示了 Svelte 的一些核心特性,如响应式数据绑定、列表渲染、事件处理和组件化等。这些特性使得 Svelte 开发Web应用程序变得更加简单和高效。
2024-07-08 14:45:09
1116
原创 创建一个Svelte工程
以上几种方式都可以快速创建一个基本的Svelte项目。使用脚手架最简单,手动需要配置一些基础文件。svelte-kit集成了路由、布局、API请求等功能,是快速创建应用的好选择。Sapper集成了服务器渲染、SSR功能。
2024-07-08 14:40:49
134
原创 学习Svelte PROPS（三）
Props 是 Svelte 组件的一个重要概念。它允许你将数据或配置信息从父组件传递给子组件，从而实现组件之间的通信。
2024-07-08 14:39:14
759
原创 Markdown
欢迎使用Markdown编辑器)你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z重做：Ctrl/Command + Y加粗：Ctrl/Command + B斜体：Ctrl/Command + I标题：
2024-06-28 08:59:13
719
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人