<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
<
/head>
>}}
<
/child>
<
/div>
"node_modules/vue/dist/vue.js"
>
<
/script>
// vuex:只要改變了state,凡是依賴state的元件都會高效的更新;
// new vue的data屬性;
let vuex =
(function()
// 為了能讓資料能夠監聽到,當資料發生改變,依賴的檢視也要更新的;
let vm =
newvue(}});
this
.state = vm.state;
// this==> $store
this
.mutations =
;let mutations = options.mutations;
//這個就是傳遞進來的那個mutations
// object.keys : 把物件中的屬性名挑出來放到乙個陣列中
// 就是在例項身上準備乙個mutations物件,裡面包含了options外界傳遞進來的方法,那麼方法中的this已經是指向了store這個例項;
object.
keys
(options.mutations)
.foreach
(key =>})
;// 執行私有屬性的方法時,呼叫原型上的方法;
let commit =
this
.commit;
// 把原型的commit給了變數commit;
this
.commit
=(type, option)
=>
this
.commit
=function
(type, option)
// actions
this
.actions =
;let actions = options.actions ||
; object.
keys
(actions)
.foreach
(key =>})
;let dispatch =
this
.dispatch;
this
.dispatch
=(type, option)
=>
// getters
this
.getters =
;let getters = options.getters ||
; object.
keys
(getters)
.foreach
(key =>})
;});
}// 把commit 放到store的原型上
commit
(type, payload)
dispatch
(type, option)
}function
mapstate
(ary)
; ary.
foreach
(key =>})
return obj;
}function
mapgetters
(ary)
; ary.
foreach
(key =>})
return obj;
}function
mapactions
(ary)
; ary.
foreach
(key =>})
return obj;
}function
mapmutations
(ary)
; ary.
foreach
(key =>})
return obj;
}// ...vuex.mapstate(["count"])
function
install
(_vue)
else}}
)}return})
();// vue的外掛程式必須使用vue.use;只是vuex會預設檢測到是vue的官方外掛程式,看不到vue.use;vue.use執行時,會預設呼叫裡面的install;
vue.
use(vuex)
;// vuex.store
// vuex.mapstate
// store 是store的乙個例項;並且這個例項最後放到了vue的例項屬性上;
let store =
newvuex.store(,
mutations:},
actions:
, val)},
getters:}}
);let child =
, methods:},
computed:
,...vuex.
mapstate([
'count'])
},template:
"}}增加"}
// $store 會新增到每乙個元件的例項上;
let vm =
newvue(,
// 把store的乙個例項給了這個store屬性
// 元件在註冊時,不會呼叫生命週期鉤子函式,
components:})
; 目前vm身上沒有$store
// $options:代表 :new的物件,會把物件中的鍵值對新增到當前例項的$options上
// 1.先準備vuex物件【store,install】;
// 2. vue.use執行呼叫了裡面install,install執行呼叫了vuex.mixin,對vue這個類進行了修改
// 3.生成了乙個store
// 4.new vue;把store放到了例項的$options
// 5.隨後vm的生命週期,執行了mixin中的beforecreate=>把options的store直接賦值給了例項的$store屬性;
<
/script>
<
/body>
<
/html>
封裝vue router,實現基礎功能
class vuerouter options 監聽當前頁面的hash值的切換 當第一次解析頁面時,會有乙個預設的hash值 迴圈遍歷routes,把path和component重新放入乙個新的物件中 this routemap routes.reduce prev,next this vuerou...
(46) 不用swapcase函式實現其功能
不用swapcase函式以實現其功能 實現swapcase函式 ascii碼方式 列表 元祖方式 def togglecase s 設定儲存結果的變數 result 大寫字母列表 upper a b c d e f g h i j k l m n o p q r s t u v w x y z 小寫...
php 實現分頁功能(class封裝了功能)
分頁是乙個很常見的功能,我這裡提供了分類類 class 用於前端頁面中的四個按鈕 首頁腳頁 上面的演示非常不直觀,但足可以證明這個類可以完成分頁功能。附有非常詳細的注釋,但需要有一定的 php 基礎。todo 分頁類 前端需傳遞兩個引數 請求方式 get num 每頁要顯示多少條資料 sum 一共有...