mirror of
https://github.com/jackyzha0/quartz.git
synced 2026-03-24 23:15:46 -05:00
43 lines
1.2 KiB
Markdown
43 lines
1.2 KiB
Markdown
---
|
||
title: Svelte
|
||
compartir: true
|
||
---
|
||
|
||
[Svelte](https://svelte.dev/) is a modern [[JavaScript#JavaScript Frameworks|JavaScript Framework]] for building web applications. It compiles components into efficient, framework-free [[JavaScript|JavaScript]] code, resulting in fast and lightweight applications. With its reactive approach and declarative syntax, Svelte simplifies development and delivers impressive performance.
|
||
|
||
## Example
|
||
|
||
```javascript
|
||
<script>
|
||
let name = 'Svelte';
|
||
|
||
function handleClick() {
|
||
alert(`Hello, ${name}!`);
|
||
}
|
||
</script>
|
||
|
||
<main>
|
||
<h1>Welcome to Svelte</h1>
|
||
<p>Click the button to greet:</p>
|
||
<button on:click={handleClick}>Greet</button>
|
||
</main>
|
||
|
||
<style>
|
||
main {
|
||
text-align: center;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
button {
|
||
padding: 10px 20px;
|
||
background-color: #007bff;
|
||
color: #ffffff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
In this example, we have a Svelte component that displays a heading, paragraph, and a button. When the button is clicked, the `handleClick` function is called, which displays an alert with the name variable interpolated. The component also includes some basic styling using [[CSS|CSS]] in the `<style>` block.
|