{a} + {b} = {a + b}.
13 | ``` -------------------------------------------------------------------------------- /chapter2/svelte-body.md: -------------------------------------------------------------------------------- 1 | ### `counting down... {count}
15 |lift-off!
18 | {/if} 19 | ``` -------------------------------------------------------------------------------- /chapter2/Component event.md: -------------------------------------------------------------------------------- 1 | ## Component events 2 | 3 | ```html 4 | on:eventname={handler} 5 | ``` 6 | 7 | 组件可以使用`createEventDispatcher`或转发 DOM 事件来 emit 事件。 8 | 9 | 监听组件的事件，和监听 html 事件一模一样。 10 | 11 | ```html 12 |what was the question?
16 | {/if} 17 | ``` 18 | 19 | 可以用`{:else if expression}`添加额外的条件，也可以选择是否以`{:else}`结尾。 20 | 21 | ```html 22 | {#if porridge.temperature > 100} 23 |too hot!
24 | {:else if 80 > porridge.temperature} 25 |too cold!
26 | {:else} 27 |just right!
28 | {/if} 29 | ``` 30 | 31 | -------------------------------------------------------------------------------- /chapter1/style.md: -------------------------------------------------------------------------------- 1 | ### style 2 | 3 | ` 12 | ``` 13 | 可以通过使用`:global(...)`修饰符将样式作用域全局。 14 | ```html 15 | 28 | ``` -------------------------------------------------------------------------------- /chapter1/module.md: -------------------------------------------------------------------------------- 1 | ### <script content="module"> 2 | 3 | 具有`context =“module”`属性的` 16 | 17 | 21 | ``` -------------------------------------------------------------------------------- /chapter2/Element-directives/in_out.md: -------------------------------------------------------------------------------- 1 | ### in:*fn*/out:*fn* 2 | ``` 3 | in:fn 4 | ``` 5 | ``` 6 | in:fn={params} 7 | ``` 8 | ``` 9 | in:fn|local 10 | ``` 11 | ``` 12 | in:fn|local={params} 13 | ``` 14 | ``` 15 | out:fn 16 | ``` 17 | ``` 18 | out:fn={params} 19 | ``` 20 | ``` 21 | out:fn|local 22 | ``` 23 | ``` 24 | out:fn|local={params} 25 | ``` 26 | 和`transition`类似，但是只适用于元素和进入（`in:`）和元素的离开（`out:`）。 27 | 28 | ```js 29 | {#if visible} 30 |filp
6 | 7 | ``` 8 | animate:flip={params} 9 | ``` 10 | `flip` 函数计算元素的开始和结束位置，并通过转换`x`、`y`坐标对他们设置动画。`flip` 主张的是[First，Last，Invert，Play](https://aerotwist.com/blog/flip-your-animations/)。 11 | 12 | `flip` 接受下面这些参数： 13 | - `delay` (`number`，默认 0) - 开始前的毫秒数 14 | - `duration` (`number`|`function`, 默认 `d => Math.sqrt(d) * 120`) - 参见下文 15 | - `easing` (`function`, `cubicOut`) - 缓动函数 16 | `duration`可以通过下面任一形式定义： 17 | - 一个`number`，以毫秒为单位 18 | - 一个函数，`distance: number => duration: number`，接受`distance`的元素将以像素为单位进行移动，并以毫秒为单位返回持续的时间。支持指定相对于每个元素移动的持续时间。 19 | 20 | ```html 21 | 27 | 28 | {#each list as n (n)} 29 |waiting for the promise to resolve...
19 | {:then value} 20 | 21 |The value is {value}
22 | {:catch error} 23 | 24 |Something went wrong: {error.message}
25 | {/await} 26 | ``` 27 | 28 | 如果`Promise`状态变为`reject`，或者发生错误时，你不需要渲染任何东西，则`catch` 块可以被忽略。 29 | 30 | ```html 31 | {#await promise} 32 | 33 |waiting for the promise to resolve...
34 | {:then value} 35 | 36 |The value is {value}
37 | {/await} 38 | ``` 39 | 如果你不关心`pending`状态，也可以省略初始化的状态。 40 | 41 | ```html 42 | {#await promise then value} 43 |The value is {value}
44 | {/await} 45 | ``` 46 | 47 | -------------------------------------------------------------------------------- /chapter2/Attributes.md: -------------------------------------------------------------------------------- 1 | ### Attributes 2 | 3 | 默认情况下，模板的属性，与其对应的 HTML 属性完全相同。 4 | 5 | ```html 6 |{todo.text}
55 | {:else} 56 |No tasks today!
57 | {/each} 58 | ``` 59 | 60 | -------------------------------------------------------------------------------- /chapter2/Dom event.md: -------------------------------------------------------------------------------- 1 | ### DOM events 2 | 3 | ```html 4 | on:eventname={handler} 5 | ``` 6 | 7 | ```html 8 | on:eventname|modifiers={handler} 9 | ``` 10 | 11 | 你可以使用`on:`的指令来监听 DOM 事件： 12 | 13 | ```html 14 | 21 | 22 | 25 | ``` 26 | 内联方式声明的处理函数，并不会影响性能。与其他属性一样，为了可以语法高亮显示，指令的值可以用引号包裹。 27 | ```html 28 | 31 | ``` 32 | 33 | 使用 | 字符来向DOM事件添加修饰符。 34 | 35 | 可以使用以下修饰符： 36 | 37 | - `preventDefault`： 在 handeler 执行前，调用 `event.preventDefault()` 38 | - `stopPropagation`: 调用`event.stopPropagation()`，阻止事件冒泡 39 | - `passive`： 提高触摸/滚动事件的滚动性能（ Svelte 会在支持地方默认使用它） 40 | - `capture`：在捕获阶段而不是冒泡阶段，触发事件处理函数 41 | - `once`: 事件处理函数被执一次后会被移除 42 | 43 | 修饰符可以使用 `|` 链接起来：`on:click|once|capture={...}` 44 | 45 | ```html 46 | 50 | ``` 51 | 52 | 如果 `on:` 指令没有值，则组件会转发这个事件，意味着组件的使用者，可以监听这个事件。 53 | 54 | ```html 55 | 58 | ``` 59 | 60 | 对于同样的事件，可以有多个事件监听者。 61 | 62 | ```html 63 | 73 | 74 | 75 | ``` -------------------------------------------------------------------------------- /chapter2/Slots.md: -------------------------------------------------------------------------------- 1 | ### Slots 2 | ```html 3 |this is some child content
19 |Copyright (c) 2019 Svelte Industries
36 |Some content between header and footer
42 |Copyright (c) 2019 Svelte Industries
73 |Animation参数
41 | 和 `Actions` 还有 `transitions` 一样，`Animation` 也有参数。 42 | 43 | ```html 44 | {#each list as item, index (item)} 45 |自定义Animation函数
51 | 52 | 53 | ```html 54 | 73 | 74 | {#each list as item, index (item)} 75 |