diff --git a/learn-vue-cli/vue-cli.md b/learn-vue-cli/vue-cli.md new file mode 100644 index 0000000..985e364 --- /dev/null +++ b/learn-vue-cli/vue-cli.md @@ -0,0 +1,93 @@ +# 1. vue-cli 简介 + +简单介绍 + +[Github / vue-cli](https://github.com/vuejs/vue-cli) + +[youtube / vue-cli 简介，与 套用 mint-ui demo (台湾小凡) ](https://youtu.be/AwjfG5T3vO4) + +[BiliBili / vue-cli 简介，与 套用 mint-ui demo (台湾小凡)](http://www.bilibili.com/video/av6828349/) + +# 2. vue.js 2 vue-cli how to start / 如何使用 vue-cli + +vue.js2 vue-cli 怎么搭起来的教学, 请依序输入 + + $ sudo npm install -g vue-cli + + $ vue init webpack my-project + + $ cd my-project + + $ npm install + + $ npm run dev + +# 3. vue-cli 使用 Mint-UI, 入门篇 + +[Github / mint-UI for vuejs2 移动端 UI 库 ](http://mint-ui.github.io/docs/#!/zh-cn2) + +安装mint-ui, 指令如下： + + $ npm install mint-ui -save + +.vue script + + // 本人重 vue 全家桶的讲解，怎么使用 ui库，跟此目标不符 + // 所有的 ui 库，使用原理，差不多，本示例， + // 只讲一点点 ui 知识点，让你看个几分钟，就自已抓来用… + + + // -- mint-ui start + // http://mint-ui.github.io/docs/#!/zh-cn2/button + // /my-project/node_modules/mint-ui/lib/button + import mtButton from 'mint-ui/lib/button'; + import 'mint-ui/lib/button/style.css'; + + // http://mint-ui.github.io/docs/#!/zh-cn2/toast + // /my-project/node_modules/mint-ui/lib/toast + import { Toast } from 'mint-ui'; + import 'mint-ui/lib/toast/style.css'; + // -- mint-ui end + + +### mint-ui 怎么用？ + + [demo / mint-ui ](https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/mint_ui1.html) + + [源码 / mint_ui1.html](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.html) + + [源码 / mint_ui1.js](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.js) + + [源码 / mint_ui1v.vue](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1v.vue) + +**补充 mint_UI 点击问题修正** + +- 关于事件绑定 +- 在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 __.native__ 修饰符： + +```js + Click Me +``` + +- 从易用性的角度出发，我们对 __Button__ 组件进行了处理，使它可以监听 __click__ 事件： + +```js + Click Me +``` + +- 但是对于其他组件，还是需要添加 __.native__ 修饰符。 + + +- 来源： http://mint-ui.github.io/docs/#!/zh-cn2 + +# 4.多页应用 + +因为讲解 npm run dev , npm run build 这两种多页设置，所以会讲这么40分钟这么久。自已有经验的话，看代码来抄，比较快，真的是初学者，还是建议看完吧，没有人会讲这么细。 + +下例视频，内容都一样 + +[视频 / vue-cli 多页应用(youtube)](https://youtu.be/J-0Vl68uKyY) + +[视频 / vue-cli 多页应用(百度云)](http://pan.baidu.com/s/1pL71opX) + +[视频 / vue-cli 多页应用(http://www.bilibili.com/)](http://www.bilibili.com/video/av6805317/) \ No newline at end of file diff --git a/vuejs2-form.md b/learn-vue-official-website/vuejs2-form.md similarity index 58% rename from vuejs2-form.md rename to learn-vue-official-website/vuejs2-form.md index 2d4206e..8054153 100644 --- a/vuejs2-form.md +++ b/learn-vue-official-website/vuejs2-form.md @@ -1,14 +1,16 @@ -# v-model 特性如下： (1) +# 1. v-model 特性 -- v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。 -- v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。 -- 严格模式下的Vuex，在属于 Vuex 的 state （状态）上使用 v-model时会比较棘手(就是 vuex 不爱 v-model) +v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。 +v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。 -# 文本 (2) -## VUEX +严格模式下的Vuex，在属于 Vuex 的 state （状态）上使用 v-model时会比较棘手(就是 vuex 不爱 v-model) + + +# 2. 文本 textbox +### VUEX ```js @@ -41,14 +43,14 @@ } ``` -## 不用 vuex +### 不用 vuex ```js

