Svelte入门基础简介

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

Svelte在语法上非常简单，和vue很像，但是api会简单很多，因此代码量会少很多，并且没有虚拟DOM，所以代码体积会小很多，也没有很复杂的状态管理。

一、基本用法

（1）一个.svelte就是一个组件，有html，css和js代码封装组成。类似vue的写法，<script></script>中定义的变量，可以使用单大花括号写在html中，例如：

<script>

    let src = 'tutorial/image.gif';

    let name = 'Rick Astley';

</script>

<img {src} alt="{name} dances.">

当属性名和变量名是一样的时候。我们可以简写省略掉变量名。

（2）样式：对于css样式，就行写html文件那样去写：

<style>

    p{

        color: purple;

        font-family: 'Comic Sans MS', cursive;

        font-size: 2em;

    }

</style>

<p>This is a paragraph.</p>

重要的第一点是，这个样式的作用域限定于当前组件中。不会对其他地方的p标签产生影响。

（3）组件嵌套：上面说的例子都是简单的一个小组件，然而完整的应用程序是由多个组件构成的，使用组件也很简单，import进来就可以使用，并且为了区分自定义组件和普通HTML标签，组件名必须首字母大写：

<p>This is a paragraph.</p>

<Nested/>

<script>

import Nested from "./Nested.svelte";

</script>

（4）字符串转为HTML标签：类似于vue里的v-html和react里的dangerouslySetInnerHTML。Svelte里面用{@html ......}的形式，这种情况下，需要手动转义非信任源的HTML标签来避免XSS攻击。

<script>

    let string = `this string contains some <strong>HTML!!!</strong>`;

</script>

<p>{@html string}</p>

二、响应式

（1）赋值：响应式也是Svelte的核心之一，在js里直接修改绑定的变量，就可以同步看到DOM上数据发生改变，很简单：

<script>

    let count = 0;

    function handleClick() {

        count++;

    }

</script>

<button on:click={handleClick}>

    Clicked {count} {count === 1 ? 'time' : 'times'}

</button>

（2）声明：类似vue里的computed，这里叫“反应式声明”，这样写：

let count = 0;

$: doubled = count * 2;

然后就可以在html里像用count那样使用doubled。

以此类推，$: 后面也可以跟一串逻辑，比如：

$: {