重生之初始,重生之初见
墨初 知识笔记 131阅读
官网写到
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} altA man dances.>名称和值相同的属性并不少见比如 src{src}。Svelte 为这些情况提供了一个方便的语法糖
<img {src} altA man dances.>就像在 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>
作者前端子鱼
链接 来源知乎
著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。
将整个应用程序放在一个组件中是不切实际的。 取而代之的是我们可以从其他文件中导入组件并像包含元素一样包含它们。
以下是我们的 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 攻击的风险。