Scribd
Upload
123 views

Svelte Practice

The document discusses various concepts in Svelte including: 1. Adding dynamic data and styling components with markup. 2. Basic event handling, reactive declarations, and limitations with manually updating reactive values. 3. Using props to pass data between components, with default values and spread operators. 4. Conditionals like if/else statements and loops like for each. 5. Event handling with DOM events, inline handlers, modifiers and dispatching events. 6. Two-way binding of different input elements like text, checkboxes, selects and textareas. 7. Component lifecycle hooks like onMount and onDestroy.

Uploaded by

kirankumar_reg
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
123 views

Svelte Practice

The document discusses various concepts in Svelte including: 1. Adding dynamic data and styling components with markup. 2. Basic event handling, reactive declarations, and limitations with manually updating reactive values. 3. Using props to pass data between components, with default values and spread operators. 4. Conditionals like if/else statements and loops like for each. 5. Event handling with DOM events, inline handlers, modifiers and dispatching events. 6. Two-way binding of different input elements like text, checkboxes, selects and textareas. 7. Component lifecycle hooks like onMount and onDestroy.

Uploaded by

kirankumar_reg
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

1.

Adding data
2. Adding dynamic data
3. styling using markup
4. Import component and include inside another component.[Nesting components]
5. Sanitising html i.e. special symbol elimination.

1. Basic Event handling


2. Reactive declaration
3. Reactive statement
4. we need to assign variables manually we cannot do push pop etc

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

3. props - https://www.youtube.com/watch?v=zujl4wrRnFA

1. declaring props
Nested.svelte
<script>
export let answer;
export let val;
</script>

<p>The answer is {answer} val is {val}</p>

App.svelte
<script>
import Nested from './Nested.svelte';
</script>

<Nested answer={42} val={10}/>

2. props with default values.

3. spread operator

<script>
import Info from './Info.svelte';

const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev'
};
</script>

<Info name={pkg.name} version={pkg.version} speed={pkg.speed}


website={pkg.website}/>

<script>
export let name;
export let version;
export let speed;
export let website;
</script>

<p>
The <code>{name}</code> package is {speed} fast.
Download version {version} from <a
href="https://www.npmjs.com/package/{name}">npm</a>
and <a href={website}>learn more here</a>
</p>

4. conditional

1. if
2. if else
3. if else ladder
4. for loop
5. keyed each unique key
6. await block

5. Events
1. Dom Event
2. inline event handler
<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
The mouse position is {m.x} x {m.y}
</div>
3. Event modifiers
4. Event dispatcher
https://www.youtube.com/watch?v=yCkYm4zze8I

5. Event forwarding
https://www.youtube.com/watch?
v=SaMils0yx7s&list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO&index=12

6.
1. Bind input element
2. Bind numeric type
3. Bind checkbox
4. Group input [video]
5. TextArea input
6. Select Bind [video]
7. Multiple select
8. Contenteditable bind
9. media elements
10. Dimensions
11.

7. Life cycle
1. onMount
2. onDestroy
3.

You might also like