<script>
let greeting = 'hello'
</sript>

<!-- HTML GOES HERE --> 

<style>
<h1>{greeting}</h1>
</style>

One-way binding

<script>
let var = 'hello';
const handleInput = (e) => {
	var = e.target.value;
}
</script>

<input type="text" on:input={handleInput} />

Two-way binding

<script>
let var = 'hello';
const handleInput = (e) => {
	var = e.target.value;
}
</script>

<input type="text" on:input={handleInput} value={var} />

<script>
let var = 'hello';
const handleInput = (e) => {
	var = e.target.value;
}
</script>

<input type="text" bind:value={beltColour} />

Reactive Values

<script>
let greeting = 'Hello'
let firstName = 'James'
let lastName = 'Rutter'
$: fullName = `${firstName} $(lastName}`
</script>

<h1>{greeting} {fullName}</h1>

Reactive values are computed and watch for changes to their dependencies.

<script>
let greeting = 'Hello'
let firstName = 'James'
let lastName = 'Rutter'
$: fullName = `${firstName} $(lastName}`
$: console.log(fullName) // this will print to the console whenever fullName changes. 
</script>

<h1>{greeting} {fullName}</h1>

Event Forwarding

Event Modifiers

once

preventDefault

self