입력 데이터 바인딩

안녕하세요 친구 여러분, 이것은 저의 세 번째 블로그 게시물입니다. 사실 이 도전을 계속 유지하는 것이 매우 어렵습니다. 가장 큰 문제는 제 모국어가 이탈리아어이지만 매일 스페인어를 사용한다는 것입니다!

하지만 저는 여기에 있고 해야 합니다. 언젠가 곧 웹 개발자가 되기 위한 여정에 도움이 됩니다.

이것은 매우 짧은 게시물입니다. 다음 주에 데이터 바인딩에 대한 또 다른 게시물을 게시하여 "수업"을 완료하겠습니다.

공식 문서에 따르면 Svelte는 "사용자 인터페이스를 구축하기 위한 근본적이고 새로운 접근 방식"입니다.

실제로 Svelte는 React, Vue 등과 같은 JavaScript 프레임워크와 매우 유사합니다.

오늘은 입력 데이터 바인딩에 대해 쓸 것입니다.

입력 바인딩은 본질적으로 구성 요소 내부의 변수를 입력 필드와 동기화할 수 있는 방법일 뿐입니다.

양식을 디자인하거나 데이터를 입력할 때 매우 편리합니다.

바인드:속성

bind:value를 사용하여 적용할 수 있는 가장 일반적인 바인딩 형식부터 시작하겠습니다. 구성 요소 상태에서 변수를 가져와 양식 필드에 바인딩합니다.

 <script>

 Let name = “Alessandro”

 </script>

 <p> Your name is: {name}

 <input bind:value = {name}

이제 이름이 변경되면 입력 필드가 값을 업데이트합니다. 그리고 그 반대도 마찬가지입니다. 사용자가 양식을 업데이트하면 이름 변수 값이 변경됩니다.

이름 변수를 입력 필드에 성공적으로 바인딩했습니다. 사용자가 입력 필드를 변경하면 구성 요소 내의 데이터가 업데이트됩니다. 이것이 가장 기본적인 예입니다.

bind:value는 모든 종류의 입력 필드(type="number", type="email"등)에서 작동하지만 textarea 및 select와 같은 다른 종류의 필드에서도 작동합니다.

예를 들어 보겠습니다.

<script>
let coffeeOrigins = ["Ethiopia","Colombia","Sumatra","India","Nicaragua"];
let selected;
</script>

<main>

<p> Your have choose: {selected || 'nothing'}</p>

{#each coffeeOrigins as origin}

<label>
<input type="radio" bind:group={selected} value={origin}/>
{origin}
</label>
{/each}

</main>


Thank you for reading, see you next sunday!