![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
svelte
文章平均质量分 83
前端Jason
做一个能独立思考的人,有话可说,有事可干,歌以咏志。
展开
-
Svelte 官方入门教程(6)—— 绑定
通常,Svelte 中的数据流是 自上而下,父组件可以在子组件上设置 props,而组件可以在元素上设置属性,但反之则不行。App.svelte某些情况亟需打破这种规则。以组件中的 元素为例,我们 可以 为其添加 事件处理程序,在该程序中将 的值设置为 ,不过这样写法有点拖沓累赘,以后在表单元素的情况愈加苦不堪言。好在,我们可以使用 指令:这意味着更改name的值时会更新 input 的值,反之亦然(双向绑定)。App.svelte在 DOM 中的值都是字符串。不能很好地帮助你处理数字输入( 和转载 2022-08-07 17:19:06 · 616 阅读 · 0 评论 -
Svelte 官方入门教程(5)—— 事件
本章我们专门探讨 Svelte 事件处理。我们来写一个简单的程序,界面上展示鼠标当前所在的坐标:我们此前已经初步了解到,要在元素上监听任意事件,我们可以使用 on: 指令:2、内联事件你也可以用内联的方式声明事件处理:属性值上的双引号其实是可选的,只是某些环境下有助于语法突出显示。DOM 事件处理程序允许使用修饰符来变更行为。例如,对某个处理程序使用修饰符后,这个处理程序只会运行一次:事件修饰符完整的列表:组件也可以发送(dispath)事件。为此,需要创建一个事件分发器(dispatcher)。转载 2022-06-26 22:32:49 · 655 阅读 · 0 评论 -
Svelte 官方入门教程(4)—— 模板逻辑
先来参看这些代码:App.svelte为了可以按条件渲染某些标记,我们将其放置在 if 块中:App.svelte当然,这仅仅是为了演示,实际上我们知道两个 button 唯一的区别是“out”和“in”两个单词之差,完全可以使用一个 ? 号表达式来替代上述繁琐的 if。由于和这两个条件是互斥的,因此可以使用块来简化它:App.svelte3、Else-If 块假设我们已有如下代码:App.svelte可以使用将多个条件 “连接” 在一起:App.svelte4、each 块如果你需要遍历数转载 2022-06-05 15:46:39 · 324 阅读 · 0 评论 -
Svelte 官方入门教程(3)—— Props
1、声明组件的 Props到目前为止,我们只处理组件内部的状态,也就是说,这些值只能在给定的组件中访问。在任何实际的应用程序中,您都需要将数据从一个组件传递到其子组件。为此,我们需要为组件声明 属性,通常缩写为 ‘props’。参看下方的子组件 Nested.svelte 及父组件 App.svelteNested.svelte<script> let answer;</script><p>The answer is {answer}</p>转载 2022-05-24 23:09:19 · 274 阅读 · 0 评论 -
Svelte 官方入门教程(2)—— 反应性
所谓反应性,对应React的状态(Status)或Vue的 data(实际上也是状态)。Svelte 的组件状态,在用户看来,跟普通的 变量 无异:<script> let count = 0; let username = 'anders' let things = 'pens'</script><div>{username} has {count} {thins} </div>而组件状态对应于 Vue,则叫 data:<s转载 2022-05-21 23:02:29 · 256 阅读 · 0 评论 -
Svelte 官方入门教程(1)—— 简介
在介绍 Svelte 之前,首先解决的要务问题是:Svelte 不是 Servlet,Svelte 是一个前端 Web 框架,而 Java Servlet 与 Svelte 不是一个类型的程序,务请明鉴。如有误入,请出门右转。一、初窥门径花径不曾缘客扫,教程今始为君开。本教程循序渐进,为你倾囊相授如何使用 Svelte 轻松创建快速小巧的应用。如果你想深入精微,探求透彻,不妨随时翻阅 API 文档 及 示例。倘若你现在就迫不及待想在本机上开发,60秒极速入门 正是为你而准备的。本教程所有.转载 2022-05-16 23:21:09 · 1718 阅读 · 0 评论