svelte js从入门到入土（二）

生命周期

onMount //插入到文档 beforeUpdate //内容更新前 afterUpdate //内容更新后 onDestroy //销毁 使用前需要引入

import { onDestroy } from 'svelte';

第二部分 基本语法

Svelte的变量不用放在data里面，只有跟js一样，声明变量就行了 用{}号引用,如

let me = '秋野'

关于特殊的标签说明html输出

--{@html xxxx }

判断

--{#if }{/if} {#if }{:else}{/if}

当然也可以

--{:else if}

循环

--{#each cats as { id, name }, i} id name {/each}

或者

--{#each cats as item, i} item.id {/each}

请求

--{#await promise} 正在请求 {:then number} 正常返回 {:catch error} 返回异常 {/await}

数据绑定

双向

bind:value

事件处理

绑定事件,

on:click=>

当然也可以在里面直接写

on:click="}"

事件就跟js的事件一样写

function handleClick(){}

其它时间看文档

on:mousemove on:click|once= 只执行一次

监听事件

--$:来处理监听

Let me = 20 $: you = me/2

当然你也可以在监听的时候处理事情

--$: if(you === ’10’){}

所以在弄一个分页组件的时候，只要监听一个当前页就行了

--$: if ( currentPage <= lastpage ){ 获取列表数据 }trong>

按钮只要操作当前页这个值就行了

currentPage--}" disabled="class="num"">上页 currentPage++}" disabled="class="num"">下页