官网文档地址：绑定 / Each 块绑定 • Svelte 教程 | Svelte 中文网

1、样式

一般情况下父子组件内样式隔离、同级组件间样式隔离

2、页面布局

<style> P{ color: red; } </stye> <script> // 类似data let name = ‘jiang’ let countVal = 0 let src = ‘https://www.baidu.com’ // 类似methods let count = () => { countVal++ } </script> // 直接布局 // 变量使用 <div>{name}</div> <div on:click={count}>{countVal}</div> // 属性名和变量名一样可以简写 <img {src} alt=“img” /> 

3、v-html vs  @html   contenteditable=true  bind:innerHTML

let string = ‘dd <p>dsdsd</p>’
<p>{@html string}</p>

或者
<script>
	let html = '<p>Write some text!</p>';
</script>
<div
	contenteditable="true"
	bind:innerHTML={html}
></div>

4、 methods

<script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}>Clicked {count} {count === 1 ? 'time' : 'times'}</button> 

5、computed  vs  $:

这里的computed是由赋值语句触发的，所以变量需要用赋值语句修改值，则computed变量能监听到变化

# 1 <script> let count = 0; // 定义computed变量 $: doubled = count * 2; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> <p>{count} doubled is {doubled}</p> # 2 当count改变输出log $: console.log(`the count is ${count}`); # 3 你可以轻松地将一组语句组合成一个代码块 $: { console.log(`the count is ${count}`); alert(`I SAID THE COUNT IS ${count}`); } # 4 computed里面监听某个data的数据时候，满足一定条件执行相应的逻辑 <script> let count = 0; $: if (count >= 5) { 类似watch alert(`count is dangerously high!`); count = 4; } function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> 

6、 props 属性  vs  export let answer

子组件 <script> // props属性 export let answer; </script> <p>The answer is {answer}</p> 父组件 <script> import Nested from './Nested.svelte'; </script> <Nested answer={42}/> 