Message is: {{ dom }}

``` -###修饰符 .lazy +#### 修饰符 .lazy - 在默认情况下， v-model 在 input 事件中同步输入框的值与数据 - 但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： @@ -57,7 +59,7 @@ ``` -###修饰符 .number +#### 修饰符 .number - 如果想自动将用户的输入值转为 Number 类型 - （如果原值的转换结果为 NaN 则返回原值） - 可以添加一个修饰符 number 给 v-model 来处理输入值： @@ -68,7 +70,7 @@ - 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 -###修饰符 .trim +#### 修饰符 .trim - 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入： @@ -77,23 +79,23 @@ ``` -# 多行文本 (3) +# 3. 多行文本 textarea -- 在文本区域插值( ) 并不会生效，应用 v-model 来代替 + 在文本区域插值( ) 并不会生效，应用 v-model 来代替 ```js -Multiline message is: -

{{ dom }}

-
- + Multiline message is: +

{{ dom }}

+
+ ``` -# 单勾框 (4) +# 4. 单勾框 checkbox ```js - - + + ``` - 特别： @@ -103,31 +105,31 @@ - 并且这个属性的值可以不是字符串。 ```js - - + + ``` -# 多勾框 (5) -## data，要有 数组 [] +# 5. 多勾框 checkbox +### data，要有 数组 [] ```js - - - - - - -
-Checked names: {{ dom }} - - -new Vue({ - el: '...', - data: { - dom: [] - } -}) + + + + + + +
+ Checked names: {{ dom }} + + + new Vue({ + el: '...', + data: { + dom: [] + } + }) ``` - 特别： @@ -138,98 +140,98 @@ new Vue({ ```js - -// 当选中时 -vm.toggle === vm.a -// 当没有选中时 -vm.toggle === vm.b + + // 当选中时 + vm.toggle === vm.a + // 当没有选中时 + vm.toggle === vm.b ``` -# 单选框 (6) +# 6. 单选框 radio ```js - - -
- - -
-dom: {{ dom }} + + +
+ + +
+ dom: {{ dom }} ``` -- 特别： -- 对于单选按钮，勾选框及选择列表选项 -- v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）： -- 但是有时我们想绑定 value 到 Vue 实例的一个动态属性上 -- 这时可以用 v-bind 实现 -- v-bind:value="vue data value" -- 并且这个属性的值可以不是字符串。 - -```js - - - - -// 当选中时 -vm.pick === vm.a -```js +特别： +对于单选按钮，勾选框及选择列表选项 +- v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）： +- 但是有时我们想绑定 value 到 Vue 实例的一个动态属性上 +- 这时可以用 v-bind 实现 +- v-bind:value="vue data value" +- 并且这个属性的值可以不是字符串。 +``` + + + + // 当选中时 + vm.pick === vm.a +``` +# 7. 单选列表 select +```js + + dom: {{ dom }} +``` +特别： -# 单选列表(7) -```js - -dom: {{ dom }} -``` +但是有时我们想绑定 value 到 Vue 实例的一个动态属性上 -- 特别： -- 但是有时我们想绑定 value 到 Vue 实例的一个动态属性上 - 这时可以用 v-bind 实现 + - v-bind:value="vue data value" + - 并且这个属性的值可以不是字符串。 ```js - - + + ``` --------------------------- - - -// 当选中时 -typeof vm.selected // -> 'object' -vm.selected.number // -> 123 - +``` + + // 当选中时 + typeof vm.selected // -> 'object' + vm.selected.number // -> 123 +``` -# 多选列表(8) -## data （绑定到一个数组） +# 8. 多选列表 select +### data （绑定到一个数组） ```js @@ -255,12 +257,12 @@ new Vue({ ``` -# 日期 vue-flatpickr (9)： +# 9. 日期 plugins / vue-flatpickr -## https://github.com/jrainlau/vue-flatpickr +### https://github.com/jrainlau/vue-flatpickr npm install vue-flatpickr -## .vue script +### .vue script ```js ``` -## .vue template +### .vue template ```js ``` -## Data binding +### Data binding ```js The tag could be use as a normal tag diff --git a/vue-router-learn.md b/learn-vue-router/vue-router-learn.md similarity index 100% rename from vue-router-learn.md rename to learn-vue-router/vue-router-learn.md diff --git a/vuex-learn.md b/learn-vuex/vuex-learn.md similarity index 51% rename from vuex-learn.md rename to learn-vuex/vuex-learn.md index 489319f..9f4e068 100644 --- a/vuex-learn.md +++ b/learn-vuex/vuex-learn.md @@ -5,9 +5,7 @@ - https://github.com/vuejs/vuex -![vuex flow](http://vuefe.cn/vuex/images/flow.png) -![vuex flow 2](http://vuefe.cn/vuex/images/vuex.png) # 1.如何安装 vuex (限定开发环境为 vue-cli) @@ -49,8 +47,159 @@ vuex 是什么，怎么搭，以及 要有用什么角度来理解这个插件 > 3. actions (动作)，用户在 视图 上的输入引起状态的更改的可能方式。 -> ### Vuex 观念 demo +# 观念讲解 ： vuex，action ，mutations 做什么用的？ + +> 在讲解答案之前，先建立一个观念，vuex是一个模组，而这个模组，有 6个流程（见以下内容），请依序看完，才能对 vuex 的做基本的了解。仅对 action ，mutations这两个单字去拆解，你还是写不出 vuex 模组的配置。 + +> 同步： +> 当函数执行时，就得到结果，那这个函数就是同步的。 + +> 异步： +> 当函数执行时，不会马上有结果，甚至有时间差的问题，那这个函数就是异步的。 + + +## 观念讲解 ： vuex，action ，mutations 做什么用的？ (1) state + +> 中文翻译成「状态」，建议尽量用 state 这个单字来阅读 vuex 文檔，不然你脑海一直出现状态状态状态，反而会卡死。 + +> 整个 vuex 是一颗 独立的 state tree,规定：只允许 mutation ，才能改变 state + +```js + const state = { + count: 0 + } +``` + +## 观念讲解 ： vuex，action ，mutations 做什么用的？(2) mutation + +> 更改 Vuex 的 store 中的 state 的唯一方法是提交 mutation。 + +> 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 + +> 类似于 mutation，不同在于： + +> Action 提交的是 mutation(让 mutation 处理插件的调试工作 )，而不是直接变更 state 。 + +> Action 的函数可以包含任意异步操作，但永远只提交 mutation。 + +> 来源：https://vuex.vuejs.org/zh-cn/actions.html + +```js +// 建议把此区当做事件注册来看, action 也不是马上就执行，只向 mutation 做 commit 的指令。 + +const actions = { + increment: ({ + commit + }) => commit('increment'), + decrement: ({ + commit + }) => commit('decrement'), + incrementIfOdd({ + commit, + state + }) { + if ((state.count + 1) % 2 === 0) { + commit('increment') + } + }, + + // 如果 action 有异步的要求时，可以参考下列的写法，对 mutation 提出 commit 。 + incrementAsync({ + commit + }) { + return new Promise((resolve, reject) => { + setTimeout(() => { + commit('increment') + resolve() + }, 1000) + }) + } + +``` + +## 观念讲解 ： vuex，action ，mutations 做什么用的？(4) getters + +> 请当做 计算属性来写，所有的 getter, 接收 完整的state树，做第一个参数 + +``` js +const getters = { + evenOrOdd: state => state.count % 2 === 0 ? '偶数' : '奇数' +} + +``` + +## 观念讲解 ： 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. + +> 前面的工作做好了，到了 .vue , 就只是下指令，单纯执行 getter，action + +```js + + + + + +``` + + + + + +### 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 diff --git a/my-project/build/webpack.base.conf.js b/my-project/build/webpack.base.conf.js index 387ff29..fa169a2 100644 --- a/my-project/build/webpack.base.conf.js +++ b/my-project/build/webpack.base.conf.js @@ -14,7 +14,8 @@ module.exports = { shopping_cart: './src/vuex-demo/shopping-cart/app.js', // shopping_cart todomvc: './src/vuex-demo/todomvc/app.js', // todomvc mint_ui1: './src/vuex-demo/mint_ui1.js', // mint_ui1.js - treeview: './src/vuejs2-demo/treeview/app.js' // treeview.js + treeview: './src/vuejs2-demo/treeview/app.js', // treeview.js + iscomponent:'./src/vuejs2-demo/is-component/main.js' // iscomponent }, output: { path: config.build.assetsRoot, diff --git a/my-project/build/webpack.dev.conf.js b/my-project/build/webpack.dev.conf.js index 7ce7a9c..a575cb8 100644 --- a/my-project/build/webpack.dev.conf.js +++ b/my-project/build/webpack.dev.conf.js @@ -106,7 +106,14 @@ module.exports = merge(baseWebpackConfig, { chunks: ['treeview'], //需要引入的chunk，不配置就会引入所有页面的资源 }), // --------多頁 end - + // --------多頁 start + new HtmlWebpackPlugin({ + filename: 'iscomponent.html', + template: 'src/vuejs2-demo/is-component/index.html', + inject: true, + chunks: ['iscomponent'], //需要引入的chunk，不配置就会引入所有页面的资源 + }), + // --------多頁 end ] }) diff --git a/my-project/build/webpack.prod.conf.js b/my-project/build/webpack.prod.conf.js index 6c5ce6d..5598c36 100644 --- a/my-project/build/webpack.prod.conf.js +++ b/my-project/build/webpack.prod.conf.js @@ -210,7 +210,20 @@ var webpackConfig = merge(baseWebpackConfig, { chunksSortMode: 'dependency' }), //----------多页 end - // + //----------多页 start + new HtmlWebpackPlugin({ + filename: '../dist/iscomponent.html', + template: 'src/vuejs2-demo/is-component/index.html', + inject: true, + minify: { + removeComments: true, + collapseWhitespace: true, + removeAttributeQuotes: true + }, + chunks: ['manifest', 'vendor', 'iscomponent'], //需要引入的chunk，不配置就会引入所有页面的资源 + chunksSortMode: 'dependency' + }), + //----------多页 end // // diff --git a/my-project/src/App.vue b/my-project/src/App.vue index 2205bd3..020cbe7 100644 --- a/my-project/src/App.vue +++ b/my-project/src/App.vue @@ -10,21 +10,76 @@

