Svelte學習記錄1

svelte是建立在html css 和javascript 上面，但是語法還是有一點差別，甚至是可以再有html的檔案中（Svelte檔）進行迴圈的應用，這一篇會是Svelte自己內部的寫法

後端：

如果要用後端接值並去運算的話，在svelte檔裡的html前面增加<script></scripy>並在裡面定義要的值let count=0;

<script>
 let count = 0;
</script>

之後的運算也都會寫在script裡，包含function，或是進行運算

<script>
 let count = 0;
 $: doubled = count * 2;

 function increment() {
  count += 1;
 }
</script>

然後$符號，$: marks a statement as reactive

>Updating arrays and objects，讓1+2+3+4+5＝？可以繼續加下去

Svelte的反應是 triggered by assignments
使用 array 方法像是 push 和 splice 不會自行更新.

方法一

<script>
 let numbers = [1, 2, 3, 4];

 function addNumber() {
  numbers.push(numbers.length + 1);
  numbers=numbers;
 }

 $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
 Add a number
</button>

方法二

<script>
 let numbers = [1, 2, 3, 4];

 function addNumber() {
  numbers [numbers.length]= numbers.length+1;
 }

 $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
 Add a number
</button>

numbers [numbers.length]= numbers.length+1;以及[...numbers, numbers.length + 1];是可以互通的。

學習資源：Learn.svelte.dev