├── .gitattributes ├── .gitignore ├── 01-ES6补充 ├── 01-ES6补充.md ├── 01-块级作用域.html ├── 02-块级作用域(ES5有闭包-没闭包-let对比).html ├── 03-const的使用.html ├── 04-对象字面量的增强写法.html ├── 05-箭头函数的基本使用.html ├── 06-箭头函数参数和返回值.html ├── 07-箭头函数this使用.html └── images │ ├── 1.1.2-1.png │ └── 1.2-1.png ├── 02-HelloVue ├── 01-HelloVuejs.html ├── 02-HelloVue.md ├── 02-vue列表展示.html ├── 03-vue案例-计数器.html ├── 04-vue的template.html └── images │ └── 2.2.1-1.png ├── 02-webpack的配置 ├── package-lock.json ├── package.json ├── src │ ├── info.js │ ├── main.js │ └── mathUtils.js └── webpack.config.js ├── 03-插值操作 ├── 01-Mustache语法.html ├── 02-v-once指令的使用.html ├── 03-v-html指令的使用.html ├── 03-插值操作.md ├── 04-v-text指令的使用.html ├── 05-v-pre指令的使用.html ├── 06-v-cloak指令的使用.html └── images │ ├── 3.3-1.png │ ├── 3.4-1.png │ ├── 3.5-1.png │ └── 3.6-1.gif ├── 04-动态绑定属性 ├── 01-v-bind的基本使用.html ├── 02-v-bind动态绑定class(对象语法).html ├── 03-v-bind动态绑定class(数组语法).html ├── 04-作业(v-for和v-bind的结合).html ├── 04-动态绑定属性.md ├── 05-v-bind动态绑定style(对象语法).html ├── 06-v-bind动态绑定style(数组语法).html └── images │ ├── 4.1-1.gif │ ├── 4.2-1.gif │ ├── 4.3-2.png │ └── 4.4-1.gif ├── 05-计算属性与侦听器 ├── 01-计算属性的基本使用 copy.html ├── 02-计算属性的复杂使用.html ├── 03-计算属性的setter和getter.html ├── 04-计算属性和methods的对比.html ├── 05-计算属性与侦听器.md └── images │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.4-1.png │ ├── 5.4-2.png │ ├── 5.png │ ├── 6.png │ └── 7.png ├── 06-事件监听 ├── 01-v-on的基本使用.html ├── 02-v-on的参数传递.html ├── 03-v-on的修饰符.html ├── 06-事件监听.md └── images │ └── 6.2-1.png ├── 07-条件判断 ├── 01-v-if的使用.html ├── 02-登录切换简单示例.html ├── 03-v-show的使用.html ├── 07-条件判断.md └── images │ ├── 7.1-1.png │ └── 7.2-1.gif ├── 08-遍历循环 ├── 01-v-for遍历数组.html ├── 02-v-for遍历对象.html ├── 03-v-for使用key.html ├── 04-数组的响应式方法.html ├── 05-作业的回顾和完成.html ├── 08-遍历循环.md └── images │ ├── 8.2-1.png │ ├── 8.3-1.png │ └── 8.5-1.gif ├── 09-综合练习 ├── 09-综合练习.md ├── images │ └── 9-1.png ├── index.html ├── main.js └── style.css ├── 10-v-model ├── 01-v-model的基本使用.html ├── 02-v-model的原理.html ├── 03-v-model结合radio类型.html ├── 04-v-model结合checkbox类型.html ├── 05-v-model结合select类型.html ├── 06-v-model修饰符的使用.html ├── 10-v-model.md └── images │ └── 10.6-1.png ├── 11-组件化开发 ├── 01-组件化的基本使用.html ├── 02-全局组件和局部组件.html ├── 03-父组件与子组件区别.html ├── 04-注册组件语法糖写法.html ├── 05-组件模板的分离写法.html ├── 06-组件数据存放问题.html ├── 07-组件的data为什么要是函数.html ├── 08-父组件向子组件传递数据.html ├── 09-组件通信-父传子(props的驼峰标识) copy.html ├── 10-组件通信-子传父(自定义事件).html ├── 11-组件化开发.md ├── 11-组件通信-父子通信案例.html ├── 12-组件通信-父子通信案例(watch实现).html ├── 13-父访问子-children-ref.html ├── 14-子访问父-parent.html ├── images │ ├── 11.1-1.png │ ├── 11.10-1.gif │ ├── 11.10-2.gif │ ├── 11.6-1.png │ ├── 11.6-2.gif │ └── 11.8-1.gif ├── 大纲了解.md └── 阶段回顾.md ├── 12-组件化高级 ├── 01-slot-插槽的基本使用.html ├── 02-slot-具名插槽的使用.html ├── 03-编译的作用域.html ├── 04-作用域插槽案例.html ├── 12-组件化高级.md └── images │ ├── 12.1-1.png │ ├── 12.1-2.png │ ├── 12.1-3.png │ ├── 12.2-1.png │ ├── 12.3-1.png │ └── 12.4-1.png ├── 13-Vue实例的生命周期 ├── 13-vue实例的生命周期.md ├── images │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── 9.png │ └── lifecycle.png ├── test.html ├── test2.html ├── test3.html ├── test4.html ├── test5.html └── test6.html ├── 14-前端模块化 ├── 01-为什么要又模块化 │ ├── aaa.js │ ├── bbb.js │ ├── index.html │ └── mmm.js ├── 02-CommonJS的模块化 │ ├── aaa.js │ ├── bbb.js │ ├── index.html │ └── mmm.js ├── 03-ES6的模块化实现 │ ├── aaa.js │ ├── bbb.js │ ├── index.html │ └── mmm.js ├── 14-前端模块化.md └── images │ ├── 14.4-1.png │ ├── 14.4-2.png │ └── 14.4-3.png ├── 15-webpack ├── 01-webpack的起步 │ ├── dist │ │ └── bundle.js │ ├── index.html │ └── src │ │ ├── info.js │ │ ├── main.js │ │ └── mathUtils.js ├── 02-webpack的配置 │ ├── dist │ │ └── bundle.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── info.js │ │ ├── main.js │ │ └── mathUtils.js │ └── webpack.config.js ├── 03-webpack的loader │ ├── dist │ │ ├── 371beee13d7d7037a3180ef9db9d2d2d.jpg │ │ ├── bundle.js │ │ └── img │ │ │ └── big.371beee1.jpg │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── css │ │ │ ├── normal.css │ │ │ └── special.less │ │ ├── img │ │ │ ├── big.jpg │ │ │ └── small.jpg │ │ ├── js │ │ │ ├── info.js │ │ │ └── mathUtils.js │ │ └── main.js │ └── webpack.config.js ├── 04-webpack的vue │ ├── dist │ │ ├── 371beee13d7d7037a3180ef9db9d2d2d.jpg │ │ ├── bundle.js │ │ └── img │ │ │ └── big.371beee1.jpg │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── css │ │ │ ├── normal.css │ │ │ └── special.less │ │ ├── img │ │ │ ├── big.jpg │ │ │ └── small.jpg │ │ ├── js │ │ │ ├── app.js │ │ │ ├── info.js │ │ │ └── mathUtils.js │ │ ├── main.js │ │ └── vue │ │ │ ├── App.vue │ │ │ └── Cpn.vue │ └── webpack.config.js ├── 05-webpack的plugin │ ├── dist │ │ ├── 371beee13d7d7037a3180ef9db9d2d2d.jpg │ │ ├── bundle.js │ │ ├── img │ │ │ └── big.371beee1.jpg │ │ └── index.html │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── css │ │ │ ├── normal.css │ │ │ └── special.less │ │ ├── img │ │ │ ├── big.jpg │ │ │ └── small.jpg │ │ ├── js │ │ │ ├── app.js │ │ │ ├── info.js │ │ │ └── mathUtils.js │ │ ├── main.js │ │ └── vue │ │ │ ├── App.vue │ │ │ └── Cpn.vue │ └── webpack.config.js ├── 06-webpack搭建本地服务器 │ ├── dist │ │ ├── 371beee13d7d7037a3180ef9db9d2d2d.jpg │ │ ├── bundle.js │ │ ├── img │ │ │ └── big.371beee1.jpg │ │ └── index.html │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── css │ │ │ ├── normal.css │ │ │ └── special.less │ │ ├── img │ │ │ ├── big.jpg │ │ │ └── small.jpg │ │ ├── js │ │ │ ├── app.js │ │ │ ├── info.js │ │ │ └── mathUtils.js │ │ ├── main.js │ │ └── vue │ │ │ ├── App.vue │ │ │ └── Cpn.vue │ └── webpack.config.js ├── 07-webpack的配置文件分离 │ ├── build │ │ ├── base.config.js │ │ ├── dev.config.js │ │ ├── dist │ │ │ ├── bundle.js │ │ │ ├── img │ │ │ │ └── big.371beee1.jpg │ │ │ └── index.html │ │ └── prod.config.js │ ├── dist │ │ ├── 371beee13d7d7037a3180ef9db9d2d2d.jpg │ │ ├── bundle.js │ │ ├── img │ │ │ └── big.371beee1.jpg │ │ └── index.html │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── css │ │ │ ├── normal.css │ │ │ └── special.less │ │ ├── img │ │ │ ├── big.jpg │ │ │ └── small.jpg │ │ ├── js │ │ │ ├── app.js │ │ │ ├── info.js │ │ │ └── mathUtils.js │ │ ├── main.js │ │ └── vue │ │ │ ├── App.vue │ │ │ └── Cpn.vue │ └── webpack.config.js ├── 15-webpack.md └── images │ ├── 15-1.png │ ├── 15-10.png │ ├── 15-11.png │ ├── 15-12.png │ ├── 15-13.png │ ├── 15-14.png │ ├── 15-15.png │ ├── 15-16.png │ ├── 15-17.png │ ├── 15-18.png │ ├── 15-19.png │ ├── 15-2.png │ ├── 15-20.png │ ├── 15-21.png │ ├── 15-22.png │ ├── 15-23.png │ ├── 15-24.png │ ├── 15-25.png │ ├── 15-26.png │ ├── 15-27.png │ ├── 15-28.png │ ├── 15-29.png │ ├── 15-3.png │ ├── 15-30.png │ ├── 15-31.png │ ├── 15-32.png │ ├── 15-4.png │ ├── 15-5.png │ ├── 15-6.png │ ├── 15-7.png │ ├── 15-8.png │ └── 15-9.png ├── 16-vue-cli ├── 01-vuecli2test │ ├── .babelrc │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .postcssrc.js │ ├── README.md │ ├── build │ │ ├── build.js │ │ ├── check-versions.js │ │ ├── logo.png │ │ ├── utils.js │ │ ├── vue-loader.conf.js │ │ ├── webpack.base.conf.js │ │ ├── webpack.dev.conf.js │ │ └── webpack.prod.conf.js │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ └── prod.env.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ └── main.js │ └── static │ │ └── .gitkeep ├── 02-runtime-compiler │ ├── .babelrc │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .postcssrc.js │ ├── README.md │ ├── build │ │ ├── build.js │ │ ├── check-versions.js │ │ ├── logo.png │ │ ├── utils.js │ │ ├── vue-loader.conf.js │ │ ├── webpack.base.conf.js │ │ ├── webpack.dev.conf.js │ │ └── webpack.prod.conf.js │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ └── prod.env.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ └── main.js │ └── static │ │ └── .gitkeep ├── 03-runtime-only │ ├── .babelrc │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .postcssrc.js │ ├── README.md │ ├── build │ │ ├── build.js │ │ ├── check-versions.js │ │ ├── logo.png │ │ ├── utils.js │ │ ├── vue-loader.conf.js │ │ ├── webpack.base.conf.js │ │ ├── webpack.dev.conf.js │ │ └── webpack.prod.conf.js │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ └── prod.env.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ └── main.js │ └── static │ │ └── .gitkeep ├── 04-vuecli3test │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ └── main.js │ └── vue.config.js ├── 16-vue-cli.md └── images │ ├── 16-1.png │ ├── 16-10.png │ ├── 16-11.png │ ├── 16-12.png │ ├── 16-2.png │ ├── 16-3.png │ ├── 16-4.png │ ├── 16-5.png │ ├── 16-6.png │ ├── 16-7.png │ ├── 16-8.png │ └── 16-9.png ├── 17-vue-router ├── 01-vue-router-vuecli2 │ ├── .babelrc │ ├── .editorconfig │ ├── .gitignore │ ├── .postcssrc.js │ ├── README.md │ ├── build │ │ ├── build.js │ │ ├── check-versions.js │ │ ├── logo.png │ │ ├── utils.js │ │ ├── vue-loader.conf.js │ │ ├── webpack.base.conf.js │ │ ├── webpack.dev.conf.js │ │ └── webpack.prod.conf.js │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ └── prod.env.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── About.vue │ │ │ ├── Home.vue │ │ │ ├── HomeMessage.vue │ │ │ ├── HomeNews.vue │ │ │ ├── Profile.vue │ │ │ └── User.vue │ │ ├── main.js │ │ └── router │ │ │ └── index.js │ └── static │ │ └── .gitkeep ├── 02-vue-router-tabbar-v1 │ ├── .babelrc │ ├── .editorconfig │ ├── .gitignore │ ├── .postcssrc.js │ ├── README.md │ ├── build │ │ ├── build.js │ │ ├── check-versions.js │ │ ├── logo.png │ │ ├── utils.js │ │ ├── vue-loader.conf.js │ │ ├── webpack.base.conf.js │ │ ├── webpack.dev.conf.js │ │ └── webpack.prod.conf.js │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ └── prod.env.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── css │ │ │ │ └── base.css │ │ │ └── img │ │ │ │ └── tabbar │ │ │ │ ├── categories.png │ │ │ │ ├── categories_active.png │ │ │ │ ├── home.png │ │ │ │ ├── home_active.png │ │ │ │ ├── profile.png │ │ │ │ ├── profile_active.png │ │ │ │ ├── shopcart.png │ │ │ │ └── shopcart_active.png │ │ ├── components │ │ │ ├── MainTabBar.vue │ │ │ └── tabbar │ │ │ │ ├── TabBar.vue │ │ │ │ └── TabBarItem.vue │ │ ├── main.js │ │ ├── router │ │ │ └── index.js │ │ └── views │ │ │ ├── categories │ │ │ └── Categories.vue │ │ │ ├── home │ │ │ └── Home.vue │ │ │ ├── profile │ │ │ └── Profile.vue │ │ │ └── shop │ │ │ └── Shop.vue │ └── static │ │ └── .gitkeep ├── 17-vue-router.md └── images │ ├── 17-1.png │ ├── 17-10.png │ ├── 17-11.png │ ├── 17-12.png │ ├── 17-13.png │ ├── 17-14.png │ ├── 17-15.png │ ├── 17-16.png │ ├── 17-17.png │ ├── 17-18.png │ ├── 17-19.png │ ├── 17-2.gif │ ├── 17-20.png │ ├── 17-21.gif │ ├── 17-22.png │ ├── 17-23.gif │ ├── 17-24.gif │ ├── 17-25.gif │ ├── 17-26.gif │ ├── 17-27.png │ ├── 17-28.png │ ├── 17-29.png │ ├── 17-3.png │ ├── 17-4.png │ ├── 17-5.png │ ├── 17-6.gif │ ├── 17-7.png │ ├── 17-8.png │ └── 17-9.png ├── LICENSE └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /01-ES6补充/02-块级作用域(ES5有闭包-没闭包-let对比).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 块级作用域(ES5有闭包-没闭包-let对比) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /01-ES6补充/03-const的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | const的使用 9 | 10 | 11 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /01-ES6补充/04-对象字面量的增强写法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 对象字面量的增强写法 9 | 10 | 11 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /01-ES6补充/05-箭头函数的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 箭头函数的基本使用 8 | 9 | 10 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /01-ES6补充/06-箭头函数参数和返回值.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 箭头函数参数和返回值 8 | 9 | 10 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /01-ES6补充/07-箭头函数this使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 箭头函数this使用 8 | 9 | 10 | 11 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /01-ES6补充/images/1.1.2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/01-ES6补充/images/1.1.2-1.png -------------------------------------------------------------------------------- /01-ES6补充/images/1.2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/01-ES6补充/images/1.2-1.png -------------------------------------------------------------------------------- /02-HelloVue/01-HelloVuejs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HelloVuejs 9 | 10 | 11 |
12 |

