본문 바로가기

스벨트18

[SVELTE]Bindings- Text inputs, Numeric inputs, Checkbox inputs, Group inputs, Textarea inputs, Select multiple, Contenteditable bindings, Each block bindings, Media elements, Dimensions, This, Component bindings, Binding to component instance Bindings 1. Text inputsbind:value 지시어를 사용할 수 있다. name 값을 변경하면 입력 값이 업데이트될 뿐만 아니라 입력 값이 변경되면 name도 업데이트된다.Hello {name}! 2. Numberic inputs {a} + {b} = {a + b} 3. Checkbos inputs Yes! Send me regular email spam{#if yes} Thank you. We will bombard your inbox and sell your personal details.{:else} You must opt-in to continue. If you're not paying, you're the product.{/if}.. 2023. 3. 8.
[SVELTE] Events - DOM events, Inline handlers, Event modifiers, Component events, Event forwarding, DOM event forwarding Eventson 지시어를 사용해 요소의 모든 이벤트를 수신할 수 있다.  The mouse position is {m.x} x {m.y} 또한 이벤트 핸들러를 인라인으로 선언할 수도 있다.  m = { x: e.clientX, y: e.clientY }}"> The mouse position is {m.x} x {m.y} 돔 이벤트 핸들러는 동작을 변경하는 수정자를 가질 수 있다. 예를들어 once 수정자가 있는 핸들러는 한번만 실행된다.  Click me 컴포넌트는 이벤트를 전달할 수 있다. 그렇게 하려면 이벤트 디스패쳐(dispatcher)를 만들어야 한다.cf) 이벤트 디스패쳐 : 이벤트 디스패처는 하나의 액터가 이벤트를 디스패치하고 해당 이벤트를 리스닝하는 다른 액터가 알림을 받.. 2023. 3. 8.
[SVELTE] Logic - If blocks, Else blocks, Else-if blocks, Each blocks, Keyed each blocks, Await blocks LogicHTML에는 조건문 및 루프와 같은 논리를 표현하는 방법이 없다. 마크업을 조건부로 랜더링 하기 위해 IF블럭으로 감싼다.{#if user.loggedIn} Log out {/if}{#if !user.loggedIn} Log in {/if} 상호 배타적인 두 조건이 있을 경우 else블록을 사용할 수 있다. {#if user.loggedIn} Log out {:else} Log in {/if} {user.loggedIn ? `Log out` : `Log In`} 여러 조건일 경우 else if와 함께 연결할 수 있다.  {#if x > 10} {x} is greater than 10{:els.. 2023. 3. 8.
[SVELTE]Props-Declaring props, Default values, Spread props Props지금까지는 주어진 컴포넌트 내에서만 접근 가능했다. 실제 애플리케이션에서는 한 컴포넌트에서 하위 컴포넌트로 데이터를 전달해야한다. 그렇게 하려면 일반적으로 props로 축약되는 속성을 선언해야한다. 스벨트는 다음과 같이 export키워드로 이를 수행한다. The answer is {answer} 2023. 3. 3.

티스토리툴바