重生之初识svelte框架(1)

1 什么是 Svelte?

官网写到:

Svelte 是一个构建 web 应用程序的工具。Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似,都怀揣着一颗让构建交互式用户界面变得更容易的心。

但是有一个关键的区别:Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用,而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本,并且在应用程序首次加载时没有额外损失。

你可以使用 Svelte 构建整个应用程序,也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包(package)交付到任何地方,并且不会有传统框架所带来的额外开销。

2 添加数据

再开始之前需要了解一下在 Svelte 中的组件:

应用程序由一个或多个 组件(components) 构成。它将 HTML、CSS 和 JavaScript 代码封装在一起并写入 .svelte 后缀名的文件中。

总结:简单来说一个.svelte文件就是一个组件。这和Vue类似。但是其中的区别就在于Vue需要再 在引入的文件中 component对象中注册。svelte不需要。

官网中添加数据:

在组件中添加一个 script 标签,并声明一个 name 变量,在dom中回显。

复制代码
<script>
    let name = 'world'; 
</script>

<h1>Hello {name}!</h1>

总结:此时{name} 变量就像vue中的模板语法:{{name}},这样就容易理解。

3 动态属性

就像可以使用花括号控制文本一样,也可以使用花括号控制元素属性。

我们的图像缺少一个 src 属性,让我们添加一个吧:

复制代码
<img src={src}>

在上面这个例子中,我们缺少 alt 属性,该属性用于描述这个标签的用途,以便让使用屏幕阅读器的用户,或网络连接缓慢、不稳定的用户了解这幅图像的用途。

复制代码
<img src={src} alt="A man dances.">

名称和值相同的属性并不少见,比如 src={src}。Svelte 为这些情况提供了一个方便的语法糖:

复制代码
<img {src} alt="A man dances.">

4 CSS样式

就像在 HTML 中一样,可以向组件添加一个 <style> 标签。

复制代码
<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

<p>This is a paragraph.</p>

总结:重要的是,这些规则是"作用域内的组件"。 不会在应用程序的其他地方意外更改<p>元素的样式,这就行我们在Vue中写到的 <style scoped> ...</style>

作者:前端子鱼

链接:https://zhuanlan.zhihu.com/p/367431533

来源:知乎

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

5 嵌套组件

将整个应用程序放在一个组件中是不切实际的。 取而代之的是,我们可以从其他文件中导入组件,并像包含元素一样包含它们。

以下是我们的 App.svelte 组件

复制代码
<script>
	import Nested from './Nested.svelte';
</script>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

<p>This is a paragraph.</p>
<Nested/>

Nested 组件:

复制代码
<p>This is another paragraph.</p>

官网中说道:注尽管 Nested.svelte 有一个 <p> 元素,但 App.svelte 中的样式是不会溢出的(也就是不会影响 Nested.svelte 中的 <p> 元素)。

还需要注意的是,组件名称 Nested 的首字母大写。采用此约定是为了使我们能够区分用户自定义的组件和一般的 HTML 标签。

6 HTML标签

通常,字符串以纯文本形式插入,这意味着像 <> 这样的字符没有特殊的含义。

但有时需要将 HTML 直接绘制到组件中。例如,您现在正在阅读的这段文字是存放于 markdown 文件中的,而展示到本页面时是作为一个 HTML 块。

在 Svelte 中,你可以使用特殊标记 {@html ...} 实现: 语法与Vue中的v-html一致。

复制代码
<p>{@html string}</p>

注意:官网明确写到,在将表达式的输出插入到 DOM 之前,Svelte 不会对 {@html ...} 内的表达式的输出做任何清理的。换言之,如果使用此功能,则必须手动转义来自不信任源的 HTML 代码,否则会使用户面临 XSS 攻击的风险。

相关推荐
番茄比较犟5 分钟前
Combine知识点switchToLatest
前端
北京_宏哥5 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
Process9 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君9 分钟前
轿车3D展示
前端·webgl·three.js
却尘10 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端
下辈子再也不写代码了12 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github
婷婷婷婷13 分钟前
AntV X6 常用方法
前端
LucianaiB22 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor
用户175923421502828 分钟前
D3.js - 基本用法
前端·d3.js
Mr.Liu644 分钟前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序