{{message}}

13 |

{{name}}

14 |
15 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /02-HelloVue/02-vue列表展示.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue列表展示 9 | 10 | 11 |
12 |

{{message}}

13 | 16 |
17 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /02-HelloVue/03-vue案例-计数器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue计数器 9 | 10 | 11 |
12 |

当前计数：{{count}}

13 | 15 | 16 | 17 | 18 |
19 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /02-HelloVue/04-vue的template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vue的template 8 | 9 | 10 | 11 |
{{message}}
12 | 13 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /02-HelloVue/images/2.2.1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/02-HelloVue/images/2.2.1-1.png -------------------------------------------------------------------------------- /02-webpack的配置/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "configofwebpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "inedx.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "webpack": "^3.6.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /02-webpack的配置/src/info.js: -------------------------------------------------------------------------------- 1 | //es6语法导出 2 | export default { 3 | name: 'zzz', 4 | age: 24, 5 | }; 6 | -------------------------------------------------------------------------------- /02-webpack的配置/src/main.js: -------------------------------------------------------------------------------- 1 | //2.新建入口js文件main.js 导入mathUtil.js文件，并调用 2 | const { add, mul } = require('./mathUtils.js'); 3 | 4 | console.log(add(10, 20)); 5 | console.log(mul(10, 10)); 6 | 7 | //使用es6语法导入 8 | import info from './info.js'; 9 | 10 | console.log(info.name); 11 | console.log(info.age); 12 | -------------------------------------------------------------------------------- /02-webpack的配置/src/mathUtils.js: -------------------------------------------------------------------------------- 1 | //1.新建mathUtils.js，用CommonJs规范导出 2 | function add(num1, num2) { 3 | return num1 + num2; 4 | } 5 | function mul(num1, num2) { 6 | return num1 * num2; 7 | } 8 | module.exports = { 9 | add, 10 | mul, 11 | }; 12 | -------------------------------------------------------------------------------- /02-webpack的配置/webpack.config.js: -------------------------------------------------------------------------------- 1 | //1.导入node的path包获取绝对路径，需要使用npm init初始化node包 2 | const path = require('path'); 3 | 4 | //2.配置webpack的入口和出口 5 | module.exports = { 6 | entry: './src/main.js', //入口文件 7 | output: { 8 | path: path.resolve(__dirname, 'dist'), //动态获取打包后的文件路径,path.resolve拼接路径 9 | filename: 'bundle.js', //打包后的文件名 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /03-插值操作/01-Mustache语法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mustache的语法 8 | 9 | 10 |
11 |

