什么是svelte?

Svelte是用于構(gòu)建快速Web應用程序的工具。

它類似于React和Vue這樣的JavaScript框架。但是有一個關(guān)鍵的區(qū)別：Svelte在構(gòu)建時將您的svelte代碼轉(zhuǎn)換為理想的JavaScript 代碼，而不是在運行時解釋您的代碼。想要詳細了解請查看svelte簡介。
注：本教程中使用了Sapper框架進行svelte程序的開發(fā)。學習語法環(huán)節(jié)不需要掌握sapper框架的使用，想要了解的話請查看sapper文檔。
本教程的所有代碼均上傳到github有需要的同學可以參考 https://github.com/sullay/svelte-learn。

組件 components

在Svelte中，一個應用程序由一個或多個組件組成。組件是可重用的獨立代碼塊，它封裝在一起的HTML，CSS和JavaScript，并寫入.svelte文件中。

添加數(shù)據(jù)

在組件中聲明一個變量name并在html中進行引用?！皗}”內(nèi)可以使用任何JavaScript代碼。

<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>
<h1>Hello {name.toUpperCase()}!</h1>

如果變量名于屬性名相同的情況下，可以簡寫例如src={src}。

<script>
    let name = 'world';
    let src ="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570390818923&di=1b477739d17e14e5d8ee39b19cb40748&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012e3b5954ee3da8012193a387c830.png%401280w_1l_2o_100sh.png"
</script>

<img {src} alt="Hello {name}!">

樣式style

組件中可以使用<style>添加樣式并且這些css規(guī)則只適用于當前組件。
實現(xiàn)方式是給組件內(nèi)的所有css選擇器都添加一個相同的class選擇器并且與其他組件不相同，例如：

h1{
 text-align: center;
}

h1.svelte-17zljpa{
 text-align: center;
}

同時也給所有的標簽添加一個相同的class屬性。

<style>
h1{
    text-align: center;
}
img{
    width: 100%;
}
</style>

<script>
    let name = 'world';
    let src ="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570390818923&di=1b477739d17e14e5d8ee39b19cb40748&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012e3b5954ee3da8012193a387c830.png%401280w_1l_2o_100sh.png"
</script>

<h1>Hello {name}!</h1>
<h1>Hello {name.toUpperCase()}!</h1>
<img {src} alt="Hello {name}!">

如果希望css規(guī)則能夠全局生效可以使用:global關(guān)鍵字。
實現(xiàn)方式是global修飾的選擇器不會添加class選擇器。

<style>
/* 所有h1標簽 */
:global(h1){
    color: red;
}
/* main標簽內(nèi)的所有h1標簽 */
main :global(h1){
    color: red;
}
</style>

引入子組件

注意：自定義組件變量名首字母需為大寫字母。并且父組件中的樣式不會對子組件生效，反之也一樣。

// sullay.svelte
<h1>I am sullay!</h1>

// index.svelte
<script>
    import Sullay from '../components/sullay.svelte'
</script>
<Sullay/>

原樣顯示

在Svelte中，您可以使用特殊{@html ...}標簽進行原樣顯示。

<style>
.html h1{
    color: chartreuse;
}
</style>

<script>
    let html="<h1>I am sullay!</h1>"
</script>

<div class="html">{@html html}</div>

測試發(fā)現(xiàn)上面代碼中的color: chartreuse;并沒有生效。
原因是因為{@html ...}中的標簽并沒有添加對應此組件的class屬性。
修改一下上面的代碼，如下：

<style>
.html :global(h1){
    color: chartreuse;
}
</style>

<script>
    let html="<h1>I am sullay!</h1>"
</script>

<div class="html">{@html html}</div>

閱讀本文后相信你對svelte的使用已經(jīng)有一個簡單的認識，后續(xù)還會更多svelte教程的內(nèi)容。部分內(nèi)容來自于官方教程，有興趣的可以結(jié)合起來一起看。