简介
Svelte是干什么的？Svelte 是一个用于构建 Web 应用程序的工具
Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。
特点
- 编译时：Svelte 将尽可能多的工作从浏览器转移到构建步骤中。不再需要手动优化------只有更快、更高效的应用程序。
- 体积小：使用您已知的语言（HTML、CSS 和 JavaScript）编写极其简洁的组件。你的应用程序包也会很小。
- 完整：内置scoped styling、状态管理、动画、表单绑定等等------不要浪费时间在 npm 中寻找最基本的东西。一切都在这里。
- 开发、使用 ：
- 每个svelte组件的样式是隔离的
- svelte兼容ES2018
- 将逻辑（JavaScript）、结构（HTML）和样式（CSS）收集在同一个文件中，让代码易于阅读和维护
- 开箱即用的全局状态管理
- 内置辅助功能和未使用的CSS检查
- 组件自动导出
- 默认设置样式
- 内置了效果和动画
- 标签语句的响应能力（在要响应的变量前面放置一个美元符号）
创建项目
创建项目
npm create svelte@latest myapp
cd myapp
npm install
npm run dev基础
特殊标签
<svelte:head>动态修改head标签中的属性<svelte:self>允许组件递归地包含自身<svelte:component>可以修改一个组件的类别<svelte:window>如同事件可以监听 DOM 标签一样<svelte:body>允许你添加事件监听document.body<svelte:options>允许你指定编译器选项
svelte
<svelte:window on:keydown={handleKeydown}/>
<svelte:body
on:mouseenter={handleMouseenter}
on:mouseleave={handleMouseleave}
/>元素指令
on:事件名
使用
on:指令来监听 DOM 事件
svelte
on:eventname={handler}
on:eventname|modifiers={handler}修饰符：
- preventDefault ：在程序运行之前调用 event.preventDefault()
- stopPropagation ：调用 event.stopPropagation(), 防止事件到达下一个标签
- passive ：改善了 touch/wheel 事件的滚动表现（Svelte会在合适的地方自动加上它）
- capture：表示在 capture阶段而不是bubbling触发其程序
- once ：程序运行一次后删除自身
alert-info 同一事件可以有多个事件侦听器
<button on:click={increment} on:click={track}>Click me!</button>
其他
| 指令 | 描述、示例 |
|---|---|
| bind:属性 | bind:property={variable} |
| 组绑定 | bind:group={variable} |
| bind:属性 | bind:property={variable} |
| bind:this | 针对传统的DOM节点，请使用 bind:this来绑定 |
| class:name | 指令可以以其简写形式绑定其标签的class。 |
| use action | Action 作为一个方法用于标签被创建时调用。调用destroy函数返回表示标签被销毁。 |
| transition:fn | transition:fn={params} |
| in:fn/out:fn | 淡入淡出 |
| animate:fn | 动画 |
特殊指令
@html
@dubug
该
{@debug ...}标签提供了console.log(...). 当特定变量的值发生变化时，它会记录它们，并在打开开发工具时暂停代码执行
@const ...
标签定义了一个局部常量
逻辑块
条件渲染 #if ...
列表渲染 #each... as ...
异步渲染
Store
订阅 subscribe
subscribe(this: void, run: Subscriber<T>, invalidate?: Invalidator<T>): Unsubscriber;
run订阅回调invalidate清理回调
设置 set
set(this: void, value: T): void;
设置值并通知订阅者
更新 update
update(this: void, updater: Updater<T>): void;
使用回调更新值并通知订阅者。
获取 get
function get<T>(store: Readable<T>): T;
需要检索您未订阅的store的值。get允许您这样做.
可读 readable
可写 writable
派生 derived
从一个或多个store中派生出一个store
只读 readonly
生命周期函数
onMount
onMount函数安排回调在组件安装到 DOM 后立即运行。它必须在组件初始化期间调用（但不需要位于组件*内部；可以从外部模块调用它）
如果从 返回一个函数onMount，则在卸载组件时将调用该函数。
beforUpdate
回调在任何状态更改后更新组件之前立即运行
afterUpdate
回调在组件更新后立即运行
tip: 回调第一次运行将在初始回调之后onMount
onDestroy
回调在组件卸载之前立即运行
上下文
父组件设置上下文
子组件获取上下文
判断context里面某个key是否存在
获取所有上下文里面的值
结束
以上是svelte的一些基础api和使用方法。