svelte教程（1）簡介

什麼是svelte?

Svelte是用于建構快速Web應用程式的工具。

它類似于React和Vue這樣的JavaScript架構。但是有一個關鍵的差別：Svelte在建構時将您的svelte代碼轉換為理想的JavaScript 代碼，而不是在運作時解釋您的代碼。想要詳細了解請檢視

svelte簡介

。

注：本教程中使用了Sapper架構進行svelte程式的開發。學習文法環節不需要掌握sapper架構的使用，想要了解的話請檢視

sapper文檔

本教程的所有代碼均上傳到github有需要的同學可以參考

https://github.com/sullay/svelte-learn

元件 components

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

添加資料

在元件中聲明一個變量name并在html中進行引用。“{}”内可以使用任何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

元件中可以使用

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規則能夠全局生效可以使用:global關鍵字。

實作方式是global修飾的選擇器不會添加class選擇器。

<style>
/* 所有h1标簽 */
:global(h1){
    color: red;
}
/* main标簽内的所有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>           

測試發現上面代碼中的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的使用已經有一個簡單的認識，後續還會更多svelte教程的内容。部分内容來自于官方教程，有興趣的可以結合起來一起看。