svelte前端框架新手教学(第一章)

之前我们学了Vue这个框架,今天我们直接进入正题,我们把点击事件讲一讲,以前在Vue中会讲到@click="绑定时间名字"

但是在这个框架,并不是的,我们看一下这个框架是啥,有啥用处,我们看官网的原话

Every component has a lifecycle that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle. The one you'll use most frequently is onMount, which runs after the component is first rendered to the DOM. We briefly encountered it when we needed to interact with a <canvas> element after it had been rendered. We'll add an onMount handler that loads some data over the network:

翻译后:

每个组件都有一个生命周期，从创建时开始，到销毁时结束。有一些函数允许您在生命周期的关键时刻运行代码。

最常用的是onMount，它在组件第一次呈现给DOM之后运行。当我们需要与一个&lt;canvas&gt;元素之后。

我们将添加一个onMount处理程序，它通过网络加载一些数据:

Svelte is used to build fast Web applications.

Svelte, like React and Vue, is designed to make it easy to build flexible and interactive user interfaces.

In contrast, Svelte converts your code to better JavaScript at build time, rather than interpreting and executing your code at runtime.

This means that you don't have to pay the performance cost of the framework itself, and there's no extra performance cost for the first load.

You can use Svelte to write an entire application, or you can use it to progressively refactor existing code. You can also export a single stand-alone component (without having to ship the framework itself) and use it in any framework, which is pretty versatile.

翻译后:

Svelte 用于构建快速的 Web 应用。 Svelte 类似 React 和 Vue，都致力让你轻而易举地构建灵活的可交互的用户界面。 与它们截然不同的是：Svelte 在构建时 将你的代码转为更优的 JavaScript，而不是在 运行时 才解释执行你的代码。 这预示着你无需付出框架本身的性能成本，且首次加载也无额外性能损耗。 你可以使用 Svelte 编写整个应用，也可以用来逐步重构现有代码，整半皆可；还可以只输出单个独立组件（无需强制附带框架自身）并将其用于任意框架中，可谓百面玲珑。

我们刚刚说到点击事件

on:eventname={handler}

on:eventname|modifiers={handler}

 <button on:click={handleClick}></button>

function handleClick(e){

        console.log('你好')

   }

就可以给我打印出你好,我们可以通过这个点击事件完成一些事情

1.  
   <script>
2.  
   let count = 0;
3.  
    
4.  
   function handleClick(event) {
5.  
   count = 1;
6.  
   }
7.  
   </script>
8.  
    
9.  
   <button on:click={handleClick}>
10.  
    count: {count}
11.  
    </button>

 也支持

1.  
   <button on:click="{() => count = 1}">
2.  
   count: {count}
3.  
   </button>

在比如表单

1.  
   <form on:submit|preventDefault={handleSubmit}>
2.  
   <!-- the `submit` event's default is prevented,
3.  
   so the page won't reload -->
4.  
   </form>

使用 |字符为DOM事件添加修饰符。

 在认识几个API

• preventDefault ：在程序运行之前调用 event.preventDefault()
• stopPropagation ：调用 event.stopPropagation(), 防止事件到达下一个标签
• passive ：改善了 touch/wheel 事件的滚动表现（Svelte会在合适的地方自动加上它）
• capture：表示在 capture阶段而不是bubbling触发其程序
• once ：程序运行一次后删除自

这写东西我举个例子吧,如上面所示,我假设想用once

那么你可以用|把once进行添加修饰

这也就是使用方式了

好了,介绍就先到这里了,我们下期再见!

这篇好文章是转载于：学新通技术网