Svelte.js得心应手
文章平均质量分 80
这是国内较早较全且经过实践的Svelte.js系列教程。
我想养只猫 •͓͡•ʔ
Coder
展开
-
相比Vue和React,Svelte可能更适合你
Svelte 基于用于(本质上,Svelte.js 本身就是一个编译器),允许仅加载在页面上显示应用程序所需的内容——尽可能小的、“可消化的” JavaScript 代码。这意味着没有虚拟 DOM,没有框架之上的框架,也没有运行时的框架。这是 Svelte 和 Vue 之间的主要区别,也是 Svelte 与 React 与 Angular 与 Vue 之战的主要争论点。Svelte 是一个构建 web 应用程序的工具。原创 2022-10-17 14:28:27 · 2900 阅读 · 7 评论 -
【Svelte】-(8)lifecycle 生命周期|onMount / onDestroy / beforeUpdate / afterUpdate / tick
每个组件都有一个生命周期,从创建时开始,到销毁时结束。有一些函数可以让你在生命周期的关键时刻运行代码。我们可以挂钩这些事件来帮助我们实现我们想要的功能。onMount组件渲染后触发onDestroy组件销毁后触发在 DOM 更新之前触发更新后触发。原创 2022-10-23 21:39:20 · 1006 阅读 · 0 评论 -
【Svelte】-(7)绑定|Each 块绑定 / audio video 媒体标签绑定 / client offset 尺寸绑定 / this / 组件绑定
就像你可以绑定到 DOM 元素的属性一样,你也可以绑定到组件的 props,也可以绑定到组件实例本身,来使用组件内导出的内容。当要使用不可变数据,应该去避免使用这些绑定,并且改用事件来处理这些内容。请注意,在组件挂载之前的值将是undefined,因此我们将逻辑放在。可以绑定于每个元素和组件,而且可以获取对。您也可以在 Each 的过程中使用。生命周期在后面的文章会提到。不过需要注意的是,与这些。标签也有许多可绑定属性。,效果当然不言而喻。原创 2022-10-21 11:45:36 · 713 阅读 · 0 评论 -
【Svelte】-(6)绑定|input 输入框 / group 复选框绑定 / textarea 输入框 / select 绑定 / contenteditable 属性绑定
一般来说,数据流是自上而下的,就像父组件可以在子组件上设置 props,组件可以在元素上设置属性,但反过来不行。的初始值,会自动将列表中的第一个设置为默认值。是相通的,之所以单独列出来,就是为了给大家看一个示例,为了帮助你区分。这个标签为例,我们可以添加一个事件处理,来获取。所以,Svelte为了方便我们,我们可以直接使用。标签,很多标签的属性我们可以直接添加。如果有多个与同一值相关的输入,则可以用。有一个好玩的是,设置年龄之后绑定了。属性,这种情况下绑定的。如果有认真,你就会发现。的标签,数据也会同步。原创 2022-10-20 15:38:42 · 1028 阅读 · 0 评论 -
【Svelte】-(1)基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签
然后,一旦项目设置好了,使用 Svelte 组件就很容易了。文件都是一个组件,该组件是一个可重用的自包含代码块,它封装了属于一起的 HTML、CSS 和 JavaScript。相反,我们可以从其他文件导入组件,然后像包含元素一样使用它们。如果你使用的是 VS Code,去VS Code的插件库下载。您可以使用花括号来控制元素属性,就像使用它们来控制文本一样。这里要注意,作用域仅是这个组件,并不会影响其他组件或者全局。Svelte 为我们提供了这些情况的便捷简写,因此,预览看看,你的端口可能和我的不一样。原创 2022-10-17 17:49:02 · 1084 阅读 · 0 评论 -
【Svelte】-(2)reactivity响应式 | 赋值 / reactivity变量 / reactivity代码语句 / reactivity对象
reactivity 系统 即反应性或者响应式。在Vue中是 `ref` 或者 `reactive` ,在React中是 `useState` 。在Svelte中则十分简洁,终于可以摆脱Hooks了(虽然我也很爱Hooks)Svelte 的内核是一个强大的 reactivity 系统,能够让 DOM 与你的应用程序状态保持同步,例如,事件响应。原创 2022-10-17 21:19:00 · 1035 阅读 · 0 评论 -
【Svelte】-(3)Props 组件传值
在这里你可以感受到Svelte的简洁。原创 2022-10-18 17:17:23 · 893 阅读 · 0 评论 -
【Svelte】-(4)If 条件判断语句 / Each 循环语句 / Await 异步处理块
但为了体验,牺牲点也无所谓🫤。这一块主要就是为了等待异步数据,和在javascript中调用async function是一样的,等待promise值。HTML 没有表达逻辑的方法,比如条件和循环。推荐使用字符串或数字当作key,当然是任何对象都可以。在Svelte中遍历数据列表,需要使用。块,遍历的对象需要时数组(类似)对象。注意有两种写法,如果不存在错误可以这样写。这里你这样写也是一样的。原创 2022-10-19 19:58:28 · 1269 阅读 · 0 评论 -
【Svelte】-(5)DOM事件 / 事件修饰符 / 组件事件 / 事件转发 (组件之间的事件沟通)
对了值得一提的是在Svelte中你不用担心性能问题,怎么方便怎么来。其实事件转发很简单,其实就是组件嵌套的时候,我们把事件一层一层传递上去。实例化不支持在 setTimeout 之类的事件回调之中使用)。我们将获取到的数据往上传,你改变的只是function里接到。效果是一样的,贴上 App.svelte 的代码大家自己实验。在Svelte之中,我们如果要绑定DOM上的事件可以添加。,即组件内必须创建一个相同事件并在外部进行分配。组件也可以调度事件。其实就像子组件给父组件事件。在子组件内我们需要使用。原创 2022-10-19 22:11:16 · 657 阅读 · 0 评论