重生之初识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 攻击的风险。

相关推荐
热爱编程的小曾18 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin29 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox42 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox