From d874f5437b7c7e2f1ae770b14b82d69e110f85d0 Mon Sep 17 00:00:00 2001 From: endy Date: Wed, 2 Nov 2016 23:22:36 +0800 Subject: [PATCH 01/37] U --- readme.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 228311c..8bbd7be 100644 --- a/readme.md +++ b/readme.md @@ -170,13 +170,13 @@ import 'mint-ui/lib/toast/style.css'; - https://github.com/naugtur/xhr - +- https://github.com/ded/reqwest # 豪哥的QQ群 - 小弟在互联网有一个爱好前端的朋友，网名：豪情，不断贡献自已的知识分享最先进的前端资讯，带领着很多人学习前端。 -- 小弟有幸能结交豪哥，以下是中国最专业的前端群, 仅供参考. +- 小弟有幸能结交豪哥，以下是中国最专业的前端群, 仅供参考. > * vuejs 364912432 > * Angularjs 238251402 @@ -191,7 +191,7 @@ import 'mint-ui/lib/toast/style.css'; > * ASP.NET C#技术交流群 461614624 > * 安卓IOS混合开发群 415074410 - + #台湾小凡 From 2a980c18f061880caff35e2f39f510dac81d5853 Mon Sep 17 00:00:00 2001 From: bhnddowinf Date: Sat, 5 Nov 2016 00:50:29 +0800 Subject: [PATCH 02/37] U --- npm-debug.log | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 npm-debug.log diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 0000000..bebecab --- /dev/null +++ b/npm-debug.log @@ -0,0 +1,22 @@ +0 info it worked if it ends with ok +1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', +1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', +1 verbose cli 'run', +1 verbose cli 'dev' ] +2 info using npm@3.10.8 +3 info using node@v7.0.0 +4 verbose stack Error: ENOENT: no such file or directory, open 'E:\github\vuejs2-learn\package.json' +5 verbose cwd E:\github\vuejs2-learn +6 error Windows_NT 6.1.7601 +7 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev" +8 error node v7.0.0 +9 error npm v3.10.8 +10 error path E:\github\vuejs2-learn\package.json +11 error code ENOENT +12 error errno -4058 +13 error syscall open +14 error enoent ENOENT: no such file or directory, open 'E:\github\vuejs2-learn\package.json' +15 error enoent ENOENT: no such file or directory, open 'E:\github\vuejs2-learn\package.json' +15 error enoent This is most likely not a problem with npm itself +15 error enoent and is related to npm not being able to find a file. +16 verbose exit [ -4058, true ] From 41822a14b181f1248b3a9d934c53995b0ba8d3b0 Mon Sep 17 00:00:00 2001 From: bhnddowinf Date: Sat, 5 Nov 2016 15:03:56 +0800 Subject: [PATCH 03/37] U --- my-project/src/vuejs2-demo/treeview/app.vue | 30 ++++++++++++++------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/my-project/src/vuejs2-demo/treeview/app.vue b/my-project/src/vuejs2-demo/treeview/app.vue index 21c94ad..1bb2ba4 100644 --- a/my-project/src/vuejs2-demo/treeview/app.vue +++ b/my-project/src/vuejs2-demo/treeview/app.vue @@ -3,7 +3,7 @@

(双点击可以将项目转成目录) Vue.JS2 官网 树 for vue-cli

    - +
