在10分鐘內概覽Svelte 3的基礎知識

點擊上方藍字「一塊兒學前端」關注我哦!

加個「星標」，天天一篇文章，一塊兒學前端！

Svelte在2019年中成爲後起之秀，接下來，讓咱們來簡單的瞭解一下，這個新的框架。
javascript

「 Svelte是一種構建用戶界面的全新框架。像React和Vue這樣的流行框架會在瀏覽器中完成大部分工做，而Svelte會將這些工做轉變爲在構建應用程序時發生的編譯步驟。」css

以上這段話是在他們的官方網站上所描述，但這究竟是什麼意思？它可以將繁重的工做從運行時轉到編譯的時候。（例如npm build時或者是yarn build時）html

本文將經過如下TODO的項目示例來讓你們更加直觀的瞭解這個框架：前端

項目的功能概覽

1.當沒有待辦事項時，該應用會向我顯示一個佔位符vue
2.當我單擊添加沒有值的待辦事項時，該應用程序不會容許我。java
3.當我單擊以添加帶有值的待辦事項時，應用程序將添加一個待辦事項並重置該值。react
4.我能夠看到我有多少個待辦事項的摘要，以及完成了多少個待辦事項git
5.我能夠經過單擊Todos複選框，將其標記爲已完成或撤消來刪除它們npm

設置

與其它框架不一樣的是，Svelte 沒有cli腳手架工具來幫助咱們快速構建一個項目，可是爲了使咱們構建項目更加簡單，咱們將使用一個入門模板並使用degit來獲取他本教程的要求：數組

NodeJS 8及以上
npm 5.2及以上 cd到項目的目錄，而後在命令行中輸入如下內容:

npx degit sveltejs / template svelte-todo
cd svelte-todo

如今，咱們已經有了一個適用於小型應用的彙總結構模板，如今，咱們能夠開始動手了。

結構

看一下咱們的結構， main.js 中的內容以下：

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});

export default app;

這裏須要注意的是，

.svelte 若是仔細觀察，咱們將導入一個.svelte文件,這是svelte的一個組件，在第三行中，咱們實例化了該對象。
target svelte應用程序將綁定HTML元素。若是你用過react或vue，則就像React中用<div id="root">來給ReactDOM進行渲染或者使用Vue中的el:'body' 來綁定該元素
props 有某些組件能夠從它的父級接受一些數據或者是屬性，從這裏，咱們能夠在svelte上下文以外將它們提供給咱們的組件，由於它沒有父級對象。

如今，咱們來看一下App.svelte 文件：

<script>
// code
</script>
<style>
// css
</style>
<!-- 能夠有一個或者多個html/svelte 標籤來讓你選擇-->

在<script>標籤中一般寫普通的JS代碼，<style>標籤中寫樣式（若是你想寫Scss的話，也能夠進行預處理）。除了這兩個標籤以外的全部內容都將成爲咱們正在寫的組件的模板。

Props

爲何要使用export let name;呢？這就是咱們如何定義屬性或者Props的方法，還記得在main.js中咱們如何給Props賦予值嗎？

要查看此操做的實際效果，請在svelte-todo目錄中運行cmd的同時運行run build，該服務已被預先配置爲熱更新。

yarn dev

在這以後，咱們打開localhost:5000來查看咱們的應用。props是經過export let [PROPNAME]在組件內部聲明來定義的。而後咱們能夠經過幾種方式提供給Svelte組件。將其做爲值傳遞給HTML屬性，方法以下：

<PersonComponent title = {name} {age} bind：shouldSleep = {sleepy} bind：happy />

title= {name} 傳遞 {name}給 props title
{age} 只是age={age} 當父級props與子級props狀態公用一個名字時的簡寫
bind:shouldSleep={sleepy} 咱們能夠在子組件中更改此值
bing:happy 變爲bind:happy={happy}。提供完這些東西之後，當咱們在組件內部訪問它們時，咱們的props 將保持上面給出的值。例如，咱們提供一個 Robot組件，activated={true} ，那當咱們進入activated 內部的Robot時，值將爲true。

樣式

打開 main.js 而後查看結果。如今刪除全部的內容。取而代之的是，添加一個<main>標籤，並本身在Hello World 中編寫，而且這將成爲你本身的內容，在這個過程當中，還包含了CSS的編譯，不信的話你給樣式的背景加入一些漸變色吧。Svelte會自動將全部樣式的範圍調整到每個組件，所以不須要BEM或者其餘的CSS界定方法，可是要到達HTML標籤，咱們須要進入全局的範圍中，幸運的是，咱們如今可使用:global{element}來將樣式放在應用的全局範圍內，如今，咱們的App.svelte文件以下：

<main>
	Hello world!
</main>

