快速了解
完整资料
资料已展开关于 Svelte
官方列子
js
复制代码
npx degit sveltejs/template my-svelte-project
# or download and extract
cd my-svelte-project
npm install
npm run dev
svelte进入3.0后,语法借鉴了vue的SFC语法,非常简单。官网上有很多栗子,这里只提及一个循环渲染的栗子,语法类似模版语言,数值的插值使用{},大家感受一下,熟悉vue的童鞋应该很熟悉。由于框架中没有virtual-dom,所以不需要像vue和react一样需要dom根节点
js
复制代码
<script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>
<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as { id, name }, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
{i + 1}: {name}
</a></li>
{/each}
</ul>
适合的使用方向
官方列子
Svelte是用于构建快速Web应用程序的工具
主要用途
Svelte是用于构建快速Web应用程序的工具。它类似于React,Angular,Vue和Ractive之类的JavaScript框架,它们共同的目标是使构建灵活的交互式用户界面变得容易。
适用方向
适合编码、调试、测试、接口联调和工程效率提升等开发场景。
收录线索
VueReact前端框架Angular库 / 框架
资料说明
内容根据公开资料整理;版本、兼容性与服务状态请以官网最新说明为准。
