Introduction

변수 사용하기

Vue의 mustache처럼 script 태그 안에서 선언된 변수들을 포함한 expression들을 {}에 넣을 수 있음. 간단한 표현식만 가능한듯 하다.

// App.svelte

<script>
	let name = 'world'
	let birthYear = 1996
</script>

<h1>Hello {name.toUpperCase()}!</h1>
<h2>
	Your age is {new Date().getFullYear() - birthYear}
</h2>

HTML 태그 안의 Attribute로 사용하기

<script>
	let name = 'Dokyung Kim'
	let src = '/tutorial/image.gif';
</script>

<img src={src} alt="{name} dances" />
<img {src} alt="{name} dances" />

밑의 img 태그와 같이 속성 이름과 변수명이 같을 때 속성 선언 구문을 생략할 수 있는 특성을 shorthand property라 한다.

스타일 사용

<p>This is a paragraph.</p>

<style>
	p {
		color: violet;
		font-size: 2rem;
		font-family: 'Comic Sans MS', cursive;
	}
</style>

다음과 같이 style 태그 안에 CSS 구문들을 넣어서 스타일을 만들어 줄 수 있다. Vue와 동일하게 scoped 스타일 구문을 사용한다.

컴포넌트 사용

컴포넌트의 이름은 무조건 대문자로 시작하도록 한다. 그래야 HTML 태그와 컴포넌트를 구분지어줄 수 있다.

<p>This is a paragraph.</p>
<Nested />

<script>
import Nested from './Nested.svelte'
</script>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

text 안의 HTML 태그 적용

마치 Vue의 v-html과 똑같은 역할을 해 준다. 마찬가지로 sanitize는 사용자가 직접 적용해야 하는 부분으로, XSS 공격을 받을 수 있으니 사용자 입력이 들어오는 부분에는 사용하지 말 것(아니면 sanitize 후 사용할 것).