7、v-if  vs  按条件渲染 {#if 为true变量}…{/if}    {:else if 条件} {:else  条件}    {/if}

<script> let user = { loggedIn: false }; function toggle() { user.loggedIn = !user.loggedIn; } </script> {#if user.loggedIn} <button on:click={toggle}> Log out </button> {/if} {#if !user.loggedIn} <button on:click={toggle}> Log in </button> {/if} 或者 {#if user.loggedIn} <button on:click={toggle}> Log out </button> {:else} <button on:click={toggle}> Log in </button> {/if} 多条件渲染 {#if x > 10} <p>{x} is greater than 10</p> {:else if 5 > x} <p>{x} is less than 5</p> {:else} <p>{x} is between 5 and 10</p> {/if} 

8、 v-for  vs {#each cats as cat,index}  {#each cats as {name, id},index}   {/each }

{#each cats as cat, i} <li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}"> {i + 1}: {cat.name} </a></li> {/each} 为each块添加key {#each things as thing (thing.id)} <Thing current={thing.color}/> {/each} 

9、事件修饰符 on:click|preventDefault={handleClick}

<script> function handleClick() { alert('no more alerts') } </script> <button on:click|preventDefault={handleClick}> Click me </button> 

10、$emit  vs createEventDispatcher   子组件给父组件传递消息

子组件 <script> import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); function sayHello() { // 给父组件抛出事件 dispatch('message', { text: 'Hello!' }); } </script> <button on:click={sayHello}> Click to say hello </button> 注意父组件接收到的信息放在event.detail中 父组件 <script> import Inner from './Inner.svelte'; function handleMessage(event) { alert(event.detail.text); } </script> <Inner on:message={handleMessage}/> 事件转发，可以在中间组件用<Inner on:message/>，默认转发所有message事件 

11、表单素

input    bind:value

<script> let name = 'world'; </script> <input bind:value={name}> <h1>Hello {name}!</h1> <p>{a} + {b} = {a + b}</p> 显示：1+2 = 3 

复选框

<input type=checkbox bind:checked={yes}>

绑定更多值 bind:group={flavours}

<script> let scoops = 1; let flavours = ['Mint choc chip']; function join(flavours) { if (flavours.length === 1) return flavours[0]; return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`; } </script> <h2>Size</h2> <label> <input type=radio group={scoops} value={1}> One scoop </label> <label> <input type=radio group={scoops} value={2}> Two scoops </label> <label> <input type=radio group={scoops} value={3}> Three scoops </label> <h2>Flavours</h2> <label> <input type=checkbox group={flavours} value="Cookies and cream"> Cookies and cream </label> <label> <input type=checkbox group={flavours} value="Mint choc chip"> Mint choc chip </label> <label> <input type=checkbox group={flavours} value="Raspberry ripple"> Raspberry ripple </label> {#if flavours.length === 0} <p>Please select at least one flavour</p> {:else if flavours.length > scoops} <p>Can't order more flavours than scoops!</p> {:else} <p> You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} of {join(flavours)} </p> {/if} 

12、ref.  vs  bind:this

获取素或者组件对象

<script> import { onMount } from 'svelte'; let canvas; onMount(() => { // 挂载之后才会获取到素 const ctx = canvas.getContext('2d'); }); </script> <style> canvas { width: 100%; height: 100%; background-color: #666; -webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat; mask: url(svelte-logo-mask.svg) 50% 50% no-repeat; } </style> <canvas bind:this={canvas} width={32} height={32} ></canvas> 

13、过渡动画效果 transition

<script> import { fade } from 'svelte/transition'; let visible = true; </script> <label> <input type="checkbox" bind:checked={visible}> visible </label> {#if visible} <p transition:fade> Fades in and out </p> {/if}

上下渐入渐出： fly

<script> import { fly } from 'svelte/transition'; let visible = true; </script> <label> <input type="checkbox" bind:checked={visible}> visible </label> {#if visible} <p transition:fly="{ 
  { y: 200, duration: 2000 }}"> Flies in and out </p> {/if}

14、过渡事件

<p transition:fly="{ 
  { y: 200, duration: 2000 }}" on:introstart="{() => status = 'intro started'}" on:outrostart="{() => status = 'outro started'}" on:introend="{() => status = 'intro ended'}" on:outroend="{() => status = 'outro ended'}" > Flies in and out </p>

15、组件slots

使用组件不传内容，用默认显示

如果有自定义则显示自定义内容

默认插槽

<slot><p>sdsd</p></slot>

子组件Box.svelte <div class="box"> <slot> <p>dsdsds</p> </slot> </div> 父组件 <script> import Box from './Box.svelte'; </script> // 显示这里定义的内容 <Box> <h2>Hello!</h2> <p>This is a box. It can contain anything.</p> </Box> // 显示slot默认内容 <Box></Box>

具名插槽

<slot name="address"><p>sdsd</p></slot>

// 子组件 <article class="contact-card"> <h2> <slot name="name"> <span class="missing">Unknown name</span> </slot> </h2> <div class="address"> <slot name="address"> <span class="missing">Unknown address</span> </slot> </div> <div class="email"> <slot name="email"> <span class="missing">Unknown email</span> </slot> </div> </article> // 父组件 <ContactCard> <span slot="name"> P. Sherman </span> <span slot="address"> 42 Wallaby Way<br> Sydney </span> </ContactCard> 

16、动态组件

<svelte:component this={selected.component}/>

<script> import RedThing from './RedThing.svelte'; import GreenThing from './GreenThing.svelte'; import BlueThing from './BlueThing.svelte'; const options = [ { color: 'red', component: RedThing }, { color: 'green', component: GreenThing }, { color: 'blue', component: BlueThing }, ]; let selected = options[0]; </script> <select bind:value={selected}> {#each options as option} <option value={option}>{option.color}</option> {/each} </select> <svelte:component this={selected.component}/>