svelte学习（一）

听说js出了一个颠覆性的编译阶段框架svelte，开始学习~

安装 svelte 脚手架

npx degit sveltejs/template demo　　

进入项目运行

npm install

npm run dev

　　

打开http://localhost:5000就可以看到svelte已经运行起来了

正式学习开始（先来学学语法）打开App.svelte 乍一看像极了Vue，只是不需要template来包裹html了

1. 在模板中使用 {} 来插入变量, {}中写入变量名，也可以写一些javascript代码

<script>
    let count = 0;
</script>

<main>
    <p>{count}</p> 
    <p>{count + 100}</p>
</main>

2.条件渲染 使用  {#if 条件1} {:else if 条件2} {:else} {/if}

<script>
  let flag = false;
</script>

<main>
  {#if flag}
    <strong>{flag}</strong>
  {:else}
    <em>{flag}</em>
  {/if}
</main>

3.列表渲染  svelte 的列表渲染很有意思

{#each list as item, index (key)}
	<li>{item}</li>
{/each}

这个key的作用和vue v-for的key的作用是一样的，你也可以不写，

然后他可以使用{:else}加个默认值 ，当列表为空时候显示默认值

{#each list as item}
	<p>{item.text}</p>
{:else}
	<p>啥也没有</p>
{/each}

<script>
  const list = [
    { id: 1, name: "*", age: 12 },
    { id: 2, name: "**", age: 16 },
    { id: 3, name: "***", age: 18 }
  ];
</script>

<main>
  <ul>
    {#each list as item, index (item.id)}
      <li>{item.name}</li>
    {:else}
      <li>空空如也</li>
    {/each}
  </ul>
</main>

4.节点插入html字符串 {@html str}

<script>
    const str = `
    <h1 style="color: red;">selvte</h1>
    `;
</script>

<main>
    <div>
        {@html str}
    </div>
</main>

先记到这里