【Svelte】-（1）基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签

基础知识

如果你是第一次接触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>