首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
Sevlte
_大猛_
创建于2021-06-23
订阅专栏
翻译文档,教程,实战
等 2 人订阅
共20篇文章
创建于2021-06-23
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
SvelteKit翻译教程——WEB标准
在本文档中,您将看到对 SvelteKit 构建的标准 Web API 的引用。我们不是重新发明轮子,而是使用该平台,这意味着您现有的Web开发技能适用于SvelteKit。
SvelteKit翻译教程——创建一个项目
一个典型的 SvelteKit 项目如下所示: 您还可以找到常见文件,例如.gitignore和.npmrc(.prettierrc以及.eslintrc.cjs等等,
SvelteKit翻译教程——创建项目
开始构建 SvelteKit 应用程序的最简单方法是运行npm create。第一个命令将在my-app目录中搭建一个新项目,询问您是否想要设置一些基本工具,例如 TypeScript。
SvelteKit翻译教程——介绍
什么是 SvelteKit? SvelteKit 是一个使用Svelte快速开发健壮、高性能 Web 应用程序的框架。如果您来自 React,SvelteKit 与 Next 类似。
Svelte教程翻译(十五、特殊元素)
<svelte:self> <svelte:component> <svelte:window> <svelte:body> <svelte:head> <svelte:options> ...
Svelte教程翻译(十四、上下文API)
上下文 API 为组件提供了一种相互“对话”的机制,无需将数据和函数作为props传递,也无需分派大量事件。这是一项高级功能,
Svelte教程翻译(十三、插槽)
就像元素可以有子元素一样: 组件也可以。但是,在组件接受子级之前,它需要知道将它们放在何处。我们使用<slot>元素来实现这一点。把这个放进Box.svelte里: 你现在可以把东西放进Box里了:
Svelte教程翻译(十二、Classes)
与任何其他属性一样,可以使用JavaScript属性指定class,如下所示: 这是UI开发中的常见模式,因此Svelte包含了一个特殊的指令来简化它: 只要表达式的值是真的,selected样式名就
Svelte教程翻译(十一、动作)
自定义动作 动作本质上是元素级生命周期功能。它们在以下方面很有用: 与第三方库接口 延迟加载的图像 提示 添加自定义事件处理程序 在这个应用程序中,我们要使橙色框“可平移”。它有panstart、pa
Svelte教程翻译(十、动画)
在上一章中,我们使用延迟过渡来创建元素从一个todo列表移动到另一个todo列表时的运动。 为了完成效果,我们还需要将运动应用到没有过渡的元素上。为此,我们使用animate指令。 首先,从svelt
Svelte教程翻译(九、过渡)
过渡 我们可以通过优雅地将元素显示到DOM中或从DOM中移除,来创建更具吸引力的用户界面。使用transition指令,在Svelte中这变得非常容易。 首先,从svelte/transition导入
Svelte教程翻译(八、补间动画)
运动 设置值和观察DOM自动更新是很酷的。知道什么更酷吗?这些值之间的差异。Svelte包括一些工具,可以帮助您构建流畅的用户界面,使用动画来传达更改。 我们先将progress存储更改为tweene
Svelte教程翻译(七、存储)
存储 并非所有应用程序状态都应用于程序的组件层次结构内。有时,您的值需要在多个不相关的组件或常规JavaScript模块之间访问。 writable 在Svelte,我们通过存储来做到这一点。 存储只
Svelte教程翻译(六、生命周期)
生命周期 每个组件都有一个生命周期,从创建时开始,到销毁结束。同时在这个过程中也会运行一些叫做生命周期的函数,可以在不同阶段添加处理代码的机会。 Mount 您最常使用的是onMount,它在组件第一
Svelte教程翻译(五、组件绑定)
输入框绑定 通常的规则是,Svelte中的数据流是自上而下的,父组件可以在子组件上设置Props,组件可以在元素上设置属性,但不能反过来。 有时我们需要打破这个规则。以组件中的<input>元素为例,
Svelte教程翻译(四、事件)
DOM事件 在下面的事例你将看到,您可以使用on:事件名来监听元素上的任何事件: 完整代码: 内联处理 您还可以使用内联声明事件处理程序: 引号是可选的,但在某些环境中,它们有助于提高语法突显。 事件
Svelte教程翻译(三、逻辑渲染)
条件渲染 HTML没有表达逻辑的方式,比如条件和循环,Svelte有。 为了有条件地呈现某些内容,我们将其包装在if块中: 完整代码如下: 点击按钮,按钮将在【Log out】与【Log in】之间切
Svelte教程翻译(二、Props)
Props 到目前为止,我们只处理内部状态,也就是说,只能在给定的组件中访问这些值。 在任何真正的应用程序中,都需要将数据从一个组件传递到其子组件。要做到这一点,我们需要声明属性,通常简称为“ pro
Svelte教程翻译(一、响应)
响应 Svelte的核心是一个强大的响应系统,可以使DOM与应用程序状态保持同步ーー例如,响应一个事件。 为了演示它,我们首先需要触发一个事件的程序: 在handleClick函数中,我们需要做的就是
Svelte教程翻译(〇、引言)
##什么是Svelte? Svelte是用于构建快速Web应用程序的工具。 它类似于React和Vue等JavaScript框架,它们的共同目标是轻松构建流畅的交互式用户界面。 但是有一个关键的区别: