![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
svelte
文章平均质量分 73
闲欢
我不是逗你玩~
展开
-
svelte初始化时load函数返回props和stuff区别
在svelte的module中,我们可以通过load函数返回props和stuff两个重要的对象,这两个对象分别有不同的功能作用,没弄明白很容易迷糊,本文就着重讲一下这两个对象的作用。原创 2022-06-01 10:15:58 · 234 阅读 · 0 评论 -
svelte中几个关键字总结
在svelte中,有些关键字跟其他框架不一致,刚开始接触时会感觉比较奇怪,而且很难记住他们的使用场景,这里我一起总结一下,希望可以对比起来看,更容易理解。bind在我们需要双向绑定的时候,就用bind关键字,这样我们的值变化了,可以直接反应到页面UI上:<script> let name = 'world';</script><input bind:value={name}><h1>Hello {name}!</h1>原创 2022-05-26 18:23:22 · 248 阅读 · 0 评论 -
svelte特殊元素
Svelte 提供了各种内置的特殊元素。1、<svelte:self>首个介绍的是<svelte:self>,它表示当前组件,允许在某些情况递归自身,这对于展示文件夹树之类的视图很有用,其中文件夹可以包含其他文件夹。下方以展示文件夹树Folder为例:Folder.svelte<script> export let name = 'noname'; export let folders = []</script>&l...原创 2022-05-24 11:22:31 · 406 阅读 · 0 评论 -
svelte插槽
HTML 元素允许相互组合,由此构建复杂的页面。如果不是普通的 HTML 元素,而是 Svelte 组件,同样支持让组件作为容器,为其添加子组件,以此组合出更大更强的组件,这种容器被称为插槽(Slots)。1、插槽元素可以有子级节点...<div> <p> p 元素是 div 的子元素 </p></div>..组件也可以有。但是,组件接收子级节点之前,它需要知道应该将子级节点放置何处。我们使用<slot>元素来应对此操.原创 2022-05-24 11:11:14 · 244 阅读 · 0 评论 -
svelte上下文
Context,中文译为上下文,即语境,但从字面入手,恐怕较难理解。打个比方,假设你30好几还是单身,今天准备去相亲,跟一个男孩/女孩约在南京路中餐厅吃饭,你与相亲对象之间,必然有一个联系人,我们通常称之为“媒婆”,通常嘴角有颗痣,还有媒婆扇子,媒婆就是你们之间(组件之间)能产生联系的上下文。你对相亲对象有任何想要事前了解的信息,都能通过媒婆获悉;对方亦然。女方一般要深入了解两类重要信息,分别是经济层面及哲学层面。经济层面包括:房、车和钱,这无可厚非,不一定就说明此人物质,对此愤慨的一般是些原创 2022-05-24 10:56:44 · 221 阅读 · 0 评论 -
svelte动作(Action)
1、use 指令动作(Action),其本质是元素上的生命周期函数。它们可用于譬如以下几个方面:与第三方库对接 延迟加载图片 工具提示(tooltips) 添加自定义事件处理程序我们模拟先做一个第三方库,要使第三方库适配 Svelte 的 Action 十分简单,实际上,Action 只是一个普通的函数,它接收一个参数,就是当前元素的 DOM 节点对象。我们自制的“第三方”库的功能假设是一个让任意元素支持移动的 JS 库,它的框架大概是这样:movable.jsexport f原创 2022-05-24 10:51:38 · 324 阅读 · 0 评论 -
svelte状态管理
Svelte 是没有对应的状态库的,因为它内置了状态管理,它被称为store。当期望脱离组件的层级(父-子)关系且能够在任意位置都能访问某个状态(变量)时,状态管理仍然是非常有用的一个特性。总的来说,Svelte 的状态管理更为简单直接 —— 我对这种简单的热爱毫不掩饰,它起码不会使用起来要绕晕脑袋(可能我的理解能力比较低),使得我的代码在别人眼里看来很“高级”。1、可写状态(Writable stores)并非所有的状态都属于在组件层次的结构内。某些时候,有些状态需要被多个毫不相干的组件.原创 2022-05-24 09:50:47 · 683 阅读 · 1 评论 -
svelte事件
本章我们专门探讨 Svelte 事件处理。1、DOM 事件我们来写一个简单的程序,界面上展示鼠标当前所在的坐标:<script> let m = { x: 0, y: 0 }; function handleMousemove(event) { m.x = event.clientX; m.y = event.clientY; }</script><style> div { width: 100%; height: 1原创 2022-05-23 16:05:27 · 341 阅读 · 1 评论 -
svelte模板
除去脚本,组件的另一个核心点是 UI,用于描述 UI 的 HTML 是一种“静态”的语言,HTML 是无法表达逻辑的,比如条件和循环,但 Svelte 可以。Svelte 为其增加了一些逻辑支持,譬如判断、遍历等,以增强你对 UI 的表达能力。这些额外附加的逻辑能力似曾相识,它十分接近一些以往非常流行的Handlebars或者Mustache模板语言,例如{{#if ...}},稍有区别的是,Svelte 使用单个大括号括起:{#if ...}。Svelte 的编译器将会编译这些逻辑,...原创 2022-05-23 14:40:43 · 195 阅读 · 0 评论 -
svelte响应式核心——赋值
1、触发反应性的核心——赋值Svelte 的核心是功能强大的响应式系统,用于使 DOM 与你的应用程序状态保持同步,例如响应事件。<script> let count = 0; function handleClick() { // 事件处理代码写在这儿 }</script><button> Clicked {count} {count === 1 ? 'time' : 'times'}</button>为了演示原创 2022-05-23 10:45:30 · 292 阅读 · 0 评论 -
本地安装svelte命令步骤
您需要先在本地系统中安装Node,然后才能获取基本的Svelte项目。 然后,我们可以在需要创建Svelte应用程序的存储库中运行以下命令:npx degit sveltejs/template project-name创建存储库后,移至该文件夹并安装项目所需的依赖项。 项目的依赖关系在“ package.json”文件中指定。cd project-name安装npm:npm install为了运行开发环境,我们需要运行“ dev”脚本。npm run dev...原创 2022-04-28 10:15:04 · 367 阅读 · 0 评论