svelte 學習記錄 二

2021-10-01 12:01:42 字數 3758 閱讀 1554

狀態管理主要使用svelte/store這個目錄writable 宣告乙個可以obsevable的物件

const count = writable(0);初始化 值

通過update更新 類似react中setstate

通過set直接更新值

通過subscribe監聽值得變化 。會返回乙個unsubscribe函式,配合ondestory取消監聽

$count自動指向 監聽的值 ,所以再svelte中盡量避免使用$宣告變數

// store.js

import from 'svelte/store';

export const count = writable(0);

-

// incrementer.svelte+

// resetter.sveltereset

// count指向監聽的值,自動監聽

readable宣告乙個唯讀的變數,null為初始值, 第二個函式set引數為 修改狀態方法

返回乙個 銷毀函式 以便於 自動銷毀一些監聽事件。 例如setinterval

import  from 'svelte/store';

export const time = readable(null, function start(set) ,1000)

return function stop() ;

});

derived用於宣告計算屬性

export const elapsed = derived(

time,

$time => math.round(($time - start) / 1000)

);

通過返回乙個包含subscribe,set,update的物件 封裝乙個自定義狀態管理變數

// stores.js

import from 'svelte/store';

function createcount() = writable(0);

return ,

decrement: () => {},

reset: () => {}

};}export const count = createcount();

+

-reset

通過bind:繫結狀態到元件 ,相當於on:click=""

$name += '!'相當於name.set($name + '!')

// stores.js

import from 'svelte/store';

export const name = writable('world');

export const greeting = derived(

name,

$name => `hello $!`

);

name.set($name+= '!')}>

add excuamation mark!

svelte/motion動畫型別

svelte/easing動畫變化曲線

通過progresssetupdate修改狀態 

progress.set(0)}">

0%progress.set(0.25)}">

25%progress.set(0.5)}">

50%progress.set(0.75)}">

75%progress.set(1)}">

100%

通過transition:fade指令進行過渡動畫繫結

visible

fades in and out

transition:fly進行動畫引數繫結

visible

fades in and out

控制動畫進場和離場

visible

flies in and out

通過css返回樣式 來自定義過渡動畫

visible

transitions!

這是模仿打字的js動畫 通過tick來實現幀動畫

visible

the quick brown fox jumps over the lazy dog

過渡動畫通過on:introstart、on:introend

status = 'intro started'}"

on:outrostart=""

on:introend=""

on:outroend=""

>

flies in and out

通過transition:slide|local父容器銷毀或增加時候不具備動畫效果

show list			

crossfade生成組合動畫

e.which === 13 && add(e.target)}

>

mark(todo, true)}>

remove(todo)}">remove

mark(todo, false)}>

remove(todo)}">remove

flip為不具有過渡效果的元素,新增動畫

e.which === 13 && add(e.target)}

>

mark(todo, true)}>

remove(todo)}">remove

mark(todo, false)}>

remove(todo)}">remove

Linux學習記錄(二)

基本指令碼 1.expr 後面的計算式,算符前後 要有空格 不然會當字串輸出 2.用expr做計算式不方便,更好的用var 1 2 3 這樣的方法,缺點是,只能用於整數。3.計算浮點數 用bc命令進入計算器,用quit命令退出,scale 4 設定小數點顯示後4位。4.bc可用於指令碼之中,方法是用...

Dubbo學習記錄二

記錄在研究dubbo 中的學習點 spi的介面類的介面方法的 adaptive 1 在與spring進行整合的時候,利用spring的xml配置建立出一系列的配置物件,存到spring容器中 registry 對應 registryconfig moniotr 對應 monitorconfig pr...

Swift學習記錄(二)

一般寫法 for var i 0 i 10 i 遍歷 0 9 for i in 0.10 遍歷 0 10 for i in 0.10 表示不關心索引值 for in 0.10 swift中switch的基本用法和oc相類似,switch 需要匹配的值 case 匹配的值 需要執行的語句 break ...