svelte基础语法学习

官网文档地址：绑定 / 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>
<divcontenteditable="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) {  类似watchalert(`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><canvasbind: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、过渡事件

<ptransition: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}/>