狀態管理主要使用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動畫變化曲線
通過progress的set和update修改狀態
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 ...