其他人已经解释了将其编译为JavaScript的要点,因此我将介绍这一部分:
为什么不简单地<button onclick=...
?
onclick
属性是现有的HTML属性(您不应使用)。语义非常不同-发生点击时,字符串值被评估为JavaScript。这是一种不好的做法,因为您调用的任何函数都必须位于 global 范围内。
on:click
是一种Sveltism,将按钮的click事件链接到本地定义的函数。 :
是一种通用语法,它表示“这是一个指令而不是 attribute ”,其中“指令”可以表示事件处理程序({ {1}},绑定(on:...
),过渡(bind:...
/ in:...
/ out:...
)等。
,
首先要了解的是,Svelte组件中的代码实际上不是发送到浏览器的最终JavaScript,因此:
我仍然不明白这是如何有效的JS语法
不是。 SvelteJS的编译器会将其“编译”为有效的JavaScript。
我还没有漫游源代码,但是在这种情况下,我假定冒号用于表示事件本身(on
)的事件处理程序绑定指令(click
)。 / p>
有关编译的实际演示:您可以访问REPL并选择“ Js output”标签,以查看编译的JavaScript代码。
,
苗条的<button on:click ... />
在编译步骤后成为该按钮上“单击”事件的正常事件侦听器。
getEventListeners(elem)将揭示这一点。这就是为什么可以使用多个处理程序的原因,
例如<button on:click on:doWhatever...
>
因此,等效于在普通js中添加elem.addEventListener()。
本文链接:https://www.f2er.com/3092561.html