{{message}}

12 |

{{message}},啧啧啧

13 | 14 | 15 |

{{firstName + lastName}}

16 |

{{firstName + " " + lastName}}

17 |

{{firstName}}{{lastName}}

18 |

{{count * 2}}

19 |
20 | 21 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /03-插值操作/02-v-once指令的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-once指令的使用 8 | 9 | 10 |
11 |

{{message}}

12 | 13 |

{{message}}

14 |
15 | 16 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /03-插值操作/03-v-html指令的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-html指令的使用 8 | 9 | 10 |
11 |

不使用v-html

12 |

{{url}}

13 |

使用v-html，直接插入html

14 |

15 |
16 | 17 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /03-插值操作/04-v-text指令的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-text指令的使用 8 | 9 | 10 |
11 |

不使用v-text

12 |

{{message}}，啧啧啧

13 |

使用v-text，以文本形式显示,会覆盖

14 |

，啧啧啧

15 |
16 | 17 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /03-插值操作/05-v-pre指令的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-pre指令的使用 8 | 9 | 10 |
11 |

不使用v-pre

12 |

{{message}}

13 |

使用v-pre,不会解析

14 |

{{message}}

15 |
16 | 17 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /03-插值操作/06-v-cloak指令的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-cloak指令的使用 8 | 13 | 14 | 15 | 16 |
17 |

{{message}}

18 |
19 | 20 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /03-插值操作/images/3.3-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/03-插值操作/images/3.3-1.png -------------------------------------------------------------------------------- /03-插值操作/images/3.4-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/03-插值操作/images/3.4-1.png -------------------------------------------------------------------------------- /03-插值操作/images/3.5-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/03-插值操作/images/3.5-1.png -------------------------------------------------------------------------------- /03-插值操作/images/3.6-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/03-插值操作/images/3.6-1.gif -------------------------------------------------------------------------------- /04-动态绑定属性/01-v-bind的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-bind的基本使用 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /04-动态绑定属性/02-v-bind动态绑定class(对象语法).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-bind动态绑定class(对象语法) 8 | 13 | 14 | 15 |
16 | 18 | 19 | 20 | 22 |

{{message}}

23 |

{{message}}

24 | 25 |
26 | 27 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /04-动态绑定属性/03-v-bind动态绑定class(数组语法).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-bind动态绑定class(数组用法) 8 | 9 | 10 | 11 |
12 | 13 |

{{message}}

14 | 15 |

{{message}}

16 |

{{message}}

17 |
18 | 19 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /04-动态绑定属性/04-作业(v-for和v-bind的结合).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 作业(v-for和v-bind的结合) 8 | 13 | 14 | 15 |
16 | 26 |
27 | 28 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /04-动态绑定属性/05-v-bind动态绑定style(对象语法).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-bind动态绑定style(对象语法) 8 | 9 | 10 |
11 | 12 | 13 |

{{message}}

14 | 15 |

{{message}}

16 |

{{message}}

17 |
18 | 19 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /04-动态绑定属性/06-v-bind动态绑定style(数组语法).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-bind动态绑定style(对象语法) 8 | 9 | 10 |
11 |

{{message}}

12 | 13 |

{{message}}

14 |
15 | 16 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /04-动态绑定属性/images/4.1-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/04-动态绑定属性/images/4.1-1.gif -------------------------------------------------------------------------------- /04-动态绑定属性/images/4.2-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/04-动态绑定属性/images/4.2-1.gif -------------------------------------------------------------------------------- /04-动态绑定属性/images/4.3-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/04-动态绑定属性/images/4.3-2.png -------------------------------------------------------------------------------- /04-动态绑定属性/images/4.4-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/04-动态绑定属性/images/4.4-1.gif -------------------------------------------------------------------------------- /05-计算属性与侦听器/01-计算属性的基本使用 copy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 计算属性的基本使用 8 | 9 | 10 |
11 | 12 |

{{firstName+ " " + lastName}}

13 | 14 |

{{getFullName()}}

15 | 16 |

{{fullName}}

17 |
18 | 19 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /05-计算属性与侦听器/02-计算属性的复杂使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 计算属性的复杂使用 8 | 9 | 10 |
11 |

总价格：{{totalPrice}}

12 |
13 | 14 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /05-计算属性与侦听器/03-计算属性的setter和getter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 计算属性的setter和getter 8 | 9 | 10 |
11 | 12 |

{{fullName}}

13 |
14 | 15 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /05-计算属性与侦听器/04-计算属性和methods的对比.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 计算属性和methods的对比 8 | 9 | 10 |
11 | 12 |

{{getFullName()}}

13 |

{{getFullName()}}

14 |

{{getFullName()}}

15 |

{{getFullName()}}

16 | 17 |

{{fullName}}

18 |

{{fullName}}

19 |

{{fullName}}

20 |

{{fullName}}

21 |
22 | 23 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /05-计算属性与侦听器/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/05-计算属性与侦听器/images/1.png -------------------------------------------------------------------------------- /05-计算属性与侦听器/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/05-计算属性与侦听器/images/2.png -------------------------------------------------------------------------------- /05-计算属性与侦听器/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/05-计算属性与侦听器/images/3.png -------------------------------------------------------------------------------- /05-计算属性与侦听器/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/05-计算属性与侦听器/images/4.png -------------------------------------------------------------------------------- /05-计算属性与侦听器/images/5.4-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/05-计算属性与侦听器/images/5.4-1.png -------------------------------------------------------------------------------- /05-计算属性与侦听器/images/5.4-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/05-计算属性与侦听器/images/5.4-2.png -------------------------------------------------------------------------------- /05-计算属性与侦听器/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/05-计算属性与侦听器/images/5.png -------------------------------------------------------------------------------- /05-计算属性与侦听器/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/05-计算属性与侦听器/images/6.png -------------------------------------------------------------------------------- /05-计算属性与侦听器/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/05-计算属性与侦听器/images/7.png -------------------------------------------------------------------------------- /06-事件监听/01-v-on的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 |

{{count}}

13 | 15 | 16 | 17 |
18 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /06-事件监听/02-v-on的参数传递.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-on的参数传递 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /06-事件监听/03-v-on的修饰符.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-on的修饰符 8 | 9 | 10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 | 21 |
22 | 23 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /06-事件监听/images/6.2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/06-事件监听/images/6.2-1.png -------------------------------------------------------------------------------- /07-条件判断/01-v-if的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

isFlag为true显示这个

12 |

isShow为true是显示这个

13 |
小于18岁未成年
14 |
大于18岁小于60岁正值壮年
15 |
大于60岁,暮年
16 |
17 | 18 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /07-条件判断/02-登录切换简单示例.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-if的demo 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /07-条件判断/03-v-show的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

12 | v-show只是操作元素的style属性display，都没会被创建 13 |

14 |

v-if是新增和删除dom元素

15 |
16 | 17 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /07-条件判断/images/7.1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/07-条件判断/images/7.1-1.png -------------------------------------------------------------------------------- /07-条件判断/images/7.2-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/07-条件判断/images/7.2-1.gif -------------------------------------------------------------------------------- /08-遍历循环/01-v-for遍历数组.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-for遍历数组 8 | 9 | 10 |
11 | 12 | 15 | 16 | 19 |
20 | 21 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /08-遍历循环/02-v-for遍历对象.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-for遍历对象 8 | 9 | 10 |
11 | 12 | 13 | 16 | 17 | 18 | 23 |
24 | 25 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /08-遍历循环/03-v-for使用key.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-for使用key 8 | 9 | 10 |
11 | 12 | 15 | 16 | 17 | 20 | 21 |
22 | 23 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /08-遍历循环/04-数组的响应式方法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 数组的响应式方法 8 | 9 | 10 |
11 | 12 | 15 |
16 | 17 |
18 | 19 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /08-遍历循环/05-作业的回顾和完成.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 综合练习 8 | 13 | 14 | 15 | 16 |
17 | 18 | 27 |
28 | 29 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /08-遍历循环/images/8.2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/08-遍历循环/images/8.2-1.png -------------------------------------------------------------------------------- /08-遍历循环/images/8.3-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/08-遍历循环/images/8.3-1.png -------------------------------------------------------------------------------- /08-遍历循环/images/8.5-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/08-遍历循环/images/8.5-1.gif -------------------------------------------------------------------------------- /09-综合练习/images/9-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/09-综合练习/images/9-1.png -------------------------------------------------------------------------------- /09-综合练习/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 图书购物车小案例 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 38 | 39 | 40 | 41 |
 书籍名称出版日期价格购买数量操作
{{index}}{{book.name}}{{book.beginDate}}{{book.price | showPrice}} 29 | 35 | {{book.count}} 36 | 37 |
42 |

