-
svelte中的生命周期
每个组件从创建开始，到销毁结束这个过程，都有一个生命周期生命周期函数就是在生命周期的某个阶段运行的代码svelte中的生命周期函数目前有5个，每个都需要单独的由svelte包中引入import {onMount,beforeUpdate,afterUpdate,onDestroy,tick} from "svelte"onMount(callback: () => void)：将组件挂载到DOM后运行onMount(callback: () => () => void) 返回值允许为一个函数 返回的函数将在组件销毁时运行beforeUpdate(ca...
2023-09-01 -
svelte的插值和绑定
svelte中使用一对花括号 { val } 来标记插值，类似于vue中的双花括号 {{ val }}<script> let name = 'qingheluo'; </script> <p>{ name }</p> <p>{ name=="qingheluo" ? "主人" : "游客" }</p> 在花括号中也可进行简单的运算动态属性花括号除了可以控制文本显示以外，同时适用于元素的属性属性中使用变量可以省略双引号，但是有些...
2023-08-31 -
svelte的事件
绑定事件使用on:event={handler}属性来为元素绑定指定的事件其中handler可以是函数名，也可以直接编写简单的处理函数<button on:click={func}>num+1</button> <button on:click={()=>num++}>num+1</button> <button on:click={function(){num++}}>num+1</button>事件修饰符使用"|"字符为DOM事件添加修饰符来变更行为，可用的修饰符有preventDefault ：取消时间默...
2023-08-29 -
svelte的响应性
变量响应性当一个变量的值发生改变时，与之关联的变量和在页面中的显示内容也随之改变类似于vue中的ref()和react中的useState()在svelte4版本中，赋值操作是触发Svelte响应性的核心，就是说只要出现等号(=)赋值语句，就会自动分析该语句中所有涉及的变量并对所有涉及的变量应用响应let a = 1; let b = a*2; <p>a的值：{a}</p> <p>b的值：{b}</p> <button on:click={()=>a++}>a+1</button> 点击按钮后页面显示中只有...
2023-08-29 -
svelte中的模板逻辑
条件渲染{#if expression} ... {:else if expression} ... {:else} ... {/if} 使用 if 块包含条件渲染内容 使用 {:else if expression} 添加更多条件 使用 {:else} 作为最后条件 # 字符代表块开始标记 / 字符代表块结束标记 : 字符表示块连续标记列表渲染{#each expression as val}...{/each} {#each expression as val (key)}...{/each} {#each expression as val, index}...{/each} ...
2023-08-29