Svelte 의 inline event 는 모두 소문자로 작성해준다


on:click

on:input

binding

value를 binding 하는 방법은

bind:value={바인딩하고자하는 변수}

style 도 동적으로 바인딩이가능하다

<main>
<h1>Hello {name}!</h1>
<p style='color: {color}'>{color} jean!</p>
<button on:click={handleClick}>update jean color</button>
<input type='text' bind:value={color} />
</main>

Reactive value

  let firstname = "taemin";
  let lastname = "kong";

  $: fullname = `${firstname} ${lastname}`;

어떤 변수가 다른 변수와 합쳐서 사용해야하는것이라면, 변수의 선언앞에 $: 를 붙여주고, template 문자열을 사용하면된다.

값뿐만 아니라 statement도 지정할수있다

  $: console.log(color);

color의 값이 변경될때 마다 구문이 실행된다

each else

  {#each people as person, index}
    <h2>--{person.name} {index}</h2>
    <h2>{person.age}</h2>
    <hr />
  {/each}

if-else-else if

  {#if age < 20}
    <h2>학생입니다</h2>
  {:else if age > 20}
    <h2>성인입니다</h2>
  {/if}

시작은 {#if} , 중간은 {:else}, 끝은 {/if}