<style>
	:global(html) {
		/* this will apply to <html> */
		background: linear-gradient(#FF6F3F, #FFC877);
	}
</style>

組件

上面的內容還不是咱們想要的TODO應用，所以，讓咱們更加進一步：咱們要作的第一件事就是進入 src目錄中，建立一個新的文件夾components，而且在這裏面建立Tode.svelte文件。在這個文件中，添加如下內容：

<script>
  let todos = [];
  let value = "";
  
  $: amount = todos.reduce((sum, todo) => (todo.done ? ++sum : sum), 0);
  
  function addTodo() {
    if (value === "") return alert("please input a todo");
    const newTodo = {
      text: value,
      done: false
    };
    todos = [...todos, newTodo];
    value = "";
  }
</script>

<div class="wrapper">
  <div class="container">
    <div class="todos">
      {#each todos as todo}
        <p> {todo.text} </p>
      {:else}
        <p class="no-todos">Add a new todo!</p>
      {/each}
    </div>
    <div />
    <button on:click={addTodo}>add todo</button>
    <input bind:value placeholder="Your Todo Here" />
    <p>You've done {amount} todos out of {todos.length}</p>
  </div>
</div>

如今，咱們首先會看到一個很是奇怪可是有效的JS標籤:$:，它實際上表示一個反應性語句。它能夠在如圖所示的一行中顯示，也能夠做爲塊語句顯示，而且若是其中包含的任何變量發生更改，它將從新評估或從新運行，所以在這一行中，咱們僅計算完成的待辦事項數。

若是你之前用過其餘的流行框架，你會發現這裏實際上直接改變了狀態，雖然這一般是一個很大的禁忌，但這是很巧妙的辦法，還須要注意的是，咱們這裏不使用todos.push(newTodo)。而是從新分配待辦事項。這是因爲svelte決定什麼時候更新。Svelte只會更新待作項。這也意味着：

const family = { father: {name: "Jonathan"}}
const parent = family.father
parent.name = "Nathan"

由於咱們沒有從新分配家庭，所以不會觸發更新。

接下來，咱們研究在模板中看到的奇怪模式。那是一個「互相撫摸」的障礙。塊有不少種，您應該看一下小型的文檔以瞭解全部知識，您須要瞭解的全部知識均可以遍歷一個數組todos，併爲咱們提供分別訪問每一個值的方式，就像todo，並在其中返回模板對於它們中的每個，若是數組爲空，則顯示後面的項。若是您熟悉javascript，能夠將其與如下內容相似：

if (arr.length < 0) return <Placeholder />
return arr.map(item => <Item {item} />)

最後，咱們使用on:[event]和bind:[attribute],它們位於最底層，做爲回顧，咱們來看下面這些內容:

<button on:click={addTodo}>add todo</button>
<input bind:value placeholder="Your Todo Here" />

第一個是咱們的事件掛鉤，它的簡單含義是「在此觸發器上執行該操做」。在這種狀況下，「 on clickdo addTodo」是咱們以前在script標籤中定義的功能。第二種方法爲給定的值建立雙向綁定，這樣當您鍵入時，值會自動更新。若是您輸入「洗碗」，value將變成「洗碗」。

如今，咱們能夠建立TODO並展現出來，可是不能刪除它們。因此，在咱們的components文件夾中建立一個TodoItem.svelte文件，而且執行如下步驟：

導出一個變量，就像您在App.svelte中看到的todo那樣
用todo.done 添加一個div，該div包含帶標籤的複選框和一個綁定的選中值
標籤包含todo.text。不要忘記將值放在方括號中以表示其js值而不是文本值{thing}。
就像您使用bind同樣，在class:done等於的標籤上添加**a標籤 **todo.done.
添加style標籤，並命名爲「 done」的Class。

<script>
  export let todo;
</script>

<style>
  .container {
    padding: 12px 24px;
    border-bottom: 1px solid silver;
  }
  label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
  }
  input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
  }
  label.done {
      text-decoration: line-through;
  }
</style>

<div class="container">
  <label class:done={todo.done}>
    <input type="checkbox" bind:checked={todo.done} />
    {todo.text}
  </label>
</div>

我添加了一些樣式，可是我鼓勵您本身對應用進行設置樣式若是這成功了，那咱們成功作了一個本身的組件。咱們要作的最後一件事就是將全新的TODOItem放入Todo中：返回Todo.svelte並在script標籤中添加一個import語句：import TodoItem from './TodoItem.svelte'，轉到模板並替換{todo.text}爲<TodoItem bind:todo />。這會將todo做爲名爲todo 的道具發送給TodoItem，這就是咱們以前在TodoItem中聲明的導出todo變量中的內容。代碼以下：

<script>
  import TodoItem from "./TodoItem.svelte";
  let todos = [];
  let value = "";
  $: amount = todos.reduce((sum, todo) => (todo.done ? ++sum : sum), 0);
  function addTodo() {
    if (value === "") return alert("please input a todo");
    const newTodo = {
      text: value,
      done: false
    };
    todos = [...todos, newTodo];
    value = "";
  }
</script>

<style>
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container {
    display: grid;
    grid-template-rows: 8fr 1fr 1fr;
    padding: 8px;
    width: 600px;
    max-width: 800px;
    height: 600px;
    background: aliceblue;
    border: 3px solid #f2bb4d;
    border-radius: 5px;
  }
  .no-todos {
    width: 100%;
    height: 40px;
    font-size: 22px;
  }
  .todos {
    height: 100%;
    overflow-y: auto;
    margin-bottom: 24px;
  }
</style>

<div class="wrapper">
  <div class="container">
    <div class="todos">
      {#each todos as todo}
        <TodoItem bind:todo />
      {:else}
        <p class="no-todos">Add a new todo!</p>
      {/each}
    </div>
    <div />
    <button on:click={addTodo}>add todo</button>
    <input bind:value placeholder="Your Todo Here" />
    <p>You've done {amount} todos out of {todos.length}</p>
  </div>
</div>

完成了！小型的項目外觀雖然有些怪異，但其核心很是簡單。沒有花哨的架構，

本文原文來自 Medium，做者：Yuval Datner , 本文僅進行翻譯，轉載請註明出處！

若是以爲本文不錯的話，記得點「在看」噢！

本文分享自微信公衆號 - 壹前端（yiqianduan）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。