生命周期
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"">下页
领取专属 10元无门槛券
私享最新 技术干货