总价：{{totalPrice | showPrice}}

43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /09-综合练习/style.css: -------------------------------------------------------------------------------- 1 | table { 2 | border: 1px; 3 | border-collapse: collapse; 4 | border-spacing: 0; 5 | } 6 | th, 7 | td { 8 | padding: 8px 16px; 9 | border: ipx solid #e9e9e9; 10 | text-align: left; 11 | } 12 | th { 13 | background-color: #f7f7f7; 14 | color: #5c6b77; 15 | font-weight: 600; 16 | } 17 | -------------------------------------------------------------------------------- /10-v-model/01-v-model的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-model的基本使用 8 | 9 | 10 |
11 | 12 | {{message}} 13 |
14 | 15 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /10-v-model/02-v-model的原理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-model的原理 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 | {{message}} 24 |
25 | 26 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /10-v-model/03-v-model结合radio类型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-model结合radio类型 8 | 9 | 10 |
11 | 12 | 21 | 30 |
你选择的性别是：{{sex}}
31 |
32 | 33 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /10-v-model/05-v-model结合select类型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-model结合select类型 8 | 9 | 10 |
11 | 12 | 17 |

你选择的水果是：{{fruit}}

18 | 19 | 20 | 25 |

你选择的水果是：{{fruits}}

26 |
27 | 28 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /10-v-model/06-v-model修饰符的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-model修饰符 8 | 9 | 10 |
11 |

v-model修饰符

12 |

13 | lazy,默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据 14 |

15 | 16 |
{{message}}
17 |

修饰符number,默认是string类型，使用number赋值为number类型

18 | 19 |
{{age}}--{{typeof age}}
20 |

修饰符trim:去空格

21 | 22 |
{{name}}
23 |
24 | 25 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /10-v-model/images/10.6-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/10-v-model/images/10.6-1.png -------------------------------------------------------------------------------- /11-组件化开发/01-组件化的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 组件化的基本使用 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /11-组件化开发/02-全局组件和局部组件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 全局组件和局部组件 8 | 9 | 10 |
11 |

全局组件

12 | 13 |

局部组件

14 | 15 |
16 | 17 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /11-组件化开发/03-父组件与子组件区别.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 父组件与子组件区别 8 | 9 | 10 |
11 | 12 |
13 | 14 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /11-组件化开发/04-注册组件语法糖写法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 注册组件语法糖写法 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /11-组件化开发/05-组件模板的分离写法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 组件模板的分离写法 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 22 | 23 | 29 | 30 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /11-组件化开发/06-组件数据存放问题.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 组件数据存放问题 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /11-组件化开发/07-组件的data为什么要是函数.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 组件的data为什么要是函数 8 | 9 | 10 | 11 |
12 |

data不使用函数

13 | 14 | 15 |
16 |

data使用函数

17 | 18 | 19 |
20 |
21 | 22 | 29 | 36 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /11-组件化开发/09-组件通信-父传子(props的驼峰标识) copy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 组件通信-父传子(props的驼峰标识) 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | 18 | 26 | 27 | 28 | 29 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /11-组件化开发/13-父访问子-children-ref.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 父访问子-children-ref 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 23 | 24 | 25 | 26 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /11-组件化开发/14-子访问父-parent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 子访问父-parent 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 25 | 26 | 27 | 28 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /11-组件化开发/images/11.1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/11-组件化开发/images/11.1-1.png -------------------------------------------------------------------------------- /11-组件化开发/images/11.10-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/11-组件化开发/images/11.10-1.gif -------------------------------------------------------------------------------- /11-组件化开发/images/11.10-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/11-组件化开发/images/11.10-2.gif -------------------------------------------------------------------------------- /11-组件化开发/images/11.6-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/11-组件化开发/images/11.6-1.png -------------------------------------------------------------------------------- /11-组件化开发/images/11.6-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/11-组件化开发/images/11.6-2.gif -------------------------------------------------------------------------------- /11-组件化开发/images/11.8-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/11-组件化开发/images/11.8-1.gif -------------------------------------------------------------------------------- /11-组件化开发/大纲了解.md: -------------------------------------------------------------------------------- 1 | ### 一、组件化开发 2 | 3 | ### 二、前端化开发 4 | 5 | ### 三、webpack 6 | 7 | ### 四、Vue-Cli 8 | 9 | 基于 webpack 10 | -------------------------------------------------------------------------------- /12-组件化高级/01-slot-插槽的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | slot-插槽的基本使用 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 这是插槽内容222 20 | 21 | 22 | 这是插槽内容333 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 40 | 41 | 42 | 43 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /12-组件化高级/02-slot-具名插槽的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | slot-具名插槽的使用 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 没具名 19 | 这是左边具名插槽 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | 43 | 44 | 45 | 46 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /12-组件化高级/03-编译的作用域.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 编译的作用域 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | 25 | 26 | 27 | 28 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /12-组件化高级/images/12.1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/12-组件化高级/images/12.1-1.png -------------------------------------------------------------------------------- /12-组件化高级/images/12.1-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/12-组件化高级/images/12.1-2.png -------------------------------------------------------------------------------- /12-组件化高级/images/12.1-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/12-组件化高级/images/12.1-3.png -------------------------------------------------------------------------------- /12-组件化高级/images/12.2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/12-组件化高级/images/12.2-1.png -------------------------------------------------------------------------------- /12-组件化高级/images/12.3-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/12-组件化高级/images/12.3-1.png -------------------------------------------------------------------------------- /12-组件化高级/images/12.4-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/12-组件化高级/images/12.4-1.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/1.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/10.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/11.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/2.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/3.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/4.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/5.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/6.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/7.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/8.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/9.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/images/lifecycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/13-Vue实例的生命周期/images/lifecycle.png -------------------------------------------------------------------------------- /13-Vue实例的生命周期/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue实例无el的生命周期 8 | 9 | 10 | 11 | 12 | 13 |

测试无el选项生命周期

14 |
15 |
{{msg}}
16 |
17 |
18 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /13-Vue实例的生命周期/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue实例测试优先级 8 | 9 | 10 | 11 | 12 |

测试template和HTML的优先级

13 |
14 |

HTML优先

15 |
16 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /13-Vue实例的生命周期/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue实例无template的生命周期 8 | 9 | 10 | 11 | 12 | 13 |

测试有template的生命周期

14 |
{{msg}}
15 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /13-Vue实例的生命周期/test5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue实例无数据绑定的修改数据 8 | 9 | 10 | 11 | 12 | 13 |

测试无数据绑定修改数据，钩子函数调用情况

14 |
15 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /13-Vue实例的生命周期/test6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue实例有数据绑定的修改数据 8 | 9 | 10 | 11 | 12 | 13 |

测试有数据绑定修改数据，钩子函数调用情况

14 |
15 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /14-前端模块化/01-为什么要又模块化/aaa.js: -------------------------------------------------------------------------------- 1 | //小明开发 2 | // var name = '小明' 3 | // var age = 22 4 | 5 | // function sum(num1, num2) { 6 | // return num1 + num2 7 | // } 8 | // var flag = true 9 | // if (flag) { 10 | // console.log(sum(10, 20)); 11 | // } 12 | //模块对象 13 | var moduleA = (function (param) { 14 | //导出对象 15 | var obj = {} 16 | var name = '小明' 17 | var age = 22 18 | 19 | function sum(num1, num2) { 20 | return num1 + num2 21 | } 22 | var flag = true 23 | if (flag) { 24 | console.log(sum(10, 20)) 25 | } 26 | obj.flag=false 27 | return obj 28 | })() -------------------------------------------------------------------------------- /14-前端模块化/01-为什么要又模块化/bbb.js: -------------------------------------------------------------------------------- 1 | //小红 2 | var name = "小红" 3 | var flag = false 4 | -------------------------------------------------------------------------------- /14-前端模块化/01-为什么要又模块化/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | slot-插槽的基本使用 9 | 10 | 11 | 12 | 15 | 16 | 17 |
18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /14-前端模块化/01-为什么要又模块化/mmm.js: -------------------------------------------------------------------------------- 1 | //小明 2 | //使用全局变量moduleA 3 | if(moduleA.flag){ 4 | console.log("flag是true") 5 | } -------------------------------------------------------------------------------- /14-前端模块化/02-CommonJS的模块化/aaa.js: -------------------------------------------------------------------------------- 1 | //CommonJS需要nodeJS支持 2 | var name = '小明' 3 | var age = 22 4 | 5 | function sum(num1, num2) { 6 | return num1 + num2 7 | } 8 | var flag = true 9 | if (flag) { 10 | console.log(sum(10, 20)) 11 | } 12 | 13 | // module.exports = { 14 | // flag : flag, 15 | // sum : sum 16 | // } 17 | //导出对象 18 | module.exports = { 19 | flag, 20 | sum 21 | } -------------------------------------------------------------------------------- /14-前端模块化/02-CommonJS的模块化/bbb.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/14-前端模块化/02-CommonJS的模块化/bbb.js -------------------------------------------------------------------------------- /14-前端模块化/02-CommonJS的模块化/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CommonJS的模块化 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /14-前端模块化/02-CommonJS的模块化/mmm.js: -------------------------------------------------------------------------------- 1 | //导入对象,nodejs语法,需要node支持,从aaa.js取出对象 2 | var {flag,sum} = require("./aaa") 3 | 4 | console.log(sum(10,20)); 5 | 6 | if(flag){ 7 | console.log("flag is true"); 8 | } -------------------------------------------------------------------------------- /14-前端模块化/03-ES6的模块化实现/aaa.js: -------------------------------------------------------------------------------- 1 | //1.直接默认导出 2 | export let name = '小明' 3 | var age = 22 4 | 5 | function sum(num1, num2) { 6 | return num1 + num2 7 | } 8 | var flag = true 9 | if (flag) { 10 | console.log(sum(10, 20)) 11 | } 12 | //2.最后统一导出 13 | export { 14 | flag,sum,age 15 | } 16 | 17 | //3.导出函数/类 18 | export function say(value) { 19 | console.log(value); 20 | } 21 | 22 | export class Person{ 23 | run(){ 24 | console.log("奔跑"); 25 | } 26 | } -------------------------------------------------------------------------------- /14-前端模块化/03-ES6的模块化实现/bbb.js: -------------------------------------------------------------------------------- 1 | import aaa from './aaa.js' 2 | 3 | 4 | if(aaa.flag){ 5 | console.log(aaa.sum(10,110)); 6 | 7 | } 8 | var name = '小红' 9 | 10 | var flag = false 11 | 12 | //3.导入function和class 13 | import {Person} from './aaa.js' 14 | const p = new Person() 15 | p.run() 16 | 17 | //4.默认导入 export default 18 | import aaa from './aaa.js' 19 | 20 | console.log(aaa.sum(10,110)); 21 | 22 | // 5.统一全部导入 23 | import * as aaa from './aaa.js' 24 | console.log(aaa.flag); 25 | console.log(aaa.name); 26 | 27 | -------------------------------------------------------------------------------- /14-前端模块化/03-ES6的模块化实现/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /14-前端模块化/03-ES6的模块化实现/mmm.js: -------------------------------------------------------------------------------- 1 | import {name,flag,sum,say,Person} from './aaa.js' 2 | 3 | console.log(name) 4 | 5 | if(flag){ 6 | console.log("小明是天才"); 7 | } 8 | 9 | console.log(sum(20,30)); 10 | 11 | say('hello') 12 | const p = new Person(); 13 | p.run(); -------------------------------------------------------------------------------- /14-前端模块化/images/14.4-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/14-前端模块化/images/14.4-1.png -------------------------------------------------------------------------------- /14-前端模块化/images/14.4-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/14-前端模块化/images/14.4-2.png -------------------------------------------------------------------------------- /14-前端模块化/images/14.4-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/14-前端模块化/images/14.4-3.png -------------------------------------------------------------------------------- /15-webpack/01-webpack的起步/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /15-webpack/01-webpack的起步/src/info.js: -------------------------------------------------------------------------------- 1 | //es6语法导出 2 | export default { 3 | name:'zzz', 4 | age:24, 5 | } -------------------------------------------------------------------------------- /15-webpack/01-webpack的起步/src/main.js: -------------------------------------------------------------------------------- 1 | //2.新建入口js文件main.js 导入mathUtil.js文件，并调用 2 | const {add,mul} = require("./mathUtils.js") 3 | 4 | 5 | console.log(add(10,20)) 6 | console.log(mul(10,10)) 7 | 8 | 9 | //使用es6语法导入 10 | import info from './info.js' 11 | 12 | console.log(info.name) 13 | console.log(info.age) 14 | -------------------------------------------------------------------------------- /15-webpack/01-webpack的起步/src/mathUtils.js: -------------------------------------------------------------------------------- 1 | //1.新建mathUtils.js，用CommonJs规范导出 2 | function add(num1,num2) { 3 | return num1+num2 4 | } 5 | function mul(num1,num2) { 6 | return num1*num2 7 | } 8 | module.exports = { 9 | add,mul 10 | } -------------------------------------------------------------------------------- /15-webpack/02-webpack的配置/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /15-webpack/02-webpack的配置/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "configofwebpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "inedx.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "webpack": "^3.6.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /15-webpack/02-webpack的配置/src/info.js: -------------------------------------------------------------------------------- 1 | //es6语法导出 2 | export default { 3 | name:'zzz', 4 | age:24, 5 | } -------------------------------------------------------------------------------- /15-webpack/02-webpack的配置/src/main.js: -------------------------------------------------------------------------------- 1 | //2.新建入口js文件main.js 导入mathUtil.js文件，并调用 2 | const {add,mul} = require("./mathUtils.js") 3 | 4 | 5 | console.log(add(10,20)) 6 | console.log(mul(10,10)) 7 | 8 | 9 | //使用es6语法导入 10 | import info from './info.js' 11 | 12 | console.log(info.name) 13 | console.log(info.age) 14 | -------------------------------------------------------------------------------- /15-webpack/02-webpack的配置/src/mathUtils.js: -------------------------------------------------------------------------------- 1 | //1.新建mathUtils.js，用CommonJs规范导出 2 | function add(num1,num2) { 3 | return num1+num2 4 | } 5 | function mul(num1,num2) { 6 | return num1*num2 7 | } 8 | module.exports = { 9 | add,mul 10 | } -------------------------------------------------------------------------------- /15-webpack/02-webpack的配置/webpack.config.js: -------------------------------------------------------------------------------- 1 | //1.导入node的path包获取绝对路径，需要使用npm init初始化node包 2 | const path = require('path') 3 | 4 | //2.配置webpack的入口和出口 5 | module.exports = { 6 | entry: './src/main.js',//入口文件 7 | output:{ 8 | path: path.resolve(__dirname, 'dist'),//动态获取打包后的文件路径,path.resolve拼接路径 9 | filename: 'bundle.js'//打包后的文件名 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/03-webpack的loader/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/dist/img/big.371beee1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/03-webpack的loader/dist/img/big.371beee1.jpg -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "configofwebpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "inedx.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-core": "^6.26.3", 14 | "babel-loader": "^7.1.5", 15 | "babel-preset-es2015": "^6.24.1", 16 | "css-loader": "^3.2.0", 17 | "file-loader": "^4.2.0", 18 | "less": "^3.10.3", 19 | "less-loader": "^5.0.0", 20 | "style-loader": "^1.0.0", 21 | "url-loader": "^2.2.0", 22 | "webpack": "^3.6.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/src/css/normal.css: -------------------------------------------------------------------------------- 1 | body{ 2 | /* background-color: red; */ 3 | /* background: url("../img/small.jpg"); */ 4 | background: url("../img/big.jpg"); 5 | } -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/src/css/special.less: -------------------------------------------------------------------------------- 1 | @fontSize:50px;//定义变量字体大小 2 | @fontColor:orange;//定义变量字体颜色 3 | body{ 4 | font-size: @fontSize; 5 | color: @fontColor; 6 | } -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/src/img/big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/03-webpack的loader/src/img/big.jpg -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/src/img/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/03-webpack的loader/src/img/small.jpg -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/src/js/info.js: -------------------------------------------------------------------------------- 1 | //es6语法导出 2 | export default { 3 | name:'zzz', 4 | age:24, 5 | } -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/src/js/mathUtils.js: -------------------------------------------------------------------------------- 1 | //1.新建mathUtils.js，用CommonJs规范导出 2 | function add(num1,num2) { 3 | return num1+num2 4 | } 5 | function mul(num1,num2) { 6 | return num1*num2 7 | } 8 | module.exports = { 9 | add,mul 10 | } -------------------------------------------------------------------------------- /15-webpack/03-webpack的loader/src/main.js: -------------------------------------------------------------------------------- 1 | //2.新建入口js文件main.js 导入mathUtil.js文件，并调用 2 | const {add,mul} = require("./js/mathUtils.js") 3 | 4 | 5 | console.log(add(10,20)) 6 | console.log(mul(10,10)) 7 | 8 | 9 | //3.使用es6语法导入 10 | import info from './js/info.js' 11 | 12 | console.log(info.name) 13 | console.log(info.age) 14 | 15 | 16 | //4.依赖css文件 17 | require('./css/normal.css') 18 | 19 | //5.依赖less文件 20 | require('./css/special.less') 21 | 22 | document.writeln("hello,zzzz!") 23 | -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/04-webpack的vue/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/dist/img/big.371beee1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/04-webpack的vue/dist/img/big.371beee1.jpg -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "configofwebpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "inedx.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-core": "^6.26.3", 14 | "babel-loader": "^7.1.5", 15 | "babel-preset-es2015": "^6.24.1", 16 | "css-loader": "^3.2.0", 17 | "file-loader": "^4.2.0", 18 | "less": "^3.10.3", 19 | "less-loader": "^5.0.0", 20 | "style-loader": "^1.0.0", 21 | "url-loader": "^2.2.0", 22 | "vue-loader": "^13.0.0", 23 | "vue-template-compiler": "^2.6.10", 24 | "webpack": "^3.6.0" 25 | }, 26 | "dependencies": { 27 | "vue": "^2.6.10" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/css/normal.css: -------------------------------------------------------------------------------- 1 | body{ 2 | /* background-color: red; */ 3 | /* background: url("../img/small.jpg"); */ 4 | background: url("../img/big.jpg"); 5 | } -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/css/special.less: -------------------------------------------------------------------------------- 1 | @fontSize:50px;//定义变量字体大小 2 | @fontColor:orange;//定义变量字体颜色 3 | body{ 4 | font-size: @fontSize; 5 | color: @fontColor; 6 | } -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/img/big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/04-webpack的vue/src/img/big.jpg -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/img/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/04-webpack的vue/src/img/small.jpg -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/js/app.js: -------------------------------------------------------------------------------- 1 | //定义一个组件,并使用ES6语法导出 2 | export default { 3 | template: ` 4 |
5 |

{{message}}

6 | 7 |

{{name}}

8 |
9 | `, 10 | data() { 11 | return { 12 | message: "hello webpack and vue", 13 | name: 'zzzz' 14 | } 15 | }, 16 | methods: { 17 | btnClick(){ 18 | console.log("按钮被点击了") 19 | } 20 | }, 21 | } -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/js/info.js: -------------------------------------------------------------------------------- 1 | //es6语法导出 2 | export default { 3 | name:'zzz', 4 | age:24, 5 | } -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/js/mathUtils.js: -------------------------------------------------------------------------------- 1 | //1.新建mathUtils.js，用CommonJs规范导出 2 | function add(num1,num2) { 3 | return num1+num2 4 | } 5 | function mul(num1,num2) { 6 | return num1*num2 7 | } 8 | module.exports = { 9 | add,mul 10 | } -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/main.js: -------------------------------------------------------------------------------- 1 | //2.新建入口js文件main.js 导入mathUtil.js文件，并调用 2 | const {add,mul} = require("./js/mathUtils.js") 3 | 4 | 5 | console.log(add(10,20)) 6 | console.log(mul(10,10)) 7 | 8 | 9 | //3.使用es6语法导入 10 | import info from './js/info.js' 11 | 12 | console.log(info.name) 13 | console.log(info.age) 14 | 15 | 16 | //4.依赖css文件 17 | require('./css/normal.css') 18 | 19 | //5.依赖less文件 20 | require('./css/special.less') 21 | 22 | document.writeln("hello,zzzz!") 23 | 24 | //6.使用vue开发 25 | import Vue from 'vue' 26 | //导入封装组件对象的js模块 27 | // import App from './js/app' 28 | //导入封装vue的.vue文件 29 | import App from './vue/App.vue' 30 | new Vue({ 31 | el: "#app", 32 | //使用组件 33 | template: '', 34 | components: { 35 | //注册局部组件 36 | App 37 | } 38 | }) 39 | 40 | -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/vue/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /15-webpack/04-webpack的vue/src/vue/Cpn.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/05-webpack的plugin/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/dist/img/big.371beee1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/05-webpack的plugin/dist/img/big.371beee1.jpg -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "configofwebpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "inedx.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-core": "^6.26.3", 14 | "babel-loader": "^7.1.5", 15 | "babel-preset-es2015": "^6.24.1", 16 | "css-loader": "^3.2.0", 17 | "file-loader": "^4.2.0", 18 | "html-webpack-plugin": "^3.2.0", 19 | "less": "^3.10.3", 20 | "less-loader": "^5.0.0", 21 | "style-loader": "^1.0.0", 22 | "uglifyjs-webpack-plugin": "^1.1.1", 23 | "url-loader": "^2.2.0", 24 | "vue-loader": "^13.0.0", 25 | "vue-template-compiler": "^2.6.10", 26 | "webpack": "^3.6.0" 27 | }, 28 | "dependencies": { 29 | "vue": "^2.6.10" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/css/normal.css: -------------------------------------------------------------------------------- 1 | body{ 2 | /* background-color: red; */ 3 | /* background: url("../img/small.jpg"); */ 4 | background: url("../img/big.jpg"); 5 | } -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/css/special.less: -------------------------------------------------------------------------------- 1 | @fontSize:50px;//定义变量字体大小 2 | @fontColor:orange;//定义变量字体颜色 3 | body{ 4 | font-size: @fontSize; 5 | color: @fontColor; 6 | } -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/img/big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/05-webpack的plugin/src/img/big.jpg -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/img/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/05-webpack的plugin/src/img/small.jpg -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/js/app.js: -------------------------------------------------------------------------------- 1 | //定义一个组件,并使用ES6语法导出 2 | export default { 3 | template: ` 4 |
5 |

{{message}}

6 | 7 |

{{name}}

8 |
9 | `, 10 | data() { 11 | return { 12 | message: "hello webpack and vue", 13 | name: 'zzzz' 14 | } 15 | }, 16 | methods: { 17 | btnClick(){ 18 | console.log("按钮被点击了") 19 | } 20 | }, 21 | } -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/js/info.js: -------------------------------------------------------------------------------- 1 | //es6语法导出 2 | export default { 3 | name:'zzz', 4 | age:24, 5 | } -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/js/mathUtils.js: -------------------------------------------------------------------------------- 1 | //1.新建mathUtils.js，用CommonJs规范导出 2 | function add(num1,num2) { 3 | return num1+num2 4 | } 5 | function mul(num1,num2) { 6 | return num1*num2 7 | } 8 | module.exports = { 9 | add,mul 10 | } -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/main.js: -------------------------------------------------------------------------------- 1 | //2.新建入口js文件main.js 导入mathUtil.js文件，并调用 2 | const {add,mul} = require("./js/mathUtils.js") 3 | 4 | 5 | console.log(add(10,20)) 6 | console.log(mul(10,10)) 7 | 8 | 9 | //3.使用es6语法导入 10 | import info from './js/info.js' 11 | 12 | console.log(info.name) 13 | console.log(info.age) 14 | 15 | 16 | //4.依赖css文件 17 | require('./css/normal.css') 18 | 19 | //5.依赖less文件 20 | require('./css/special.less') 21 | 22 | document.writeln("hello,zzzz!") 23 | 24 | //6.使用vue开发 25 | import Vue from 'vue' 26 | //导入封装组件对象的js模块 27 | // import App from './js/app' 28 | //导入封装vue的.vue文件 29 | import App from './vue/App.vue' 30 | new Vue({ 31 | el: "#app", 32 | //使用组件 33 | template: '', 34 | components: { 35 | //注册局部组件 36 | App 37 | } 38 | }) 39 | 40 | -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/vue/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /15-webpack/05-webpack的plugin/src/vue/Cpn.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/06-webpack搭建本地服务器/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/dist/img/big.371beee1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/06-webpack搭建本地服务器/dist/img/big.371beee1.jpg -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "configofwebpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "inedx.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack", 9 | "dev": "webpack-dev-server --open" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.3", 15 | "babel-loader": "^7.1.5", 16 | "babel-preset-es2015": "^6.24.1", 17 | "css-loader": "^3.2.0", 18 | "file-loader": "^4.2.0", 19 | "html-webpack-plugin": "^3.2.0", 20 | "less": "^3.10.3", 21 | "less-loader": "^5.0.0", 22 | "style-loader": "^1.0.0", 23 | "uglifyjs-webpack-plugin": "^1.1.1", 24 | "url-loader": "^2.2.0", 25 | "vue-loader": "^13.0.0", 26 | "vue-template-compiler": "^2.6.10", 27 | "webpack": "^3.6.0", 28 | "webpack-dev-server": "^2.9.1" 29 | }, 30 | "dependencies": { 31 | "vue": "^2.6.10" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/css/normal.css: -------------------------------------------------------------------------------- 1 | body{ 2 | /* background-color: red; */ 3 | /* background: url("../img/small.jpg"); */ 4 | background: url("../img/big.jpg"); 5 | } -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/css/special.less: -------------------------------------------------------------------------------- 1 | @fontSize:50px;//定义变量字体大小 2 | @fontColor:orange;//定义变量字体颜色 3 | body{ 4 | font-size: @fontSize; 5 | color: @fontColor; 6 | } -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/img/big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/06-webpack搭建本地服务器/src/img/big.jpg -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/img/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/06-webpack搭建本地服务器/src/img/small.jpg -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/js/app.js: -------------------------------------------------------------------------------- 1 | //定义一个组件,并使用ES6语法导出 2 | export default { 3 | template: ` 4 |
5 |

{{message}}

6 | 7 |

{{name}}

8 |
9 | `, 10 | data() { 11 | return { 12 | message: "hello webpack and vue", 13 | name: 'zzzz' 14 | } 15 | }, 16 | methods: { 17 | btnClick(){ 18 | console.log("按钮被点击了") 19 | } 20 | }, 21 | } -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/js/info.js: -------------------------------------------------------------------------------- 1 | //es6语法导出 2 | export default { 3 | name:'zzz', 4 | age:24, 5 | } -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/js/mathUtils.js: -------------------------------------------------------------------------------- 1 | //1.新建mathUtils.js，用CommonJs规范导出 2 | function add(num1,num2) { 3 | return num1+num2 4 | } 5 | function mul(num1,num2) { 6 | return num1*num2 7 | } 8 | module.exports = { 9 | add,mul 10 | } -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/main.js: -------------------------------------------------------------------------------- 1 | //2.新建入口js文件main.js 导入mathUtil.js文件，并调用 2 | const {add,mul} = require("./js/mathUtils.js") 3 | 4 | 5 | console.log(add(10,20)) 6 | console.log(mul(10,10)) 7 | 8 | 9 | //3.使用es6语法导入 10 | import info from './js/info.js' 11 | 12 | console.log(info.name) 13 | console.log(info.age) 14 | 15 | 16 | //4.依赖css文件 17 | require('./css/normal.css') 18 | 19 | //5.依赖less文件 20 | require('./css/special.less') 21 | 22 | document.writeln("hello,zzzz!") 23 | 24 | //6.使用vue开发 25 | import Vue from 'vue' 26 | //导入封装组件对象的js模块 27 | // import App from './js/app' 28 | //导入封装vue的.vue文件 29 | import App from './vue/App.vue' 30 | new Vue({ 31 | el: "#app", 32 | //使用组件 33 | template: '', 34 | components: { 35 | //注册局部组件 36 | App 37 | } 38 | }) 39 | 40 | -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/vue/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /15-webpack/06-webpack搭建本地服务器/src/vue/Cpn.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/build/dev.config.js: -------------------------------------------------------------------------------- 1 | //导入webpack-merge对象 2 | const webpackMerge = require('webpack-merge') 3 | //导入base.config.js 4 | const baseConfig = require('./base.config') 5 | 6 | //使用webpackMerge将baseConfig和dev.config的内容合并 7 | module.exports = webpackMerge(baseConfig, { 8 | devServer: { 9 | contentBase: './dist',//服务的文件夹 10 | port: 4000, 11 | inline: true//是否实时刷新 12 | } 13 | 14 | }) 15 | -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/build/dist/img/big.371beee1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/07-webpack的配置文件分离/build/dist/img/big.371beee1.jpg -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/build/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/build/prod.config.js: -------------------------------------------------------------------------------- 1 | const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') 2 | //导入webpack-merge对象 3 | const webpackMerge = require('webpack-merge') 4 | //导入base.config.js 5 | const baseConfig = require('./base.config') 6 | 7 | //使用webpackMerge将baseConfig和prod.config的内容合并 8 | module.exports = webpackMerge(baseConfig, { 9 | plugins:[ 10 | new uglifyjsWebpackPlugin() 11 | ] 12 | }) 13 | -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/07-webpack的配置文件分离/dist/371beee13d7d7037a3180ef9db9d2d2d.jpg -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/dist/img/big.371beee1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/07-webpack的配置文件分离/dist/img/big.371beee1.jpg -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webpack入门 8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "configofwebpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "inedx.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "webpack --config ./build/prod.config.js", 9 | "dev": "webpack-dev-server --open --config ./build/dev.config.js" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.3", 15 | "babel-loader": "^7.1.5", 16 | "babel-preset-es2015": "^6.24.1", 17 | "css-loader": "^3.2.0", 18 | "file-loader": "^4.2.0", 19 | "html-webpack-plugin": "^3.2.0", 20 | "less": "^3.10.3", 21 | "less-loader": "^5.0.0", 22 | "style-loader": "^1.0.0", 23 | "uglifyjs-webpack-plugin": "^1.1.1", 24 | "url-loader": "^2.2.0", 25 | "vue-loader": "^13.0.0", 26 | "vue-template-compiler": "^2.6.10", 27 | "webpack": "^3.6.0", 28 | "webpack-dev-server": "^2.9.1", 29 | "webpack-merge": "^4.2.2" 30 | }, 31 | "dependencies": { 32 | "vue": "^2.6.10" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/css/normal.css: -------------------------------------------------------------------------------- 1 | body{ 2 | /* background-color: red; */ 3 | /* background: url("../img/small.jpg"); */ 4 | background: url("../img/big.jpg"); 5 | } -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/css/special.less: -------------------------------------------------------------------------------- 1 | @fontSize:50px;//定义变量字体大小 2 | @fontColor:orange;//定义变量字体颜色 3 | body{ 4 | font-size: @fontSize; 5 | color: @fontColor; 6 | } -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/img/big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/07-webpack的配置文件分离/src/img/big.jpg -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/img/small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/07-webpack的配置文件分离/src/img/small.jpg -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/js/app.js: -------------------------------------------------------------------------------- 1 | //定义一个组件,并使用ES6语法导出 2 | export default { 3 | template: ` 4 |
5 |

{{message}}

6 | 7 |

{{name}}

8 |
9 | `, 10 | data() { 11 | return { 12 | message: "hello webpack and vue", 13 | name: 'zzzz' 14 | } 15 | }, 16 | methods: { 17 | btnClick(){ 18 | console.log("按钮被点击了") 19 | } 20 | }, 21 | } -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/js/info.js: -------------------------------------------------------------------------------- 1 | //es6语法导出 2 | export default { 3 | name:'zzz', 4 | age:24, 5 | } -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/js/mathUtils.js: -------------------------------------------------------------------------------- 1 | //1.新建mathUtils.js，用CommonJs规范导出 2 | function add(num1,num2) { 3 | return num1+num2 4 | } 5 | function mul(num1,num2) { 6 | return num1*num2 7 | } 8 | module.exports = { 9 | add,mul 10 | } -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/main.js: -------------------------------------------------------------------------------- 1 | //2.新建入口js文件main.js 导入mathUtil.js文件，并调用 2 | const {add,mul} = require("./js/mathUtils.js") 3 | 4 | 5 | console.log(add(10,20)) 6 | console.log(mul(10,10)) 7 | 8 | 9 | //3.使用es6语法导入 10 | import info from './js/info.js' 11 | 12 | console.log(info.name) 13 | console.log(info.age) 14 | 15 | 16 | //4.依赖css文件 17 | require('./css/normal.css') 18 | 19 | //5.依赖less文件 20 | require('./css/special.less') 21 | 22 | document.writeln("hello,zzzz!") 23 | 24 | //6.使用vue开发 25 | import Vue from 'vue' 26 | //导入封装组件对象的js模块 27 | // import App from './js/app' 28 | //导入封装vue的.vue文件 29 | import App from './vue/App.vue' 30 | new Vue({ 31 | el: "#app", 32 | //使用组件 33 | template: '', 34 | components: { 35 | //注册局部组件 36 | App 37 | } 38 | }) 39 | 40 | -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/vue/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /15-webpack/07-webpack的配置文件分离/src/vue/Cpn.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /15-webpack/images/15-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-1.png -------------------------------------------------------------------------------- /15-webpack/images/15-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-10.png -------------------------------------------------------------------------------- /15-webpack/images/15-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-11.png -------------------------------------------------------------------------------- /15-webpack/images/15-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-12.png -------------------------------------------------------------------------------- /15-webpack/images/15-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-13.png -------------------------------------------------------------------------------- /15-webpack/images/15-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-14.png -------------------------------------------------------------------------------- /15-webpack/images/15-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-15.png -------------------------------------------------------------------------------- /15-webpack/images/15-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-16.png -------------------------------------------------------------------------------- /15-webpack/images/15-17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-17.png -------------------------------------------------------------------------------- /15-webpack/images/15-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-18.png -------------------------------------------------------------------------------- /15-webpack/images/15-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-19.png -------------------------------------------------------------------------------- /15-webpack/images/15-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-2.png -------------------------------------------------------------------------------- /15-webpack/images/15-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-20.png -------------------------------------------------------------------------------- /15-webpack/images/15-21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-21.png -------------------------------------------------------------------------------- /15-webpack/images/15-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-22.png -------------------------------------------------------------------------------- /15-webpack/images/15-23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-23.png -------------------------------------------------------------------------------- /15-webpack/images/15-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-24.png -------------------------------------------------------------------------------- /15-webpack/images/15-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-25.png -------------------------------------------------------------------------------- /15-webpack/images/15-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-26.png -------------------------------------------------------------------------------- /15-webpack/images/15-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-27.png -------------------------------------------------------------------------------- /15-webpack/images/15-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-28.png -------------------------------------------------------------------------------- /15-webpack/images/15-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-29.png -------------------------------------------------------------------------------- /15-webpack/images/15-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-3.png -------------------------------------------------------------------------------- /15-webpack/images/15-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-30.png -------------------------------------------------------------------------------- /15-webpack/images/15-31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-31.png -------------------------------------------------------------------------------- /15-webpack/images/15-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-32.png -------------------------------------------------------------------------------- /15-webpack/images/15-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-4.png -------------------------------------------------------------------------------- /15-webpack/images/15-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-5.png -------------------------------------------------------------------------------- /15-webpack/images/15-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-6.png -------------------------------------------------------------------------------- /15-webpack/images/15-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-7.png -------------------------------------------------------------------------------- /15-webpack/images/15-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-8.png -------------------------------------------------------------------------------- /15-webpack/images/15-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/15-webpack/images/15-9.png -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/README.md: -------------------------------------------------------------------------------- 1 | # 01-vueclitest 2 | 3 | > test vue cli2 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/01-vuecli2test/build/logo.png -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 01-vueclitest 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/01-vuecli2test/src/assets/logo.png -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | Vue.config.productionTip = false 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | components: { App }, 12 | template: '' 13 | }) 14 | -------------------------------------------------------------------------------- /16-vue-cli/01-vuecli2test/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/01-vuecli2test/static/.gitkeep -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/README.md: -------------------------------------------------------------------------------- 1 | # 02-runtime-compiler 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/02-runtime-compiler/build/logo.png -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 02-runtime-compiler 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/02-runtime-compiler/src/assets/logo.png -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | Vue.config.productionTip = false 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | // components: { App }, 12 | // template: '' 13 | //1.createElement('标签',{标签属性},['']) 14 | render(createElement){ 15 | // return createElement('h2', 16 | // {class:'box'}, 17 | // ['hello vue', createElement('button',['按钮'])]) 18 | //2.传入组件 19 | return createElement(App) 20 | } 21 | }) 22 | -------------------------------------------------------------------------------- /16-vue-cli/02-runtime-compiler/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/02-runtime-compiler/static/.gitkeep -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/README.md: -------------------------------------------------------------------------------- 1 | # 03-runtime-only 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/03-runtime-only/build/logo.png -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 03-runtime-only 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/03-runtime-only/src/assets/logo.png -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | Vue.config.productionTip = false 5 | 6 | /* eslint-disable no-new */ 7 | new Vue({ 8 | el: '#app', 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /16-vue-cli/03-runtime-only/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/03-runtime-only/static/.gitkeep -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/README.md: -------------------------------------------------------------------------------- 1 | # 03-vuecli3test 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "03-vuecli3test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.3.2", 11 | "vue": "^2.6.10" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^4.0.0", 15 | "@vue/cli-service": "^4.0.0", 16 | "vue-template-compiler": "^2.6.10" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/04-vuecli3test/public/favicon.ico -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 03-vuecli3test 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/04-vuecli3test/src/assets/logo.png -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /16-vue-cli/04-vuecli3test/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | } -------------------------------------------------------------------------------- /16-vue-cli/images/16-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-1.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-10.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-11.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-12.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-2.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-3.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-4.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-5.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-6.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-7.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-8.png -------------------------------------------------------------------------------- /16-vue-cli/images/16-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/16-vue-cli/images/16-9.png -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/README.md: -------------------------------------------------------------------------------- 1 | # 01-vue-router-vuecli2 2 | 3 | > learn vue-router vuecli2 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/01-vue-router-vuecli2/build/logo.png -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 01-vue-router-vuecli2 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/01-vue-router-vuecli2/src/assets/logo.png -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/src/components/About.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | 17 | 19 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 42 | 43 | 45 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/src/components/HomeMessage.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | 20 | 22 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/src/components/HomeNews.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | 20 | 22 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/src/components/Profile.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | 22 | 24 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/src/components/User.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 29 | 30 | 32 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | 5 | //在vue的原型上添加test方法 6 | Vue.prototype.test = function () { 7 | console.log("test") 8 | } 9 | Vue.config.productionTip = false 10 | 11 | /* eslint-disable no-new */ 12 | new Vue({ 13 | el: '#app', 14 | router,//使用路由对象 15 | render: h => h(App) 16 | }) 17 | -------------------------------------------------------------------------------- /17-vue-router/01-vue-router-vuecli2/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/01-vue-router-vuecli2/static/.gitkeep -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/README.md: -------------------------------------------------------------------------------- 1 | # 02-vue-router-tabbar-v1 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/build/logo.png -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 02-vue-router-tabbar-v1 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/assets/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/categories.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/categories.png -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/categories_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/categories_active.png -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/home.png -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/home_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/home_active.png -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/profile.png -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/profile_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/profile_active.png -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/shopcart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/shopcart.png -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/shopcart_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/src/assets/img/tabbar/shopcart_active.png -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/components/tabbar/TabBar.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 28 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/components/tabbar/TabBarItem.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 41 | 42 | 58 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | /* eslint-disable no-new */ 8 | new Vue({ 9 | el: '#app', 10 | router, 11 | render: h => h(App) 12 | }) 13 | 14 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | 5 | Vue.use(Router) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | redirect: '/home'//缺省时候重定向到/home 11 | }, 12 | { 13 | path: '/home', 14 | component: () => import ('../views/home/Home.vue') 15 | }, 16 | { 17 | path: '/categories', 18 | component: () => import ('../views/categories/Categories.vue') 19 | }, 20 | { 21 | path: '/shop', 22 | component: () => import ('../views/shop/Shop.vue') 23 | }, 24 | { 25 | path: '/profile', 26 | component: () => import ('../views/profile/Profile.vue') 27 | }, 28 | ] 29 | 30 | export default new Router({ 31 | routes, 32 | // linkActiveClass:"active" 33 | }) 34 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/views/categories/Categories.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 19 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/views/home/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 19 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/views/profile/Profile.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 19 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/src/views/shop/Shop.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 19 | -------------------------------------------------------------------------------- /17-vue-router/02-vue-router-tabbar-v1/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/02-vue-router-tabbar-v1/static/.gitkeep -------------------------------------------------------------------------------- /17-vue-router/images/17-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-1.png -------------------------------------------------------------------------------- /17-vue-router/images/17-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-10.png -------------------------------------------------------------------------------- /17-vue-router/images/17-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-11.png -------------------------------------------------------------------------------- /17-vue-router/images/17-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-12.png -------------------------------------------------------------------------------- /17-vue-router/images/17-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-13.png -------------------------------------------------------------------------------- /17-vue-router/images/17-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-14.png -------------------------------------------------------------------------------- /17-vue-router/images/17-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-15.png -------------------------------------------------------------------------------- /17-vue-router/images/17-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-16.png -------------------------------------------------------------------------------- /17-vue-router/images/17-17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-17.png -------------------------------------------------------------------------------- /17-vue-router/images/17-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-18.png -------------------------------------------------------------------------------- /17-vue-router/images/17-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-19.png -------------------------------------------------------------------------------- /17-vue-router/images/17-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-2.gif -------------------------------------------------------------------------------- /17-vue-router/images/17-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-20.png -------------------------------------------------------------------------------- /17-vue-router/images/17-21.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-21.gif -------------------------------------------------------------------------------- /17-vue-router/images/17-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-22.png -------------------------------------------------------------------------------- /17-vue-router/images/17-23.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-23.gif -------------------------------------------------------------------------------- /17-vue-router/images/17-24.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-24.gif -------------------------------------------------------------------------------- /17-vue-router/images/17-25.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-25.gif -------------------------------------------------------------------------------- /17-vue-router/images/17-26.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-26.gif -------------------------------------------------------------------------------- /17-vue-router/images/17-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-27.png -------------------------------------------------------------------------------- /17-vue-router/images/17-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-28.png -------------------------------------------------------------------------------- /17-vue-router/images/17-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-29.png -------------------------------------------------------------------------------- /17-vue-router/images/17-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-3.png -------------------------------------------------------------------------------- /17-vue-router/images/17-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-4.png -------------------------------------------------------------------------------- /17-vue-router/images/17-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-5.png -------------------------------------------------------------------------------- /17-vue-router/images/17-6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-6.gif -------------------------------------------------------------------------------- /17-vue-router/images/17-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-7.png -------------------------------------------------------------------------------- /17-vue-router/images/17-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-8.png -------------------------------------------------------------------------------- /17-vue-router/images/17-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hezhang18/VueLearnNotes/393be977f71974b44128735c7e2632798003b847/17-vue-router/images/17-9.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 hezhang18 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VueLearnNotes 2 | 3 | Vue 学习笔记 4 | 5 | - [01-ES6 补充](./01-ES6补充/01-ES6补充.md) 6 | - [02-HelloVue](./02-HelloVue/02-HelloVue.md) 7 | - [03-插值操作](./03-插值操作/03-插值操作.md) 8 | - [04-动态绑定属性](./04-动态绑定属性/04-动态绑定属性.md) 9 | - [05-计算属性与侦听器](./05-计算属性与侦听器/05-计算属性与侦听器.md) 10 | - [06-事件监听](./06-事件监听/06-事件监听.md) 11 | - [07-条件判断](./07-条件判断/07-条件判断.md) 12 | - [08-遍历循环](./08-遍历循环/08-遍历循环.md) 13 | - [09-综合练习](./09-综合练习/09-综合练习.md) 14 | - [10-v-model](./10-v-model/10-v-model.md) 15 | - [11-组件化开发](./11-组件化开发/11-组件化开发.md) 16 | - [12-组件化高级](./12-组件化高级/12-组件化高级.md) 17 | - [13-vue 实例的生命周期](./13-Vue实例的生命周期/13-vue实例的生命周期.md) 18 | - [14-前端模块化](./14-前端模块化/14-前端模块化.md) 19 | - [15-webpack](./15-webpack/15-webpack.md) 20 | - [16-vue-cli](./16-vue-cli/16-vue-cli.md) 21 | - [17-vue-router](./17-vue-router/17-vue-router.md) 22 | - [18-Promise](./18-Promise/18-Promise.md) 23 | - [19-vuex](./19-vuex/19-vuex.md) 24 | --------------------------------------------------------------------------------