@@ -12,29 +12,41 @@ // demo data var data1 = { name: 'root', + no: '1', children: [{ - name: 'hello' + name: 'hello', + no: '2', }, { - name: 'wat' + name: 'wat', + no: '3', }, { name: 'child folder', + no: '4', children: [{ name: 'child folder', + no: '5', children: [{ - name: 'hello' + name: 'hello', + no: '6', }, { - name: 'wat' + name: 'wat', + no: '7', }] }, { - name: 'hello' + name: 'hello', + no: '8', }, { - name: 'wat' + name: 'wat', + no:'9', }, { name: 'child folder', + no:'10', children: [{ - name: 'hello' + name: 'hello', + no:'11', }, { - name: 'wat' + name: 'wat', + no:'12', }] }] }] From b4df33459b75ef65dab6336f2095759f767325e7 Mon Sep 17 00:00:00 2001 From: bhnddowinf Date: Mon, 7 Nov 2016 16:41:50 +0800 Subject: [PATCH 04/37] U --- readme.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 8bbd7be..a9c11df 100644 --- a/readme.md +++ b/readme.md @@ -164,9 +164,12 @@ import 'mint-ui/lib/toast/style.css'; # 國外 ajax 主流插件 (vue-resource 作者不更新了) -- https://github.com/github/fetch - - https://github.com/mzabriskie/axios +> 尤大推荐 axios +> npm install axios + + +- https://github.com/github/fetch - https://github.com/naugtur/xhr From 2646ee21a82ff3a70699dc24f6adf5de2a571acd Mon Sep 17 00:00:00 2001 From: endy Date: Mon, 7 Nov 2016 23:40:37 +0800 Subject: [PATCH 05/37] u --- readme.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/readme.md b/readme.md index a9c11df..eb80cfb 100644 --- a/readme.md +++ b/readme.md @@ -136,7 +136,13 @@ import 'mint-ui/lib/toast/style.css'; - [item-template.vue] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/) +## 5.vue-rx +- https://github.com/Reactive-Extensions/RxJS rx.js 官网 + +- https://mcxiaoke.gitbooks.io/rxdocs/content/Intro.html rx.js 中文 + +- https://github.com/vuejs/vue-rx 尤雨溪大神写的 vue-rx # vuejs 2 相关链结 From 902c3115e658adc2d39aba056f03c1fb0b9f902e Mon Sep 17 00:00:00 2001 From: endy Date: Mon, 7 Nov 2016 23:42:52 +0800 Subject: [PATCH 06/37] U --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index eb80cfb..27b5653 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # 教程主旨 - vue.js 2 官网讲解(以下是自我要求，小凡，不要你花时间在 看视频以及打代码上，那有多浪费时间，以及装B) + vue.js 2 官网讲解(以下是自我要求，小凡，不要你花时间在 看视频以及打代码上，那有多浪费时间) - 1.全程用 vue-cli 讲解 From c90307aac82b09ca4525c7c83f875bf34457334e Mon Sep 17 00:00:00 2001 From: endy Date: Tue, 8 Nov 2016 00:06:53 +0800 Subject: [PATCH 07/37] U --- readme.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 27b5653..dc16b41 100644 --- a/readme.md +++ b/readme.md @@ -138,11 +138,13 @@ import 'mint-ui/lib/toast/style.css'; ## 5.vue-rx -- https://github.com/Reactive-Extensions/RxJS rx.js 官网 +- [rx.js 官网] (https://github.com/Reactive-Extensions/RxJS) -- https://mcxiaoke.gitbooks.io/rxdocs/content/Intro.html rx.js 中文 +- [rx.js 官网示例] (https://github.com/Reactive-Extensions/RxJS/tree/master/examples) -- https://github.com/vuejs/vue-rx 尤雨溪大神写的 vue-rx +- [rx.js 设计指南] (https://github.com/Reactive-Extensions/RxJS/tree/master/doc/designguidelines) + +- [尤雨溪大神写的 vue-rx] (https://github.com/vuejs/vue-rx) # vuejs 2 相关链结 From 1a15c6b85c6e4cff8eb67565a73703d77b2a0a1a Mon Sep 17 00:00:00 2001 From: endy Date: Tue, 8 Nov 2016 00:09:20 +0800 Subject: [PATCH 08/37] U --- readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.md b/readme.md index dc16b41..c715a37 100644 --- a/readme.md +++ b/readme.md @@ -173,7 +173,9 @@ import 'mint-ui/lib/toast/style.css'; # 國外 ajax 主流插件 (vue-resource 作者不更新了) - https://github.com/mzabriskie/axios + > 尤大推荐 axios + > npm install axios From e3e5495c3585a566e4f9eb5bfc5eacbf408e3522 Mon Sep 17 00:00:00 2001 From: bhnddowinf Date: Tue, 29 Nov 2016 09:38:57 +0800 Subject: [PATCH 09/37] U --- vuex-learn.md | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/vuex-learn.md b/vuex-learn.md index 489319f..666ef04 100644 --- a/vuex-learn.md +++ b/vuex-learn.md @@ -49,6 +49,47 @@ vuex 是什么，怎么搭，以及 要有用什么角度来理解这个插件 > 3. actions (动作)，用户在 视图 上的输入引起状态的更改的可能方式。 +# 问题： vuex，action ，mutations 做什么用的？ + + +## (1) state + +- 中文翻译成「状态」，建议尽量用 state 这个单字来阅读 vuex 文檔，不然你脑海一直出现状态状态状态，反而会卡死。 + +- 整个 vuex 是一颗 独立的 state tree,规定：只允许 mutation ，才能改变 state + +```js + const state = { + count: 0 + } +``` + +## (2) mutation + + (2-1) 更改 Vuex 的 store 中的 state 的唯一方法是提交 mutation。 + + (2-2) mutation，会与插件 devtools 协作，当 mutation 有变化时, 就做 state 的纪录，来协助开发者 debug，所以这里的代码要求同步，以便插件来调试。 + + + (2-3) 来源：https://vuex.vuejs.org/zh-cn/mutations.html + + +## (3) Action 类似于 mutation，不同在于： + + (3-1) Action 提交的是 mutation(让 mutation 处理插件的调试工作 )，而不是直接变更 state 。 + + (3-2) Action 可以包含任意异步操作。 + + (3-3) 来源：https://vuex.vuejs.org/zh-cn/actions.html + + 小凡：mutation 的工作，要把 state 作响应式的处理，还要发讯息给devtool, 还要去操作 state , 有多重工作。 + + + + + + + > ### Vuex 观念 demo > - demo https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/vuex01.html > - 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v01_app.js From 03ee5cf11fe2ee3ae60def2ce381f2d410aafa91 Mon Sep 17 00:00:00 2001 From: bhnddowinf Date: Tue, 29 Nov 2016 09:42:49 +0800 Subject: [PATCH 10/37] U --- vuex-learn.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/vuex-learn.md b/vuex-learn.md index 666ef04..45c1af6 100644 --- a/vuex-learn.md +++ b/vuex-learn.md @@ -54,9 +54,9 @@ vuex 是什么，怎么搭，以及 要有用什么角度来理解这个插件 ## (1) state -- 中文翻译成「状态」，建议尽量用 state 这个单字来阅读 vuex 文檔，不然你脑海一直出现状态状态状态，反而会卡死。 +> 中文翻译成「状态」，建议尽量用 state 这个单字来阅读 vuex 文檔，不然你脑海一直出现状态状态状态，反而会卡死。 -- 整个 vuex 是一颗 独立的 state tree,规定：只允许 mutation ，才能改变 state +> 整个 vuex 是一颗 独立的 state tree,规定：只允许 mutation ，才能改变 state ```js const state = { @@ -66,23 +66,22 @@ vuex 是什么，怎么搭，以及 要有用什么角度来理解这个插件 ## (2) mutation - (2-1) 更改 Vuex 的 store 中的 state 的唯一方法是提交 mutation。 +> 更改 Vuex 的 store 中的 state 的唯一方法是提交 mutation。 - (2-2) mutation，会与插件 devtools 协作，当 mutation 有变化时, 就做 state 的纪录，来协助开发者 debug，所以这里的代码要求同步，以便插件来调试。 +> mutation，会与插件 devtools 协作，当 mutation 有变化时, 就做 state 的纪录，来协助开发者 debug，所以这里的代码要求同步，以便插件来调试。 - (2-3) 来源：https://vuex.vuejs.org/zh-cn/mutations.html +> 来源：https://vuex.vuejs.org/zh-cn/mutations.html ## (3) Action 类似于 mutation，不同在于： - (3-1) Action 提交的是 mutation(让 mutation 处理插件的调试工作 )，而不是直接变更 state 。 - - (3-2) Action 可以包含任意异步操作。 +> Action 提交的是 mutation(让 mutation 处理插件的调试工作 )，而不是直接变更 state 。 - (3-3) 来源：https://vuex.vuejs.org/zh-cn/actions.html +> Action 可以包含任意异步操作。 + +> 来源：https://vuex.vuejs.org/zh-cn/actions.html - 小凡：mutation 的工作，要把 state 作响应式的处理，还要发讯息给devtool, 还要去操作 state , 有多重工作。 From ac1d747b93315dfc4098d7cfa48b8087af0c6819 Mon Sep 17 00:00:00 2001 From: bhnddowinf Date: Tue, 29 Nov 2016 09:53:16 +0800 Subject: [PATCH 11/37] U --- vuex-learn.md | 61 +++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 54 insertions(+), 7 deletions(-) diff --git a/vuex-learn.md b/vuex-learn.md index 45c1af6..dbe26c9 100644 --- a/vuex-learn.md +++ b/vuex-learn.md @@ -49,10 +49,13 @@ vuex 是什么，怎么搭，以及 要有用什么角度来理解这个插件 > 3. actions (动作)，用户在 视图 上的输入引起状态的更改的可能方式。 -# 问题： vuex，action ，mutations 做什么用的？ +# 观念讲解 ： vuex，action ，mutations 做什么用的？ +> 同步：当函数执行时，就得到结果，那这个函数就是同步的。 +> 异步：当函数执行时，不会马上有结果，甚至有时间差的问题，那这个函数就是异步的。 -## (1) state + +## 观念讲解 ： vuex，action ，mutations 做什么用的？ (1) state > 中文翻译成「状态」，建议尽量用 state 这个单字来阅读 vuex 文檔，不然你脑海一直出现状态状态状态，反而会卡死。 @@ -64,33 +67,77 @@ vuex 是什么，怎么搭，以及 要有用什么角度来理解这个插件 } ``` -## (2) mutation +## 观念讲解 ： vuex，action ，mutations 做什么用的？(2) mutation > 更改 Vuex 的 store 中的 state 的唯一方法是提交 mutation。 -> mutation，会与插件 devtools 协作，当 mutation 有变化时, 就做 state 的纪录，来协助开发者 debug，所以这里的代码要求同步，以便插件来调试。 +> mutation，会与插件 devtools 协作，当 mutation 有变化时, 就做 state 的纪录，来协助开发者 debug，所以这里的函数要求同步，以便插件来调试。 > 来源：https://vuex.vuejs.org/zh-cn/mutations.html +``` js +// 建议把此区当做事件注册来看（同步不是马上执行的意思，而是在当函数执行时，就得到结果） +const mutations = { + increment(state) { + state.count++ + }, + decrement(state) { + state.count-- + } +} + +``` + +## 观念讲解 ： vuex，action ，mutations 做什么用的？(3) Action -## (3) Action 类似于 mutation，不同在于： +> 类似于 mutation，不同在于： > Action 提交的是 mutation(让 mutation 处理插件的调试工作 )，而不是直接变更 state 。 -> Action 可以包含任意异步操作。 +> Action 的函数可以包含任意异步操作，但永远只提交 mutation。 > 来源：https://vuex.vuejs.org/zh-cn/actions.html +```js +const actions = { + increment: ({ + commit + }) => commit('increment'), + decrement: ({ + commit + }) => commit('decrement'), + incrementIfOdd({ + commit, + state + }) { + if ((state.count + 1) % 2 === 0) { + commit('increment') + } + }, + incrementAsync({ + commit + }) { + return new Promise((resolve, reject) => { + setTimeout(() => { + commit('increment') + resolve() + }, 1000) + }) + } + +``` -> ### Vuex 观念 demo +### Vuex 观念 demo + > - demo https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/vuex01.html + > - 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v01_app.js > - 源码 https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/v01.vue From fb18157f58a60f8c6adfceed01e1c08f3d759aa6 Mon Sep 17 00:00:00 2001 From: bhnddowinf Date: Tue, 29 Nov 2016 09:57:41 +0800 Subject: [PATCH 12/37] U --- vuex-learn.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/vuex-learn.md b/vuex-learn.md index dbe26c9..02da6b8 100644 --- a/vuex-learn.md +++ b/vuex-learn.md @@ -100,6 +100,7 @@ const mutations = { > 来源：https://vuex.vuejs.org/zh-cn/actions.html ```js +// 建议把此区当做事件注册来看, action 也不是马上就执行，只向 mutation 做 commit 的指令。 const actions = { increment: ({ @@ -116,6 +117,8 @@ const actions = { commit('increment') } }, + + // 如果 action 有异步的要求时，可以参考下列的写法，对 mutation 提出 commit 。 incrementAsync({ commit }) { @@ -129,6 +132,20 @@ const actions = { ``` +## 观念讲解 ： vuex，action ，mutations 做什么用的？(4) getters + +> 请当做 计算属性来写，所有的 getter, 接收 完整的state树，做第一个参数 + +``` js +const getters = { + evenOrOdd: state => state.count % 2 === 0 ? '偶数' : '奇数' +} + +``` + + + + From abc7ba6514427f35e451f82f10b11abc8cc709fb Mon Sep 17 00:00:00 2001 From: bhnddowinf Date: Tue, 29 Nov 2016 10:02:24 +0800 Subject: [PATCH 13/37] U --- vuex-learn.md | 47 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/vuex-learn.md b/vuex-learn.md index 02da6b8..bd4b2d8 100644 --- a/vuex-learn.md +++ b/vuex-learn.md @@ -51,8 +51,11 @@ vuex 是什么，怎么搭，以及 要有用什么角度来理解这个插件 # 观念讲解 ： vuex，action ，mutations 做什么用的？ -> 同步：当函数执行时，就得到结果，那这个函数就是同步的。 -> 异步：当函数执行时，不会马上有结果，甚至有时间差的问题，那这个函数就是异步的。 +> 同步： +> 当函数执行时，就得到结果，那这个函数就是同步的。 + +> 异步： +> 当函数执行时，不会马上有结果，甚至有时间差的问题，那这个函数就是异步的。 ## 观念讲解 ： vuex，action ，mutations 做什么用的？ (1) state @@ -143,9 +146,49 @@ const getters = { ``` +## 观念讲解 ： vuex，action ，mutations 做什么用的？(5) (Vuex 实例依 state, mutations, actions,and getters 组合) + +```js +// 小凡 (Vuex 实例依 state, mutations, actions,and getters 组合) +export default new Vuex.Store({ + state, + getters, + actions, + mutations +}) +``` + +## 观念讲解 ： vuex，action ，mutations 做什么用的？(6) .vue 使用 mapGetters, mapActions，操作 Vuex. +```js + + + +``` From 80c91be272fefdbc54d367842ed0d27ad0582f8d Mon Sep 17 00:00:00 2001 From: bhnddowinf Date: Tue, 29 Nov 2016 10:04:03 +0800 Subject: [PATCH 14/37] U --- vuex-learn.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/vuex-learn.md b/vuex-learn.md index bd4b2d8..c5f0569 100644 --- a/vuex-learn.md +++ b/vuex-learn.md @@ -160,6 +160,8 @@ export default new Vuex.Store({ ## 观念讲解 ： vuex，action ，mutations 做什么用的？(6) .vue 使用 mapGetters, mapActions，操作 Vuex. +> 前面的工作做好了，到了 .vue , 就只是下指令，单纯执行 geter，actios + ```js