svelte 정리

스벨트 시작

1. node js 설치

2. 명령어 입력

npx degit sveltejs/template 앱이름
cd 앱이름
npm install
npm run dev

 

 

svelte 파일 전체적인 구조

<script>
	// 자바스크립트 코드
    name = '김나나';
</script>

<!--html 코드-->
<h1>나는 {name}</h1>
<button on:click={()=>{name = '김모모'}}></button>

자바스크립트로 변수를 선언하고

html 부분에서 그 변수를 사용

 

 

문법

:$

재랜더링하는 키워드. 재랜더링할 변수 맨 앞에다 작성

 

{#each 배열 as 변수}

    <p>{변수}</p>

{/each}

반복문

 

{if 조건}

    <p>hi</p>

{/if}

조건문

 

 

전역변수 만드는 방법

aa.js

export let my_num = writable(변수값);

 

bb.svelte

<script>
	import {my_num} from './aa.js';
</script>

<h1>{$my_num}</h1>