Introduction to the

  1. Like React and Vue, Svelte aims to make it easy to build flexible and interactive user interfaces

    1.1 Svelte converts your code to better JavaScript at build time rather than interpreting and executing your code at run time.

    1.2 There is no performance cost of the framework itself, and there is no additional performance loss for the first load

  2. Svelte is incremental

    2.1 Svelte is used to write the entire application, and can also be used to reconstruct the existing code step by step. You can also output just a single standalone component (without forcing it to ship with the framework itself) and use it in any framework

    2.2 Each component in Svelte is a normal JS class, which can be introduced in React,Vue, or anywhere else, and then used by creating instances with new

  3. Svelte, like React and Vue, is committed to building front-end Web applications. In order to achieve optimal performance and minimize code output, Svelte uses the method of directly generating the final code during compilation, rather than introducing the framework for corresponding operations during runtime. Therefore, in this aspect, Svelte is more like a compiler.

Basic grammar

component

  1. A Svelte application consists of one or more applicationscomponent(Components
  2. One for each component.svelteFiles, that is, every one of them.svleteA file is an SFC(Single-file Components)
  3. Each component contains its own HTML, CSS, and JavaScript code.
  4. Each component has its own component scope

index.svelte

<! -- This is the simplest component -->
<h1>Hello world!</h1>
Copy the code

Dynamically binding data

<script>
    let name = 'world'; // This variable is a local variable inside the component
</script> 

<! -- svelte uses curly brace syntax to bind variables -->
<h1>Hello {name}!</h1>

<! {} support all valid js expressions -->
<h1>Hello {name.toUpperCase()}!</h1>
Copy the code

Dynamically bound properties

<script>
  let src = 'tutorial/image.gif';
  let action = 'dance'
</script>

<! -- {} syntax can also be used to bind attribute values -->
<! Svelte requires us to make our tags as perfect as possible. For example, the IMG tag must have Alt (warning if not added) in order to serve screen reader users and users with poor hardware or network Accessibility (a11Y)
<img src={src} alt="A man dances">

<! Svelte can abbreviate an attribute if its name is the same as its value.
<img {src} alt="A man dances">

<! Binding attributes in {} can be used directly in strings and will be automatically replaced -->
<img src={src} alt="A man {action}">
Copy the code

style

<style>
  /* Svelte adds a svelte-xxx (XXX is the only hash value) to each component, so properties set by h2 are actually rendered as h2.svelte-xxxx
  h2 {
    color: blue;
  }
</style>

<h2>Hello World</h2>

<! HTML: <h2 class="svelte-136z7jr">Hello World</h2> CSS: Svelte-136z7jr {color: blue; /* svelte-136z7jr {color: blue; } -- >
Copy the code

Use of child components

Child components

<! -- Child.svelte-->
<style>
  p {
    color: red
  }
</style>

<! -- P in child component will be red, but p in parent component will not be red => Set the scope of the style is component scope -->
<p>Child Component</p>
Copy the code

The parent component

<p>Father Component</p>
<! Component names in svelte have the following characteristics: 1. The first letter of the component name should be capitalized, which is different from normal HTML tags. If the component uses a single tag -- must be closed with / -->
<Child />

<script>
// Svelte introduces components that do not need components and can be used directly
// Every component in svelte is essentially a js class
import Child from './Child.svlete'
</script>
Copy the code

HTML tags

<! -- Strings are inserted in plain text, which means that HTML characters like < and > have no special meaning. If you need to render these tags in the corresponding HTML format, you can use @html. This is similar to VUE's V-HTML, which means, Svelte does no processing of the data when rendering the content as HTML tags, but parses it directly, so you must manually escape HTML from untrusted sources or risk exposing the user to XSS attacks -->
<script>
	let string = `this string contains some HTML!!! `;
</script>

<! -- this string contains some <strong>HTML!!! </strong> -->
<p>{string}</p>

<! -- this string contains some HTML!!! -->
<p>{@html string}</p>
Copy the code

Create and debug

create

// index.js
import App from './App.svelte';

// Svelte components are compiled and output directly as native JavaScript objects,
// You can easily import this object in React, Vue, or anywhere else, instantiate it with new, and use it
const app = new App({
  target: document.body, / / the mount point
  props: { // => Attributes passed by the parent component to the child component
    answer: 42}});Copy the code

debugging

<script>
	let user = {
		firstname: 'Ada'.lastname: 'Lovelace'
	};
</script>

<input bind:value={user.firstname}>
<input bind:value={user.lastname}>

<! -- This is the first debugging method, when the code comes in, it will execute the code and print it in the console, but since console.log is a method, the corresponding part of the interface will render undefined, but console.log can print very flexible -->
{console.log(user)}

<h1>Hello {user.firstname}!</h1>
Copy the code
<script>
	let user = {
		firstname: 'Ada'.lastname: 'Lovelace'
	};

	let demo = 'demo'
</script>

<input bind:value={user.firstname}>
<input bind:value={user.lastname}>

<! -- Debugging mode 2: {@debug XXX} 1. XXX can be used as a debugger without any content. 2. Because these top-level variables are converted to the properties of the component's corresponding class, it's like console.log(XXX) debugger -->
<! -- success -->
{@debug user}

<! -- error -->
<! -- {@debug user.firstname} -->

<! -- success -->
{@debug demo}

<! -- success -->
{@debug}

<h1>Hello {user.firstname}!</h1>
Copy the code