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

简介: 【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 是文件夹名称,可以任意。


按照我的步骤来就好

7.png

我更喜欢TypeScript,按照你自己擅长的来就好了

8.png

OK ~


9.png

添加数据


打开刚刚新建的项目,修改 App.svelte 文件内容为:

<script>
  let user = {
    name: 'uiuing',
    from: 'CSDN'
  }
</script>
<a>Hi I'm {user.name}, from {user.from}</a>

运行


npm run vite

预览看看,你的端口可能和我的不一样。


10.png

在花括号内,我们可以放置任何我们想要的 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}


11.png


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>

12.png

这里要注意,作用域仅是这个组件,并不会影响其他组件或者全局。


嵌套组件


将整个应用程序放在一个组件中是不切实际的。相反,我们可以从其他文件导入组件,然后像包含元素一样使用它们。


每个 .svelte 文件都是一个组件,该组件是一个可重用的自包含代码块,它封装了属于一起的 HTML、CSS 和 JavaScript。


新建一个 Follower.svelte 文件

13.png

<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>

14.png15.png

目录
相关文章
|
3天前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
3天前
|
前端开发 搜索推荐 算法
|
3天前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
3天前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
|
3天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
8天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
48 6
|
6天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
91 1
|
11天前
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
|
12天前
HTML 属性
HTML属性为元素提供额外信息,格式为name=&quot;value&quot;,置于开始标签内。如&lt;a href=&quot;http://www.runoob.com&quot;&gt;,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。
|
20天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
106 1