- 1 - Introduction
- 2 - Setting up a Svelte App
npm install -g degit
degit sveltejs/template myproject
cd myproject
npm run dev
- 3 - Svelte Basics
- variables/data/logic in the
<script></script>
section {var}
calls the vars/logic
- 4 - User Input & Data Binding
- one way data binding
<input type="text" on:input={handleInput}
<input type="text" value={beltColour} />
- two way data binding
<input type="text" bind:value={beltColour} />
- 5 - Reactive Values
- reactive value
-
$: fullName =
${firstName} ${lastName};
-
- reactive statement
- single line
$: console.log(beltColour);
- code block
-
$: { console.log(beltColour); console.log(fullName); // reacive name!! }
-
- single line
- 6 - Loops
-
{#each myArray as myObject (myObject.id)} {myObject.myProperty} {:else} <-- do something --> {/each}
-
- 7 - Inline Event Handlers
<button on:click={() => handleClick(person.id)}> delete </button>
- 8 - Conditionals
-
{#if condition} // do stuff {:else if condition} // do other stuff {:else} // fallback {/if}
-
- 9 - Components
- create
NewComponent.svelte
import NewComponent from "./NewComponent.svelte";
<NewComponent />
- create
- 10 - CSS & Conditional Styles
- global css in
/public/global.css
- component css in myComponent.svelte ->
<style> </style>
- conditional css
class:myCondition={bool}
- global css in
- 11 - Props
- prop variables in component
<myComponent propValue="value"/>
- in Components script
export let propValue;
- usage:
{propValue}
- prop variables in component
- 12 - Event Forwarding
- 13 - Event Modifiers
self
only trigger handler ifevent.target
is the element itself
once
remove the handler after the first time it runs
- https://svelte.dev/docs#template-syntax-element-directives-on-eventname
- 14 - Slots
- Unnamed Slots
- in App.svelte
<myComponent> <!-- content here --> </myComponent>
- in myComponent.svelte
- content is rendered at
<slot/>
- content is rendered at
- in App.svelte
- Named Slots
- in App.svelte
<div slot="myNamedSlot"> <!-- content here --> </div>
- content is rendered at
<div name="myNamedSlot"/>
- in App.svelte
- Unnamed Slots
- 15 - Forms (part 1)
- bind variables to input elements
<input type="text" bind:value={myVar} />
- if
type
isnumber
the variable will be a number
- if
preventDefault
prevents the form reloading the page<form on:submit|preventDefault={myFunction}>
- bind variables to input elements
- 16 - Forms (part 2)
bind:group={myArray}
add value tomyArray[]
<select bind:value={var}>
bind value of<option>
tovar
- 17 - Dispatching Custom Events
- in
myComponent
import { createEventDispatcher } from "svelte";
<form on:submit|preventDefault={handleSubmit}>
- in
handleSumbit
=>dispatch("customEventName", myObject)
- in
App
<myComponent on:customEventName={myFunction}/>
const myFunction = (e) => { // do stuff };
- in
- 18 - Starting the Polls Project
- 19 - Header & Footer Components
- 20 - Reusable Tabs Component
- 21 - Poll Form Component
- 22 - Custom Button Component
- 23 - Custom Form Validation
- 24 - Adding New Polls
- 25 - Poll Details Component
- 26 - Card Component
- 27 - Casting Votes
- 28 - Vote Bars
- 29 - Introduction to Stores
- create store
import { writable } from "svelte/store";
- subscribe to store
import Pollstore from "./Pollstore.js";
PollStore.subscribe(myFunction);
- create store
- 30 - Lifecycle Hooks
- A.
import { onMount, onDestroy } from "svelte";
onMount(() => {});
/onDestroy(() => {});
- B. use
$PollStore
- A.
- 31 - Updating Store Data
- 32 - Deleting Polls
- note: Button component needs
on:click
- note: Button component needs
- 34 - Transition Basics
- 34 - Tweens & Animations
- 35 - Wrap Up