Svelte project construction
Svelte is a completely new way of building user interfaces. Traditional frameworks such as React and Vue require a lot of work in the browser, but Svelte handles this work in the compilation phase of building the application.
Contrast this with using a virtual DOM diff. Svelte writes code that surgically updates the DOM when the application's state changes.
Article directory
1. Two ways to build Svelte
1) Build using vite method
npm create vite@latest
2) Official website construction:
npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open
可能会遇到的报错的情形:
(1) When npm install
(2) After npm run dev
The above problems are all because the node version is too low, and svelte requires 16+ or above. If you don't want to switch node versions, find the node 14 version supported by Svelte yourself.
2. Usage steps
1. Declare variables
<div>
news 组件
{
name } //使用 { 变量名 }
</div>
<script>
let name = '小米南瓜' // 定义变量
</script>
2.Dynamic attributes
<script>
let src = 'tutorial/image.gif';
let name = 'Rick Astley';
</script>
<img {
src} alt="{name} dances.">
3. Nested components
<script>
import Nested from './Nested.svelte'; // 引入组件
</script>
<Nested /> // 使用组件
<style>
</style>
4. Use html tags in strings
<script>
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{
string}</p>
5. Define event function reactive declaration
<div>
<button on:click={
handleClick}>
{
count}
</button>
</div>
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
6. Reactive declarations
<script>
let count = 0;
$: doubled = count * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click={
handleClick}>
Clicked {
count} {
count === 1 ? 'time' : 'times'}
</button>
<p>{
count} doubled is {
doubled}</p>
It may seem a bit unfamiliar, but don't worry. The above is an (unconventional) JavaScript statement that Svelte will interpret as "rerun this code whenever the reference value changes". Once you get used to it, you can never stop watching it.
Of course, you can write {count * 2} inside an HTML tag without having to use reactive declaration syntax. However, reactive declarations become particularly useful when you need to reference them multiple times, or when the value you need depends on a value calculated by other reactive declarations.
No need to write the following:
<script>
let count = 0;
let doubled = 0;
function handleClick() {
doubled = count * 2;
count += 1;
}
</script>
<button on:click={
handleClick}>
Clicked {
count} {
count === 1 ? 'time' : 'times'}
</button>
<p>{
count} doubled is {
doubled}</p>
7. Reactive statements
Not only are values provided for declaring reactive statements, we can also run reactive statements. For example, when the value of count changes, output it to the log:
$: console.log(`the count is ${
count}`);
You can easily combine a group of statements into a block of code:
$: {
console.log(`the count is ${
count}`);
alert(`I SAID THE COUNT IS ${
count}`);
}
You can even put $: in front of the = if block:
$: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
<script>
let count = 0;
$: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
function handleClick() {
count += 1;
}
</script>
<button on:click={
handleClick}>
Clicked {
count} {
count === 1 ? 'time' : 'times'}
</button>