Hello World!
<!-- app.svelte -->
<script>
let name = "world";
</script>
<p>hello {name}!</p>
<style>
p {
background-color: #ccc;
}
</style>
组件引用
<!-- app.svelte -->
<script>
import Home from "./home.svelte";
let name = "world";
</script>
<p>hello {world}!</p>
<Home />
<style>
p {
background-color: #ccc;
}
</style>
<!-- home.svelte -->
<p>home</p>
数据通过赋值语句进行更新
<!-- app.svelte -->
<script>
let count = 0;
function add() {
count = count + 1; // count++
}
</script>
<p>Count: {count}</p>
<button on:click="{add}">add</button>
反应式声明（类似 Vue 的计算属性）
<!-- app.svelte -->
<script>
let count = [1, 2];
function add() {
count = [...count, count.length + 1];
}
$: sum = count.reduce((p, c) => p + c, 0);
</script>
<p>Count Sum: {count.join(' + ')} = {sum}</p>
<button on:click="{add}">add</button>
Input 数据
<!-- app.svelte -->
<script>
import Home from "./home.svelte";
let name = "world";
let data = "input data";
</script>
<p>hello {name}!</p>
<Home data="{data}" />
<!-- <Home {data} /> -->
<!-- home.svelte -->
<script>
export let data;
</script>
<p>home</p>
<span>{data}</span>
Output 数据
<!-- app.svelte -->
<script>
import Home from "./home.svelte";
let name = "world";
let data = "input data";
function handleEmit(e) {
console.log(e); // e.detail = 'output data'
}
</script>
<p>hello {name}!</p>
<Home {data} on:message="{handleEmit}" />
<!-- home.svelte -->
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
export let data;
function emitData() {
dispatch("message", "output data");
}
</script>
<p>home</p>
<span>{data}</span>
<button on:click="{emitData}">Emit data to app</button>
逻辑块
if else
<!-- app.svelte -->
<script>
let score = 90;
</script>
{#if score >= 90}
<p>优秀</p>
{:else if score > 80}
<p>良好</p>
{:else if score > 60}
<p>及格</p>
{:else}
<p>不及格</p>
{/if}
<input type="number" bind:value="{score}" />
each
<!-- app.svelte -->
<script>
let items = ["Angular", "React", "Svelte"];
</script>
{#each items as item, index (item)}
<p>{index + 1}: {item}</p>
{/each}
小括号里面是唯一的 key
事件修饰符
<div on:click={() => console.log('outer')}>
outer
<div on:click|stopPropagation={() => console.log('inner')}>
inner
</div>
</div>
不加 stopPropagation 修饰符的话，点击 inner 也会出发 outer 事件
事件转发
将 Home 组件的 click 事件转发到了 app 中
<!-- app.svelte -->
<script>
import Home from "./home.svelte";
function handleClick(e) {
console.log(e);
}
</script>
<Home on:click="{handleClick}" />
<!-- home.svelte -->
<div on:click>home</div>
绑定数据
input -- text number range
<!-- app.svelte -->
<script>
let value = "name";
let num1 = 0;
let num2 = 0;
</script>
<p>{value}</p>
<input type="text" bind:value />
<br />
<input type="number" bind:value="{num1}" min="0" max="10" />
<input type="range" bind:value="{num1}" min="0" max="10" />
<br />
<input type="number" bind:value="{num2}" min="0" max="10" />
<input type="range" bind:value="{num2}" min="0" max="10" />
<p>{num1} + {num2} = {num1 + num2}</p>
checkbox
<!-- app.svelte -->
<script>
let checked = true;
</script>
<input type="checkbox" bind:checked />
<label>{checked}</label>
input group
<!-- app.svelte -->
<script>
let selectNum = 1;
let selectList = [];
let allList = ["Angular", "React", "Svelte"];
</script>
<label>
<input type="radio" bind:group="{selectNum}" value="{1}" />
one
</label>
<label>
<input type="radio" bind:group="{selectNum}" value="{2}" />
two
</label>
<p>num is: {selectNum}</p>
{#each allList as item (item)}
<label>
<input type="checkbox" bind:group="{selectList}" value="{item}" />
{item}
</label>
{/each}
<p>
selectList is: {#each selectList as item (item)}
<span> {item} </span>
{/each}
</p>
组件 Dom 对象
<!-- app.svelte -->
<script>
let label;
function addLabel() {
label.innerText += 1;
}
</script>
<label bind:this="{label}">label</label>
<br />
<button on:click="{addLabel}">addLabel</button>
自定义组件绑定
<!-- app.svelte -->
<script>
import Home from "./home.svelte";
let value = "";
</script>
<p>value is: {value}</p>
<Home bind:value />
<!-- home.svelte -->
<script>
export let value = '';
</script>
<div>
{#each Array(10) as _, row}
<span on:click={() => (value += row)}>{row}</span>
{/each}
<span on:click={() => (value = '')}>clear</span>
<span>submit</span>
</div>
<style>
div {
display: flex;
flex-wrap: wrap;
width: 250px;
}
span {
display: flex;
align-items: center;
justify-content: center;
background-color: #ccc;
border-radius: 4px;
cursor: pointer;
width: 60px;
height: 60px;
margin: 4px;
transition: all 0.25s;
}
span:active {
transform: scale(.8);
}
</style>
