mirror of
https://github.com/jackyzha0/quartz.git
synced 2026-03-24 23:15:46 -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
1.2 KiB
1.2 KiB
| title | compartir | updated |
|---|---|---|
| Svelte | true | 2023-12-15 |
Introduction
Svelte is a modern ./JavaScript#JavaScript Frameworks for building web applications. It compiles components into efficient, framework-free ./JavaScript code, resulting in fast and lightweight applications. With its reactive approach and declarative syntax, Svelte simplifies development and delivers impressive performance.
Example
<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.