mirror of
https://github.com/jackyzha0/quartz.git
synced 2026-03-25 07:25:42 -05:00
d7bf0695de
* PUSH NOTE : Mermaid Gantt.md * PUSH NOTE : Bookmark Collections.md * PUSH NOTE : Dominican Republic.md * PUSH NOTE : Books Collection.md * PUSH NOTE : Meta.md * PUSH NOTE : Inspirations.md * PUSH NOTE : index.md * PUSH NOTE : Serif.md * PUSH NOTE : Move Your Body.md * PUSH NOTE : Consistency.md * PUSH NOTE : Reverse Outlines.md * PUSH NOTE : Sans-serif.md * PUSH NOTE : Micropolitan Statistical Area.md * PUSH NOTE : Chords.md * PUSH NOTE : Atomic Notes.md * PUSH NOTE : Zola.md * PUSH NOTE : Svelte.md * PUSH NOTE : Rhizomatic Learning.md * PUSH NOTE : Rhombic Dodecahedron.md * PUSH NOTE : Past Titles and Roles.md * PUSH NOTE : NeoVim.md * PUSH NOTE : Markdown.md * PUSH NOTE : JavaScript.md * PUSH NOTE : CSS.md * PUSH NOTE : Bulma.md * PUSH NOTE : Quotes Collection.md * PUSH NOTE : Words I Like.md * PUSH NOTE : Free Facts.md
46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
---
|
||
title: Svelte
|
||
compartir: true
|
||
updated: 2023-12-15
|
||
---
|
||
|
||
## Introduction
|
||
|
||
[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 in the `<style>` block.
|