정보실

웹학교

정보실

javascript Svelte에서 반응식으로 작업하는 방법

본문

Svelte에서는 구성 요소 상태의 다른 부분에 대한 변경 사항을 청취하고 다른 변수를 업데이트 할 수 있습니다.


https://flaviocopes.com/svelte-reactive-statements/ 


예를 들어 count 변수가 있는 경우 :


<script>
let count = 0
</script>

버튼을 클릭하여 업데이트 하십시오.

<script>
let count = 0

const incrementCount = () => {
	count = count + 1
}
</script>

{count} <button on:click={incrementCount}>+1</button>

특수 구문 $:을 사용하여 카운트에서 변경 사항을 수신 할 수 있습니다.이 구문은 참조 된 변수가 변경 될 때 Svelte가 다시 실행할 새 블록을 정의합니다.


예를 들면 다음과 같습니다.


<script>
let count = 0

const incrementCount = () => {
	count = count + 1
}

$: console.log(`${count}`)
</script>

{count} <button on:click={incrementCount}>+1</button>


나는 블록을 사용했습니다 :

$: console.log(`${count}`)

둘 이상을 작성할 수 있습니다.


<script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>

그리고 하나 이상의 문장을 그룹화 하기 위해 블록을 추가 할 수도 있습니다 :


<script>
$: {
  console.log(`the count is ${count}`)
  console.log(`double the count is ${count * 2}`)
}
</script>


거기에 console.log() 호출을 사용했지만 다른 변수도 업데이트 할 수 있습니다.


<script>
let count = 0
let double = 0

$: {
  console.log(`the count is ${count}`)
  double = count * 2
  console.log(`double the count is ${double}`)
}
</script>




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 28회 ]  작성일19-10-16 11:03

웹학교