VueJs 豪哥的QQ群：364912432

第01章：vue-cli

第02章：Vuex

第03章：vue.js 2 示例区

@@ -53,7 +108,7 @@ body { #app { color: #2c3e50; margin-top: -100px; - max-width: 600px; + max-width: 900px; font-family: Source Sans Pro, Helvetica, sans-serif; text-align: center; } @@ -61,6 +116,8 @@ body { #app a { color: #42b983; text-decoration: none; + + } .logo { @@ -70,5 +127,17 @@ body { li { list-style-type: none; + text-align:left; + line-height:20px; +} +.right { + /* + text-align: left; + float: left; + */ +} +.list-item { + display: inline-block; + width:500px; } diff --git a/my-project/src/vuejs2-demo/is-component/App.vue b/my-project/src/vuejs2-demo/is-component/App.vue new file mode 100644 index 0000000..fe865b2 --- /dev/null +++ b/my-project/src/vuejs2-demo/is-component/App.vue @@ -0,0 +1,24 @@ + + + \ No newline at end of file diff --git a/my-project/src/vuejs2-demo/is-component/components/a.vue b/my-project/src/vuejs2-demo/is-component/components/a.vue new file mode 100644 index 0000000..17f9a59 --- /dev/null +++ b/my-project/src/vuejs2-demo/is-component/components/a.vue @@ -0,0 +1,14 @@ + + diff --git a/my-project/src/vuejs2-demo/is-component/components/b.vue b/my-project/src/vuejs2-demo/is-component/components/b.vue new file mode 100644 index 0000000..2f284a4 --- /dev/null +++ b/my-project/src/vuejs2-demo/is-component/components/b.vue @@ -0,0 +1,14 @@ + + diff --git a/my-project/src/vuejs2-demo/is-component/components/c.vue b/my-project/src/vuejs2-demo/is-component/components/c.vue new file mode 100644 index 0000000..daabef2 --- /dev/null +++ b/my-project/src/vuejs2-demo/is-component/components/c.vue @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/my-project/src/vuejs2-demo/is-component/components/footer.vue b/my-project/src/vuejs2-demo/is-component/components/footer.vue new file mode 100644 index 0000000..971cf6f --- /dev/null +++ b/my-project/src/vuejs2-demo/is-component/components/footer.vue @@ -0,0 +1,26 @@ + + \ No newline at end of file diff --git a/my-project/src/vuejs2-demo/is-component/components/header.vue b/my-project/src/vuejs2-demo/is-component/components/header.vue new file mode 100644 index 0000000..3dac6c3 --- /dev/null +++ b/my-project/src/vuejs2-demo/is-component/components/header.vue @@ -0,0 +1,19 @@ + + diff --git a/my-project/src/vuejs2-demo/is-component/index.html b/my-project/src/vuejs2-demo/is-component/index.html new file mode 100644 index 0000000..7749de1 --- /dev/null +++ b/my-project/src/vuejs2-demo/is-component/index.html @@ -0,0 +1,11 @@ + + + + + Tree View + + +
+ + + diff --git a/my-project/src/vuejs2-demo/is-component/main.js b/my-project/src/vuejs2-demo/is-component/main.js new file mode 100644 index 0000000..316037d --- /dev/null +++ b/my-project/src/vuejs2-demo/is-component/main.js @@ -0,0 +1,8 @@ + +import Vue from 'vue' +import App from './App.vue' + +new Vue({ + el: '#app', + render: h => h(App) +}) diff --git a/my-project/src/vuejs2-demo/is-component/view/Home.vue b/my-project/src/vuejs2-demo/is-component/view/Home.vue new file mode 100644 index 0000000..f044710 --- /dev/null +++ b/my-project/src/vuejs2-demo/is-component/view/Home.vue @@ -0,0 +1,63 @@ + + \ No newline at end of file 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', }] }] }] diff --git a/my-project/src/vuex-demo/mint_ui1v.vue b/my-project/src/vuex-demo/mint_ui1v.vue index 95e2404..1d08691 100644 --- a/my-project/src/vuex-demo/mint_ui1v.vue +++ b/my-project/src/vuex-demo/mint_ui1v.vue @@ -2,7 +2,9 @@

{{ msg }}

- mint Button demo (无法执行) + mint Button demo (@click) + + mint Button demo (@click.native) 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 ] diff --git a/readme.md b/readme.md index 228311c..a52ae44 100644 --- a/readme.md +++ b/readme.md @@ -1,227 +1,153 @@ # 教程主旨 - vue.js 2 官网讲解(以下是自我要求，小凡，不要你花时间在 看视频以及打代码上，那有多浪费时间，以及装B) +vue.js 2 官网讲解(以下是自我要求，小凡，不要你花时间在 看视频以及打代码上，那有多浪费时间) -- 1.全程用 vue-cli 讲解 +- 全程用 vue-cli 讲解 -- 2.所有代码在 https://github.com/bhnddowinf/vuejs2-learn ，你 copy 改改，就好。 +- 所有代码在 https://github.com/bhnddowinf/vuejs2-learn ，你 copy 改改，就好。 -- 3.所有代码 demo 在 https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/index.html +- 所有代码 demo 在 https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/index.html - 本人用 yarn +- 個人使用 yarn -- 4.所有章节视频会在 Youtube, bilibili.com +- 所有章节视频会在 Youtube, bilibili.com 看到 -- 百度云上传有所管制(锁1g，锁 影片)。 +- 百度云上传有所管制(锁1g，锁 mp4, mov，難以上傳)。 -# 系列教程 - -## 1.vue-cli - -### 1-1.vue-cli 简介 - -- 简单介绍 - -> [vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects] (https://github.com/vuejs/vue-cli) - -- [视频：vue-cli 简介，与 套用 mint-ui demo (youtube) ] (https://youtu.be/AwjfG5T3vO4) - -- [视频：vue-cli 简介，与 套用 mint-ui demo (bilibili)] (http://www.bilibili.com/video/av6828349/) - -#### vue.js 2 vue-cli how to start - -vue.js2 vue-cli 怎么搭起来的教学 - -``` js - sudo npm install -g vue-cli - - vue init webpack my-project - - cd my-project - - npm install - - npm run dev - -``` -> [mint-UI for vuejs2] (http://mint-ui.github.io/docs/#!/zh-cn2) 移动端 UI 库 - - -#### 安装 - -``` js - -npm install mint-ui -save - -``` - -``` js -// 本人重 vue 全家桶的讲解，怎么使用 ui库，跟此目标不符 - -// 所有的 ui 库，使用原理，差不多，本示例， - -// 只讲一点点 ui 知识点，让你看个几分钟，就自已抓来用… - - -// -- mint-ui start -// http://mint-ui.github.io/docs/#!/zh-cn2/button -// /my-project/node_modules/mint-ui/lib/button -import mtButton from 'mint-ui/lib/button'; -import 'mint-ui/lib/button/style.css'; - -// http://mint-ui.github.io/docs/#!/zh-cn2/toast -// /my-project/node_modules/mint-ui/lib/toast -import { Toast } from 'mint-ui'; -import 'mint-ui/lib/toast/style.css'; -// -- mint-ui end - -``` +# 豪哥的QQ群 +小弟在互联网有一个爱好前端的朋友，网名：豪情，不断贡献自已的知识分享最先进的前端资讯，带领着很多人学习前端。 -#### mint-ui 怎么用？（个人实测…有坑，但还是可以用） +小弟有幸能结交豪哥，以下是中国最专业的前端群, 仅供参考. -- [mint-ui demo] (https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/mint_ui1.html) +- Vuejs-2群 631586939 -- [源码：mint_ui1.html] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.html) +- JAVA技术交流群 145381037 -- [源码：mint_ui1.js] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.js) +- Python技术交流群 130705066 -- [源码：mint_ui1v.vue] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1v.vue) +- Hybrid App交流群 498173484 +- PHP技术交流群 82254462 -### 1-2.多页应用 +- UI设计么么哒群 321173051 -- 因为讲解 npm run dev , npm run build 这两种多页设置，所以会讲这么40分钟这么久。自已有经验的话，看代码来抄，比较快，真的是初学者，还是建议看完吧，没有人会讲这么细。 +- Go语言技术交流群 336195657 -- vuejs2 多页应用讲解https://github.com/bhnddowinf/vuejs2-learn +- ASP.NET C#技术交流群 461614624 - 使用 vue-cli 一定用到的多页应用 +- 安卓IOS混合开发群 415074410 - 教你怎么跑 npm run dev, npm run build +- JS前端开发跳板1群　492107297 -> [视频: vue-cli 多页应用(youtube)](https://youtu.be/J-0Vl68uKyY) -> [视频：vue-cli 多页应用(百度云)](http://pan.baidu.com/s/1pL71opX) -> [视频：vue-cli 多页应用(http://www.bilibili.com/)](http://www.bilibili.com/video/av6805317/) -## 2.Vuex +#台湾小凡 -### 2-1.[vuex 台湾小凡教程文档] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/vuex-learn.md) +![](https://github.com/bhnddowinf/vuejs2-learn/blob/master/me.jpeg?raw=true) + 1. 目前在台湾的中小企业 + 2. 担任资讯研发部副理 + 3. 手机：0922-731455 + 4. 信箱：bhnddowinf@yahoo.com.tw -## 3.Vue-Router +## 台湾小凡的专长： -### 3-1.[vue-router 台湾小凡教程文档] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/vue-router-learn.md) + 1. 云端伺服器建置 + 2. 网站开发 + 3. 企业资源规划系统 -# 教程目的 -- 网路上有很多 VUE 综合应用的视频，但大部份的视频 ，都当你已经了解官网 - 所以讲的节奏难免偏快。 - 此视频，以官网为重，将官网的观念，以视频搭配代码，实际演示。 - 如果官网有看不懂的地方，比对一下，视频跟代码，就会了解了。 - 减少你摸索的时间。 +## License -## 4.vue.js2 demo + [MIT](http://opensource.org/licenses/MIT) -> treeview +## Donate -- [Tree View Demo] (https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/treeview.html) + 小弟想把 vue.js 教学的视频，做的更好 + 但现实上，这需要很多的时间以及家人的支持 -- [app.js] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/app.js) + [赞助一点给作者](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=77E3EEHBD3N5C) -- [app.vue] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/app.vue) + ![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/wechat_qrcode.png) -- [index.html] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/index.html) -- [item-template.vue] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/) +# 系列教程 +### 1. vue-cli -# vuejs 2 相关链结 +[台湾小凡教程文档 / vue-cli](https://github.com/bhnddowinf/vuejs2-learn/blob/master/learn-vue-cli/vue-cli.md) -- [台湾小凡 vuejs2demo] (https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/index.html) 台湾小凡 vue.js2 的 demo +### 2. vue official website -- [vue.js 2 官网] (http://vuejs.org) 正式 vue.js2 尤雨溪大神 官方网站 +[台湾小凡教程文档 / 讲解 form 篇](https://github.com/bhnddowinf/vuejs2-learn/blob/master/learn-vue-official-website/vuejs2-form.md) -- [http://vue.sike.io vue.js 2 双语网站] (http://vue.sike.io) vue2 全家桶双语网站 +vue.js2 demo - Tree View -- [http://vuefe.cn vue.js 2 中文网站] (http://vuefe.cn) vue2 全家桶中文网站 +- [示例 / Tree View for vue.js2](https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/treeview.html) -- [http://vuefe.cn/about/ 贡献翻译群] (http://vuefe.cn/about/) vue2 全家桶中文网站翻译群，衷心感谢，贡献心力制作 +- [源代码 / app.js](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/app.js) -- [从 Vue1.x 迁移] (http://vuefe.cn/guide/migration.html) 怎么从 vue1 升级至 vue2，升级指南 +- [源代码 / app.vue](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/app.vue) -- [从Vue Router 0.7.x迁移] (http://vuefe.cn/guide/migration-vue-router.html) vue-router 升级指南 +- [源代码 / index.html](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/index.html) -- [vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects] (https://github.com/vuejs/vue-cli) vue-cli +- [源代码 / item-template.vue](https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuejs2-demo/treeview/) -- [最完整 vue 資源合集] (https://github.com/vuejs/awesome-vue) awesome-vue -- [vuex 原文文档] (http://vuex.vuejs.org/en/index.html) 尤雨溪大神 -- [mint-UI for vuejs2] (http://mint-ui.github.io/docs/#!/zh-cn2) 移动端 UI 库 +### 3. Vuex -# 國外 ajax 主流插件 (vue-resource 作者不更新了) +[台湾小凡教程文档 / vuex ](https://github.com/bhnddowinf/vuejs2-learn/blob/master/learn-vuex/vuex-learn.md) -- https://github.com/github/fetch -- https://github.com/mzabriskie/axios +### 4. Vue-Router -- https://github.com/naugtur/xhr +[ 台湾小凡教程文档 / vue-router ](https://github.com/bhnddowinf/vuejs2-learn/blob/master/learn-vue-router/vue-router-learn.md) +### 5.vue-rx +- [rx.js 官网](https://github.com/Reactive-Extensions/RxJS) -# 豪哥的QQ群 +- [rx.js 官网 / 示例](https://github.com/Reactive-Extensions/RxJS/tree/master/examples) -- 小弟在互联网有一个爱好前端的朋友，网名：豪情，不断贡献自已的知识分享最先进的前端资讯，带领着很多人学习前端。 +- [文章 / rx.js 设计指南](https://github.com/Reactive-Extensions/RxJS/tree/master/doc/designguidelines) -- 小弟有幸能结交豪哥，以下是中国最专业的前端群, 仅供参考. +- [Github / vue-rx](https://github.com/vuejs/vue-rx) -> * vuejs 364912432 -> * Angularjs 238251402 -> * React 530415177 -> * Nodejs 422910907 -> * JAVA高级开发群 145381037 -> * Python技术交流 130705066 -> * Hybrid App交流群 498173484 -> * PHP技术交流群 82254462 -> * UI设计么么哒群 321173051 -> * Go语言技术交流群 336195657 -> * ASP.NET C#技术交流群 461614624 -> * 安卓IOS混合开发群 415074410 +### 6. vue.js 2 相关链结 - +- [台湾小凡 vue.js2 / demo](https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/index.html) +- [vue.js2 官方网站](http://vuejs.org) -#台湾小凡 +- [vue.js2 网站 / vue.sike.io](http://vue.sike.io) -![](https://github.com/bhnddowinf/vuejs2-learn/blob/master/me.jpeg?raw=true) +- [vue.js2 网站 / vuefe.cn](http://vuefe.cn) - 目前在台湾的中小企业 +- [vue.js2 网站 / vuefe.cn / 贡献翻译群](http://vuefe.cn/about/) - 担任资讯研发部副理 +- [文章 / 从 Vue1.x 迁移至 vue2](http://vuefe.cn/guide/migration.html) - 手机：0922-731455 +- [文章 / 从Vue Router 0.7.x迁移至 vue2](http://vuefe.cn/guide/migration-vue-router.html) - 信箱：bhnddowinf@yahoo.com.tw +- [Github / vue-cli / Simple CLI for scaffolding Vue.js projects](https://github.com/vuejs/vue-cli) -## 台湾小凡的专长： +- [Github / awesome-vue 最完整 vue 資源合集](https://github.com/vuejs/awesome-vue) - 1.云端伺服器建置 - 2.网站开发 - 3.企业资源规划系统 +- [Github / vuex](http://vuex.vuejs.org/en/index.html) +- [Github / mint-UI for vuejs2](http://mint-ui.github.io/docs/#!/zh-cn2) -## License +### 7. 國外 ajax 主流插件 (vue-resource 作者不更新了) - [MIT](http://opensource.org/licenses/MIT) +- [Github / axios 尤大推荐](https://github.com/mzabriskie/axios) -## Donate +- [Github / fetch ](https://github.com/github/fetch) - 小弟想把 vue.js 教学的视频，做的更好 - 但现实上，这需要很多的时间以及家人的支持 +- [Github / xhr](https://github.com/naugtur/xhr) - →→→→[请大力的鼓励作者] (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=77E3EEHBD3N5C) +- [Github / reqwest](https://github.com/ded/reqwest) - ![](https://github.com/bhnddowinf/vuejs-learn/blob/master/03/wechat_qrcode.png)