[!hint] 无需操作 DOM

基础

JS 规则

{}

在 <sript> 中声明变量，在需要使用时用 {…} 包含变量名

允许将包含 HTML 代码的表达式直接插入到 DOM 中

html

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p>
---

网页将粗体显示"HTML!!!"，而不是显示”<strong>HTML!!!</strong>“

[!attention] Svelte 不会对 {@html …} 内的表达式的输出做任何清理的【如果使用 {@html …} ，则必须手动转义来自不信任源的 HTML 代码，否则会使用户面临 XSS 攻击的风险】

CSS 规则

[!hint] 在 svelte文件 中的 <style> 的作用域被限定在当前组件中【不会意外地更改应用程序中其他地方的 <p> 元素的样式】

html

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

<script>
	let name = 'world';   /* 声明一个 `name` 变量 */
	let src = 'tutorial/image.gif';
</script>

<h1>Hello {name}!</h1>    /* 引用 `name` 变量 */
<img src={src} alt="A man dances.">

嵌套组件

将整个网页放在一个组件中是不切实际的，所以我们需要从其他 svelte文件 中导入组件

[!attention] 导入的组件的名称的首字母大写

html

<script>
	import Nested from './Nested.svelte';    /* 导入 */
</script>

<Nested/>    /* 应用导入的文件名 */

Vue.js:
- 轻量级的 JavaScript 框架，专注于构建用户界面。它采用了组件化的架构，可以轻松地集成到现有项目中。
- 优点：易于上手，具有良好的文档和社区支持；灵活性高，适用于构建小型到大型的应用程序；性能较好，具有响应式的数据绑定和虚拟 DOM。
- 缺点：生态系统相对较小，相比 React.js 和 Angular.js，可用的插件和组件库较少。
- 使用建议：对于小到中型的项目，初学者或希望快速构建原型的团队，Vue.js 是一个不错的选择。
Angular.js:
- 区别：Angular.js 是一个完整的前端开发框架，提供了强大的工具和功能，包括模块化、数据绑定、依赖注入等。它适合构建大型、复杂的应用程序。
- 优点：完整的解决方案，提供了许多功能和工具；强大的 MVC（模型 - 视图 - 控制器）架构；类型安全。
- 缺点：学习曲线较陡峭；较重量级，性能相对较低；相对复杂，适用于大型项目。
- 使用建议：对于大型、复杂的应用程序，并且团队具有 Angular.js 的经验和专业知识，Angular.js 仍然是一个强大的选择。
Next.js:
- 区别：Next.js 是一个基于 React.js 的服务器渲染框架，用于构建快速、可扩展的 React 应用程序。它提供了预渲染、静态导出和服务器渲染等功能，使页面加载速度更快、SEO 友好。
- 优点：服务器渲染和预渲染，提供更好的性能和 SEO；易于使用，与 React.js 生态系统无缝集成。
- 缺点：对于简单的应用程序而言，可能过于复杂；相对较新，可用的插件和资源相对较少。
- 使用建议：对于需要服务器渲染和 SEO 优化的 React 应用程序，或者希望使用 React 生态系统并享受服务器渲染功能的团队，Next.js 是一个不错的选择。
Express.js:
- 区别：Express.js 是一个基于 Node.js 的轻量级 Web 应用程序框架，用于构建快速、灵活的后端应用程序。它提供了简单的 API 和中间件系统。
- 优点：简单易学，快速构建后端应用程序；灵活性高，可以与各种插件和库集成；强大的中间件支持。
- 缺点：相对较低级，需要更多的手动配置；较小的生态系统，相对于其他框架来说可用的插件和资源较少。
- 使用建议：对于构建轻量级、快速的后端应用程序，并且需要灵活性和自定义的团队，Express.js 是一个不错的选择。
Svelte:
- 区别：Svelte 是一个编译型的 JavaScript 框架，将组件转换为原生的 JavaScript 代码，以实现高效的运行时性能。它使用了类似于 Vue.js 和 React.js 的组件化开发模式。
- 优点：出色的性能，生成的代码体积小，加载速度快；学习曲线较低，易于上手；使用直接的语法，减少了框架的冗余代码。
- 缺点：相对较新，生态系统相对较小；可用的第三方库和插件较少。
- 使用建议：对于追求性能和体积优化的应用程序，并且喜欢简洁语法的团队，Svelte 是一个不错的选择。
React.js:
- 区别：React.js 是一个流行的 JavaScript 库，用于构建用户界面。它采用了组件化的开发模式，通过虚拟 DOM 实现高效的 UI 更新。
- 优点：强大的生态系统，丰富的第三方库和组件；良好的性能，通过虚拟 DOM 进行高效的 UI 更新；
- 缺点：相对较大，相比于其他框架来说，初始学习曲线较陡峭。
- 使用建议：React.js 适用于各种规模的应用程序，特别是对于需要大量交互和复杂状态管理的应用程序，以及希望利用庞大的 React 生态系统的团队。

对于小型项目、初学者或希望快速构建原型的团队，Vue.js 和 Svelte 可能是更好的选择，因为它们具有较低的学习曲线和良好的性能。
如果你需要构建快速、灵活的后端应用程序，Express.js 是一个不错的选择。

基础 ​

JS 规则 ​

{} ​

​

CSS 规则 ​

嵌套组件 ​

基础

JS 规则

{}

CSS 规则

嵌套组件