Svelte Template Syntax (기본 문법)

Tags

소문자의 태그(<div>)의 경우 HTML 엘리먼트로 인식한다.

대문자로 시작하는 태그(capitalised tag)의 경우는 컴포넌트 인식

 

<script>
    import Widget from './Widget.svelte';
</script>

<div>
    <Widget/>
</div>

 

Attributes and props 

기본적으로 html attributes 는 html 속성으로 동일하게 작동

javascript 표현식도 가능 

attribute name과 value name이 같을 경우 단순이 '{name}' 으로 선언도 가능

 

그외 아래와 같은 Spread attributes 도 사용 가능 

 

'$$props' references all props that are passed to a component

'$$restProps' contains only the props which are not declared

<div class="foo">
    <button disabled>can't touch this</button>
</div>

<input type=checkbox>

<a href="page/{p}">page {p}</a>
<button disabled={!clickable}>...</button>

<!-- These are equivalent -->
<button disabled={disabled}>...</button>
<button {disabled}>...</button>

<Widget {...things}/>
<Widget {...$$props}/>
<input {...$$restProps}>

 

Text expressions

문자열에도 자바스크립트 표현식 가능

<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>

 

Comments

html 코멘트를 콤포넌트 안에서 사용 가능

<!-- this is a comment! -->
<h1>Hello world</h1>

<!-- svelte-ignore a11y-autofocus -->
<input bind:value={name} autofocus>

---

references

1. https://svelte.dev

2.스벨트로 시작하는 웹 프런트엔드 책