基础知识
如果你是第一次接触Svelte,请阅读: 《相比Vue和React,Svelte可能更适合你》
快速上手
首先,你需要将 Svelte 与构建工具集成起来。官方提供了针对Rollup和webpack的插件:
- rollup-plugin-svelte
- svelte-loader
但是我更推荐使用Vite,Vite也集成了vite-plugin-svelte
如果你使用的是 VS Code,去VS Code的插件库下载 Svelte for VS Code 插件就好了。对于 JetBrains 系列去插件市场下载 Svelte 就可以了。
然后,一旦项目设置好了,使用 Svelte 组件就很容易了。编译器将每个组件转换为常规的 JavaScript 类,接下来只需导入它并用 new 实例化即可:
import App from './App.svelte'; const app = new App({ target: document.body, props: { // we'll learn about props later answer: 42 } });
然后,如果需要,你可以使用组件 API与 app 进行交互。
创建项目
npm create vite@latest svelte-project
svelte-project 是文件夹名称,可以任意。
按照我的步骤来就好
我更喜欢TypeScript,按照你自己擅长的来就好了
OK ~
添加数据
打开刚刚新建的项目,修改 App.svelte 文件内容为:
<script> let user = { name: 'uiuing', from: 'CSDN' } </script> <a>Hi I'm {user.name}, from {user.from}</a>
运行
npm run vite
预览看看,你的端口可能和我的不一样。
在花括号内,我们可以放置任何我们想要的 JavaScript 内容。尝试更改 name 为 name.toLocaleUpperCase() 。
动态属性
您可以使用花括号来控制元素属性,就像使用它们来控制文本一样。
<script> let user = { name: 'uiuing', from: 'CSDN', } let href = 'https://uiuing.blog.csdn.net' </script> <a {href} target="_blank" alt="uiuing home"> Hi I'm {user.name}, from {user.from} </a>
具有名称和值相同的属性并不少见,例如 href={href} 。 Svelte 为我们提供了这些情况的便捷简写,因此,<a {href} 等于 <a href={href}
CSS样式
就像在 HTML 中一样,您可以向 <style> 组件添加样式
<script> let user = { name: 'uiuing', from: 'CSDN' } let href = 'https://uiuing.blog.csdn.net' </script> <a {href} target="_blank"> Hi I'm {user.name}, from {user.from} </a> <style> a { color: red; } </style>
这里要注意,作用域仅是这个组件,并不会影响其他组件或者全局。
嵌套组件
将整个应用程序放在一个组件中是不切实际的。相反,我们可以从其他文件导入组件,然后像包含元素一样使用它们。
每个 .svelte 文件都是一个组件,该组件是一个可重用的自包含代码块,它封装了属于一起的 HTML、CSS 和 JavaScript。
新建一个 Follower.svelte 文件
<script> let isFollow = false </script> <button on:click={()=>isFollow=!isFollow}> {isFollow ? 'Unfollow' : 'Follow'} </button>
然后到 App.svelte 里面使用
import Follower from './Follower.svelte'
另请注意,组件名称是大写的。这是是为了让我们能够区分用户定义的组件和常规 HTML 标记。
HTML标签
通常,字符串作为纯文本插入,这意味着字符像 < 和 > 都没有特殊含义。
但有时我们需要将 HTML 直接渲染到组件中。
在 Svelte 中,可以使用特殊 {@html ...} 标签执行此操作:
修改 Follower.svelte
<script> let isFollow = false </script> <button on:click={()=>isFollow=!isFollow}> {@html isFollow ? 'Unfollow' : '<b>Follow</b>'} </button>