├── vueday08-promise ├── files │ ├── 1.txt │ ├── 2.txt │ └── 3.txt ├── data.json ├── package.json ├── 05.演示Jquery中Promise.html ├── 01.封装读取文件的方法.js ├── 02.封装读取文件的方法-提高版.js ├── 03.Promise概念介绍.js ├── 04.使用Promise解决回调地狱.js └── demo.js ├── vueday05 ├── webpack-study │ ├── 先运行 npm install 安装依赖包.txt │ ├── src │ │ ├── css │ │ │ ├── index.css │ │ │ ├── index.less │ │ │ └── index.scss │ │ ├── index.html │ │ └── main.js │ ├── package.json │ └── webpack.config.js └── code │ ├── 03.名称案例.html │ ├── 04.名称案例-方式2.html │ ├── 02.路由基本的使用.html │ ├── 01.父子组件之间传值.html │ ├── 06.名称案例-方式3.html │ └── 05.watch-监视路由地址的改变.html ├── .gitignore ├── vueday06 ├── 01.webpack-study │ ├── 先运行 npm install 安装依赖包.txt │ ├── .babelrc │ ├── src │ │ ├── css │ │ │ ├── index.css │ │ │ └── index.scss │ │ ├── images │ │ │ └── 生小孩.jpg │ │ ├── images2 │ │ │ └── 生小孩.jpg │ │ ├── index.html │ │ └── main.js │ ├── package.json │ ├── webpack.config.js │ └── dist │ │ └── bundle.js ├── 02.webpack-vue1 │ ├── 先运行 npm install 安装依赖包.txt │ ├── .babelrc │ ├── src │ │ ├── index.html │ │ ├── login.vue │ │ ├── test.js │ │ └── main.js │ ├── package.json │ ├── webpack.config.js │ └── dist │ │ └── bundle.js ├── 05.webpack-路由嵌套 │ ├── 先运行 npm install 安装依赖包.txt │ ├── .babelrc │ ├── src │ │ ├── main │ │ │ ├── GoodsList.vue │ │ │ └── Account.vue │ │ ├── subcom │ │ │ ├── register.vue │ │ │ └── login.vue │ │ ├── App.vue │ │ ├── index.html │ │ ├── main.js │ │ └── router.js │ ├── package.json │ ├── webpack.config.js │ └── dist │ │ └── bundle.js ├── 04.webpack-vue-router │ ├── 先运行 npm install 安装依赖包.txt │ ├── .babelrc │ ├── src │ │ ├── main │ │ │ ├── Account.vue │ │ │ └── GoodsList.vue │ │ ├── App.vue │ │ ├── index.html │ │ └── main.js │ ├── package.json │ ├── webpack.config.js │ └── dist │ │ └── bundle.js └── 03.code │ ├── 01.在页面中渲染基本的组件.html │ └── 02.在页面中使用render函数渲染组件.html ├── webpack-demo ├── .babelrc ├── src │ ├── css │ │ ├── 2.scss │ │ ├── 1.less │ │ └── index.css │ ├── imgs │ │ └── fourGold.jpg │ ├── login.vue │ └── index.html ├── main.js ├── package.json └── webpack.config.js ├── vueday02 ├── code │ ├── 代码片段.html │ ├── 03.过滤器的基本使用.html │ ├── 06.客户端JSONP页面.html │ ├── lifecycle.html │ ├── 05.vue-resource基本使用.html │ ├── 04.生命周期函数演示.html │ └── 01.品牌列表案例.html └── node-server │ └── app.js ├── vueday01 ├── 闭包的复习.html ├── 15.今天内容的总结和回顾.html ├── 12.v-for迭代数字.html ├── 08.vue中样式-style.html ├── 09.v-for循环普通数组.html ├── 11.v-for循环对象.html ├── 10.v-for循环对象数组.html ├── 01.Vue的基本代码.html ├── 05.v-model指令的学习.html ├── hellovue.html ├── 14.v-if和v-show的使用.html ├── 13.v-for循环中key属性的使用.html ├── paomadeng.html ├── 06.简易的计算器.html ├── 03.跑马灯效果.html ├── 02.v-cloak的学习.html ├── 07.vue中样式-class.html └── 04.事件修饰符.html ├── vueday03 ├── 02.动画-不使用动画.html ├── 09.组件-创建组件的方式2.html ├── 13.组件切换-方式1.html ├── 11.组件-组件中的data和methods.html ├── 14.组件切换-方式2.html ├── 动画.html ├── 12.组件-why components data must be a function.html ├── 15.组件切换-切换动画.html ├── 03.动画-使用过渡类名实现动画.html ├── 08.组件-创建组件的方式1.html ├── 05.动画-使用第三方类实现动画.html ├── 10.组件-创建组件的方式3.html ├── 04.动画-修改v-前缀.html ├── 06.动画-使用钩子函数模拟小球半场动画.html ├── 07.动画-列表动画.html └── 01.vue-resource改造品牌列表案例.html ├── README.md ├── notes ├── vueday09.md ├── vueday11.md ├── hexo_deploy.md ├── vueday01.md ├── vueday03.md ├── vueday04.md ├── vueday02.md ├── vueday05.md ├── vueday08.md ├── vueday06.md └── vueday07.md └── vueday04 ├── 02.复习-定义组件的方式.html ├── 06.ref获取DOM元素和组件.html ├── 09.路由规则传参方式2.html ├── 08.路由规则中定义参数.html ├── 01.复习-实现小球动画.html ├── 04.组件-父组件把方法传递给子组件.html ├── 10.路由-路由的嵌套.html ├── 03.组件-父组件向子组件传值.html ├── 11.路由-命名视图实现经典布局.html ├── 07.路由-路由的基本使用.html └── 05.组件案例-评论列表.html /vueday08-promise/files/1.txt: -------------------------------------------------------------------------------- 1 | 111 -------------------------------------------------------------------------------- /vueday08-promise/files/2.txt: -------------------------------------------------------------------------------- 1 | 222 -------------------------------------------------------------------------------- /vueday08-promise/files/3.txt: -------------------------------------------------------------------------------- 1 | 333 -------------------------------------------------------------------------------- /vueday05/webpack-study/先运行 npm install 安装依赖包.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | logs 3 | .vscode 4 | .idea -------------------------------------------------------------------------------- /vueday06/01.webpack-study/先运行 npm install 安装依赖包.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vueday06/02.webpack-vue1/先运行 npm install 安装依赖包.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/先运行 npm install 安装依赖包.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/先运行 npm install 安装依赖包.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /webpack-demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "stage-0"] 3 | } -------------------------------------------------------------------------------- /vueday05/webpack-study/src/css/index.css: -------------------------------------------------------------------------------- 1 | li{ 2 | list-style: none; 3 | } -------------------------------------------------------------------------------- /vueday08-promise/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "小强", 3 | "age": 18 4 | } -------------------------------------------------------------------------------- /vueday05/webpack-study/src/css/index.less: -------------------------------------------------------------------------------- 1 | ul{ 2 | padding: 0; 3 | margin: 0; 4 | } -------------------------------------------------------------------------------- /webpack-demo/src/css/2.scss: -------------------------------------------------------------------------------- 1 | ul { 2 | li { 3 | text-align: center; 4 | } 5 | } -------------------------------------------------------------------------------- /webpack-demo/src/css/1.less: -------------------------------------------------------------------------------- 1 | ul { 2 | padding: 0; 3 | li { 4 | height: 100px; 5 | } 6 | } -------------------------------------------------------------------------------- /vueday06/01.webpack-study/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "stage-0"], 3 | "plugins": ["transform-runtime"] 4 | } -------------------------------------------------------------------------------- /vueday06/02.webpack-vue1/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "stage-0"], 3 | "plugins": ["transform-runtime"] 4 | } -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "stage-0"], 3 | "plugins": ["transform-runtime"] 4 | } -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "stage-0"], 3 | "plugins": ["transform-runtime"] 4 | } -------------------------------------------------------------------------------- /vueday06/01.webpack-study/src/css/index.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | margin: 0; 3 | padding: 0; 4 | background-color: cyan; 5 | } -------------------------------------------------------------------------------- /webpack-demo/src/imgs/fourGold.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road/master/webpack-demo/src/imgs/fourGold.jpg -------------------------------------------------------------------------------- /vueday06/01.webpack-study/src/images/生小孩.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road/master/vueday06/01.webpack-study/src/images/生小孩.jpg -------------------------------------------------------------------------------- /vueday06/01.webpack-study/src/images2/生小孩.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road/master/vueday06/01.webpack-study/src/images2/生小孩.jpg -------------------------------------------------------------------------------- /vueday05/webpack-study/src/css/index.scss: -------------------------------------------------------------------------------- 1 | html, body{ 2 | margin: 0; 3 | padding: 0; 4 | 5 | li{ 6 | font-size: 12px; 7 | line-height: 30px; 8 | } 9 | } -------------------------------------------------------------------------------- /webpack-demo/src/css/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | ul { 7 | list-style: none; 8 | background-image: url(../imgs/fourGold.jpg); 9 | } -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/main/GoodsList.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 10 | 11 | 14 | -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/src/main/Account.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 10 | 11 | 14 | -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/src/main/GoodsList.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 10 | 11 | 14 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/subcom/register.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 9 | 10 | 11 | 14 | -------------------------------------------------------------------------------- /webpack-demo/src/login.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/subcom/login.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 9 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /vueday08-promise/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "code", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "01.封装读取文件的方法.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "jquery": "^3.2.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 15 | 16 | 17 | 20 | -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 15 | 16 | 17 | 20 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /vueday06/01.webpack-study/src/css/index.scss: -------------------------------------------------------------------------------- 1 | html, body{ 2 | .box{ 3 | width: 220px; 4 | height: 120px; 5 | // 默认情况下，webpack 无法 处理 CSS 文件中的 url 地址，不管是图片还是 字体库， 只要是 URL 地址，都处理不了 6 | background: url('../images/生小孩.jpg'); 7 | background-size: cover; 8 | } 9 | 10 | .box2{ 11 | width: 220px; 12 | height: 120px; 13 | background: url('../images2/生小孩.jpg'); 14 | background-size: cover; 15 | } 16 | } -------------------------------------------------------------------------------- /vueday06/02.webpack-vue1/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |

{{msg}}

15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /vueday06/02.webpack-vue1/src/login.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /vueday02/code/代码片段.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/main/Account.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 15 | 16 | 25 | -------------------------------------------------------------------------------- /vueday01/闭包的复习.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /vueday01/15.今天内容的总结和回顾.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /vueday06/01.webpack-study/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | // 1. 导入 vue-router 包 3 | import VueRouter from 'vue-router' 4 | // 2. 手动安装 VueRouter 5 | Vue.use(VueRouter) 6 | 7 | // 导入 app 组件 8 | import app from './App.vue' 9 | 10 | // 导入 自定义路由模块 11 | import router from './router.js' 12 | 13 | var vm = new Vue({ 14 | el: '#app', 15 | render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中 16 | router // 4. 将路由对象挂载到 vm 上 17 | }) 18 | 19 | // 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中； 20 | // Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 中去； -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/router.js: -------------------------------------------------------------------------------- 1 | import VueRouter from 'vue-router' 2 | 3 | // 导入 Account 组件 4 | import account from './main/Account.vue' 5 | import goodslist from './main/GoodsList.vue' 6 | 7 | // 导入Account的两个子组件 8 | import login from './subcom/login.vue' 9 | import register from './subcom/register.vue' 10 | 11 | // 3. 创建路由对象 12 | var router = new VueRouter({ 13 | routes: [ 14 | // account goodslist 15 | { 16 | path: '/account', 17 | component: account, 18 | children: [ 19 | { path: 'login', component: login }, 20 | { path: 'register', component: register } 21 | ] 22 | }, 23 | { path: '/goodslist', component: goodslist } 24 | ] 25 | }) 26 | 27 | // 把路由对象暴露出去 28 | export default router -------------------------------------------------------------------------------- /vueday01/12.v-for迭代数字.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |

这是第 {{ count }} 次循环

17 |
18 | 19 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /vueday03/02.动画-不使用动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |

这是一个H3

17 |
18 | 19 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /vueday06/03.code/01.在页面中渲染基本的组件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |

33333

15 | 16 |
17 | 18 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /vueday05/webpack-study/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-study", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot", 9 | "dev": "webpack-dev-server" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "jquery": "^3.2.1" 16 | }, 17 | "devDependencies": { 18 | "css-loader": "^0.28.7", 19 | "html-webpack-plugin": "^2.30.1", 20 | "less": "^2.7.3", 21 | "less-loader": "^4.0.5", 22 | "node-sass": "^4.5.3", 23 | "sass-loader": "^6.0.6", 24 | "style-loader": "^0.19.0", 25 | "webpack": "^3.8.1", 26 | "webpack-dev-server": "^2.9.3" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /webpack-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 | {{msg}} 14 | 15 |
16 | 17 |
18 | 19 | 20 | 34 | 35 | -------------------------------------------------------------------------------- /vueday03/09.组件-创建组件的方式2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /vueday01/08.vue中样式-style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |

这是一个h1

18 |
19 | 20 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /vueday01/09.v-for循环普通数组.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 19 | 20 |

索引值：{{i}} --- 每一项：{{item}}

21 | 22 |
23 | 24 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /vueday01/11.v-for循环对象.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |

值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}

16 |
17 | 18 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /vueday08-promise/05.演示Jquery中Promise.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /vueday01/10.v-for循环对象数组.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |

Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}

15 |
16 | 17 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /webpack-demo/main.js: -------------------------------------------------------------------------------- 1 | // ES6的模块化语法 import $ from 'jquery' 2 | import $ from 'jquery' 3 | // CommonJS规范在node中使用 4 | // const $ = require('jquery') 5 | 6 | // import语法支持引入css文件 7 | import './src/css/index.css' 8 | import './src/css/1.less' 9 | // import './src/css/2.scss' 10 | import 'bootstrap/dist/css/bootstrap.min.css' 11 | 12 | import Vue from 'vue' 13 | 14 | // let register = { 15 | // template: '', 16 | // // data: 17 | // } 18 | 19 | import login from './src/login.vue' 20 | 21 | let vm = new Vue({ 22 | el:'#app', 23 | data: { 24 | msg: '谢俊xxx' 25 | }, 26 | // components: { 27 | // login 28 | // } 29 | render: c => c(login) 30 | }) 31 | 32 | $(function () { 33 | $('li:odd').css('backgroundColor', 'red') 34 | $('li:even').css('backgroundColor', 'yellow') 35 | }) 36 | 37 | class Person { 38 | static info = {name: '谢俊', age: 88} 39 | } 40 | 41 | console.log(Person.info) -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | // 1. 导入 vue-router 包 3 | import VueRouter from 'vue-router' 4 | // 2. 手动安装 VueRouter 5 | Vue.use(VueRouter) 6 | 7 | // 导入 app 组件 8 | import app from './App.vue' 9 | // 导入 Account 组件 10 | import account from './main/Account.vue' 11 | import goodslist from './main/GoodsList.vue' 12 | 13 | // 3. 创建路由对象 14 | var router = new VueRouter({ 15 | routes: [ 16 | // account goodslist 17 | { path: '/account', component: account }, 18 | { path: '/goodslist', component: goodslist } 19 | ] 20 | }) 21 | 22 | var vm = new Vue({ 23 | el: '#app', 24 | render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中 25 | router // 4. 将路由对象挂载到 vm 上 26 | }) 27 | 28 | // 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中； 29 | // Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 中去； -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-study-road 2 | 3 | 学习笔记和学习代码,多多指教! 4 | 5 | ## vue-day01 6 | 7 | [笔记](./notes/vueday01.md "第一天笔记") 8 | 9 | [代码](./vueday01 "第一天代码") 10 | 11 | 12 | ## vue-day02 13 | 14 | [笔记](./notes/vueday02.md "第二天笔记") 15 | 16 | [代码](./vueday02 "第二天代码") 17 | 18 | ## vue-day03 19 | 20 | [笔记](./notes/vueday03.md "第三天笔记") 21 | 22 | [代码](./vueday02 "第三天代码") 23 | 24 | ## vue-day04 25 | 26 | [笔记](./notes/vueday04.md "第四天笔记") 27 | 28 | [代码](./vueday03 "第四天代码") 29 | 30 | ## vue-day05 31 | 32 | [笔记](./notes/vueday05.md "第五天笔记") 33 | 34 | [代码](./vueday04 "第五天代码") 35 | 36 | ## vue-day06 37 | 38 | [笔记](./notes/vueday06.md "第六天笔记") 39 | 40 | [代码](./vueday05 "第六天代码") 41 | 42 | ## vue-day07 43 | 44 | [笔记](./notes/vueday07.md "第七天笔记") 45 | 46 | [代码](./webpack-demo "第七天代码") 47 | 48 | ## vue-day08 49 | 50 | [笔记](./notes/vueday08.md "第八天笔记") 51 | 52 | [代码](./webpack-demo "第八天代码") 53 | 54 | ## vue-day09 55 | 56 | [笔记](./notes/vueday09.md "第八天笔记") 57 | 58 | [代码](./webpack-demo "第九天代码") -------------------------------------------------------------------------------- /vueday06/02.webpack-vue1/src/test.js: -------------------------------------------------------------------------------- 1 | // 这是 Node 中向外暴露成员的形式： 2 | // module.exports = {} 3 | 4 | // 在 ES6中，也通过 规范的形式，规定了 ES6 中如何 导入 和 导出 模块 5 | // ES6中导入模块，使用 import 模块名称 from '模块标识符' import '表示路径' 6 | 7 | // 在 ES6 中，使用 export default 和 export 向外暴露成员： 8 | var info = { 9 | name: 'zs', 10 | age: 20 11 | } 12 | 13 | export default info 14 | 15 | /* export default { 16 | address: '北京' 17 | } */ 18 | 19 | // 注意： export default 向外暴露的成员，可以使用任意的变量来接收 20 | // 注意： 在一个模块中，export default 只允许向外暴露1次 21 | // 注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员 22 | 23 | 24 | 25 | export var title = '小星星' 26 | export var content = '哈哈哈' 27 | 28 | // 注意： 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】 29 | // 注意： export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义 30 | // 注意： 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收； 31 | // 注意： 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名； 32 | 33 | 34 | 35 | 36 | // 在Node中 使用 var 名称 = require('模块标识符') 37 | // module.exports 和 exports 来暴露成员 -------------------------------------------------------------------------------- /vueday03/13.组件切换-方式1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 登录 15 | 注册 16 | 17 | 18 | 19 | 20 |
21 | 22 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /vueday02/node-server/app.js: -------------------------------------------------------------------------------- 1 | // 导入 http 内置模块 2 | const http = require('http') 3 | // 这个核心模块，能够帮我们解析 URL地址，从而拿到 pathname query 4 | const urlModule = require('url') 5 | 6 | // 创建一个 http 服务器 7 | const server = http.createServer() 8 | // 监听 http 服务器的 request 请求 9 | server.on('request', function (req, res) { 10 | 11 | // const url = req.url 12 | const { pathname: url, query } = urlModule.parse(req.url, true) 13 | 14 | if (url === '/getscript') { 15 | // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用 16 | // var scriptStr = 'show()' 17 | 18 | var data = { 19 | name: 'xjj', 20 | age: 18, 21 | gender: '女孩子' 22 | } 23 | 24 | // 'showInfo123({name:"xjj", age: 18, gender: "女孩子"})' 25 | var scriptStr = `${query.callback}(${JSON.stringify(data)})` 26 | // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行 27 | res.end(scriptStr) 28 | } else { 29 | res.end('404') 30 | } 31 | }) 32 | 33 | // 指定端口号并启动服务器监听 34 | server.listen(3000, function () { 35 | console.log('server listen at http://127.0.0.1:3000') 36 | }) -------------------------------------------------------------------------------- /vueday02/code/03.过滤器的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |

{{ msg | msgFormat('疯狂+1', '123') | test }}

15 |
16 | 17 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /vueday06/01.webpack-study/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01.webpack-study", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "webpack-dev-server --open --port 3000 --hot" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.0", 15 | "babel-loader": "^7.1.2", 16 | "babel-plugin-transform-runtime": "^6.23.0", 17 | "babel-preset-env": "^1.6.1", 18 | "babel-preset-stage-0": "^6.24.1", 19 | "css-loader": "^0.28.7", 20 | "file-loader": "^1.1.5", 21 | "html-webpack-plugin": "^2.30.1", 22 | "less": "^2.7.3", 23 | "less-loader": "^4.0.5", 24 | "node-sass": "^4.5.3", 25 | "sass-loader": "^6.0.6", 26 | "style-loader": "^0.19.0", 27 | "url-loader": "^0.6.2", 28 | "webpack": "^3.8.1", 29 | "webpack-dev-server": "^2.9.3" 30 | }, 31 | "dependencies": { 32 | "bootstrap": "^3.3.7" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /notes/vueday09.md: -------------------------------------------------------------------------------- 1 | ## vue day09 ## 2 | 3 | ### vue-cli 脚手架 ### 4 | 5 | 1. 装包 6 | 7 | 全局安装 `webpack` 和 `webpack-cli` 8 | 9 | npm i webpack webpack-cli -g 10 | 11 | 全局安装 `vue-cli` 脚手架包 12 | 13 | npm i vue-cli -g 14 | 15 | 2. 使用脚手架命令新建一个`webpack`工程化的`vue`项目 16 | 17 | 找一个风水宝地 18 | 19 | vue init webpack 项目名称(目录名称) 20 | 21 | 例如: 22 | 23 | PS C:\Users\LTC\Desktop> vue init webpack vue-cms 24 | 25 | ? Project name vue-cms 26 | ? Project description 这是一个高端项目 27 | ? Author TianchengLee 28 | ? Vue build runtime 29 | ? Install vue-router? Yes 30 | ? Use ESLint to lint your code? Yes 建议选No 31 | ? Pick an ESLint preset Standard 32 | ? Set up unit tests No 33 | ? Setup e2e tests with Nightwatch? No 34 | ? Should we run `npm install` for you after the project has been created? (recommended) npm 35 | 36 | 3. 执行以上向导完成后, 会自动开始装包, 注意: 使用的是`npm install`, 速度可能会比较慢 37 | 38 | 如果安装失败, 建议ctrl + C终止后执行`cnpm i` 39 | 40 | 4. 安装完成后所有的webpack配置都已配好, 注意: 但是所有的样式预处理loader都没有安装, 需要使用less就安装less和less-loader, 无需自己配置, 只需要安装即可 41 | -------------------------------------------------------------------------------- /vueday02/code/06.客户端JSONP页面.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 35 | 36 | 37 | 40 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /vueday01/01.Vue的基本代码.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

{{ msg }}

18 |
19 | 20 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /vueday03/11.组件-组件中的data和methods.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /vueday01/05.v-model指令的学习.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |

{{ msg }}

15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /vueday04/02.复习-定义组件的方式.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /vueday08-promise/01.封装读取文件的方法.js: -------------------------------------------------------------------------------- 1 | // 需求：你要封装一个方法，我给你一个要读取文件的路径，你这个方法能帮我读取文件，并把内容返回给我 2 | 3 | const fs = require('fs') 4 | const path = require('path') 5 | 6 | // 这是普通读取文件的方式 7 | /* fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => { 8 | if (err) throw err 9 | console.log(dataStr) 10 | }) */ 11 | 12 | // 初衷： 给定文件路径，返回读取到的内容 13 | // 我们可以规定一下， callback 中，有两个参数，第一个参数，是 失败的结果；第二个参数是成功的结果； 14 | // 同时，我们规定了： 如果成功后，返回的结果，应该位于 callback 参数的第二个位置，此时， 第一个位置 由于没有出错，所以，放一个 null； 如果失败了，则 第一个位置放 Error对象，第二个位置防止一个 undefined 15 | function getFileByPath(fpath, callback) { 16 | fs.readFile(fpath, 'utf-8', (err, dataStr) => { 17 | // 如果报错了，进入if分支后，if后面的代码就没有必要执行了 18 | if (err) return callback(err) 19 | // console.log(dataStr) 20 | // return dataStr 21 | callback(null, dataStr) 22 | }) 23 | } 24 | 25 | /* var result = getFileByPath(path.join(__dirname, './files/1.txt')) 26 | console.log(result) */ 27 | getFileByPath(path.join(__dirname, './files/11.txt'), (err, dataStr) => { 28 | // console.log(dataStr + '-----') 29 | if (err) return console.log(err.message) 30 | console.log(dataStr) 31 | }) -------------------------------------------------------------------------------- /vueday05/code/03.名称案例.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | + 20 | = 21 | 22 | 23 |
24 | 25 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /vueday06/02.webpack-vue1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01.webpack-study", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "webpack-dev-server --open --port 3000 --hot" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.0", 15 | "babel-loader": "^7.1.2", 16 | "babel-plugin-transform-runtime": "^6.23.0", 17 | "babel-preset-env": "^1.6.1", 18 | "babel-preset-stage-0": "^6.24.1", 19 | "css-loader": "^0.28.7", 20 | "file-loader": "^1.1.5", 21 | "html-webpack-plugin": "^2.30.1", 22 | "less": "^2.7.3", 23 | "less-loader": "^4.0.5", 24 | "node-sass": "^4.5.3", 25 | "sass-loader": "^6.0.6", 26 | "style-loader": "^0.19.0", 27 | "url-loader": "^0.6.2", 28 | "vue-loader": "^13.3.0", 29 | "vue-template-compiler": "^2.5.2", 30 | "webpack": "^3.8.1", 31 | "webpack-dev-server": "^2.9.3" 32 | }, 33 | "dependencies": { 34 | "bootstrap": "^3.3.7", 35 | "vue": "^2.5.2" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /vueday05/webpack-study/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01.webpack-study", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "webpack-dev-server --open --port 3000 --hot" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.0", 15 | "babel-loader": "^7.1.2", 16 | "babel-plugin-transform-runtime": "^6.23.0", 17 | "babel-preset-env": "^1.6.1", 18 | "babel-preset-stage-0": "^6.24.1", 19 | "css-loader": "^0.28.7", 20 | "file-loader": "^1.1.5", 21 | "html-webpack-plugin": "^2.30.1", 22 | "less": "^2.7.3", 23 | "less-loader": "^4.0.5", 24 | "node-sass": "^4.5.3", 25 | "sass-loader": "^6.0.6", 26 | "style-loader": "^0.19.0", 27 | "url-loader": "^0.6.2", 28 | "vue-loader": "^13.3.0", 29 | "vue-template-compiler": "^2.5.2", 30 | "webpack": "^3.8.1", 31 | "webpack-dev-server": "^2.9.3" 32 | }, 33 | "dependencies": { 34 | "bootstrap": "^3.3.7", 35 | "vue": "^2.5.2", 36 | "vue-router": "^3.0.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01.webpack-study", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "webpack-dev-server --open --port 3000 --hot" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.0", 15 | "babel-loader": "^7.1.2", 16 | "babel-plugin-transform-runtime": "^6.23.0", 17 | "babel-preset-env": "^1.6.1", 18 | "babel-preset-stage-0": "^6.24.1", 19 | "css-loader": "^0.28.7", 20 | "file-loader": "^1.1.5", 21 | "html-webpack-plugin": "^2.30.1", 22 | "less": "^2.7.3", 23 | "less-loader": "^4.0.5", 24 | "node-sass": "^4.5.3", 25 | "sass-loader": "^6.0.6", 26 | "style-loader": "^0.19.0", 27 | "url-loader": "^0.6.2", 28 | "vue-loader": "^13.3.0", 29 | "vue-template-compiler": "^2.5.2", 30 | "webpack": "^3.8.1", 31 | "webpack-dev-server": "^2.9.3" 32 | }, 33 | "dependencies": { 34 | "bootstrap": "^3.3.7", 35 | "vue": "^2.5.2", 36 | "vue-router": "^3.0.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /vueday01/hellovue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | 18 |

19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /webpack-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev2": "webpack-dev-server", 9 | "dev3": "webpack-dev-server --open --port 3000 --contentBase ./src --hot", 10 | "dev": "webpack-dev-server --open --port 3000 --hot" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "bootstrap": "^3.4.0", 17 | "jquery": "^3.3.1", 18 | "vue": "^2.5.21" 19 | }, 20 | "devDependencies": { 21 | "babel-core": "^6.26.3", 22 | "babel-loader": "^7.1.5", 23 | "babel-preset-env": "^1.7.0", 24 | "babel-preset-stage-0": "^6.24.1", 25 | "css-loader": "^2.1.0", 26 | "file-loader": "^3.0.1", 27 | "html-webpack-plugin": "^3.2.0", 28 | "less": "^3.9.0", 29 | "less-loader": "^4.1.0", 30 | "style-loader": "^0.23.1", 31 | "url-loader": "^1.1.2", 32 | "vue-loader": "^15.4.2", 33 | "vue-template-compiler": "^2.5.21", 34 | "webpack": "^4.28.2", 35 | "webpack-cli": "^3.1.2", 36 | "webpack-dev-server": "^3.1.14" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /vueday03/14.组件切换-方式2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 登录 15 | 注册 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /vueday01/14.v-if和v-show的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

这是用v-if控制的元素

27 |

这是用v-show控制的元素

28 | 29 |
30 | 31 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /vueday03/动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 45 | 46 |

社会毒瘤谢俊

47 | 48 | 49 |
50 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /vueday06/03.code/02.在页面中使用render函数渲染组件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |

444444

15 |
16 | 17 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /vueday03/12.组件-why components data must be a function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 |
18 | 19 |
20 | 21 | 22 | 28 | 29 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /vueday05/code/04.名称案例-方式2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | + 16 | = 17 | 18 | 19 |
20 | 21 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /vueday03/15.组件切换-切换动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 22 | 23 | 24 | 25 |
26 | 登录 27 | 注册 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /vueday03/03.动画-使用过渡类名实现动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 |

这是一个H3

37 | 38 |
39 | 40 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /vueday05/code/02.路由基本的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 登录 17 | 注册 18 | 19 | 20 | 21 | 22 |
23 | 24 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /vueday08-promise/02.封装读取文件的方法-提高版.js: -------------------------------------------------------------------------------- 1 | // 需求：你要封装一个方法，我给你一个要读取文件的路径，你这个方法能帮我读取文件，并把内容返回给我 2 | 3 | const fs = require('fs') 4 | const path = require('path') 5 | 6 | 7 | function getFileByPath(fpath, succCb, errCb) { 8 | fs.readFile(fpath, 'utf-8', (err, dataStr) => { 9 | if (err) return errCb(err) 10 | succCb(dataStr) 11 | }) 12 | } 13 | 14 | // getFileByPath(path.join(__dirname, './files/11.txt'), function (data) { 15 | // console.log(data + '娃哈哈，成功了！！！') 16 | // }, function (err) { 17 | // console.log('失败的结果，我们使用失败的回调处理了一下：' + err.message) 18 | // }) 19 | 20 | // 需求： 先读取文件1，再读取文件2，最后再读取文件3 21 | // 回调地狱 22 | // 使用 ES6 中的 Promise，来解决 回调地狱的问题； 23 | // 问： Promise 的本质是要干什么的：就是单纯的为了解决回调地狱问题；并不能帮我们减少代码量； 24 | getFileByPath(path.join(__dirname, './files/1.txt'), function (data) { 25 | console.log(data) 26 | 27 | getFileByPath(path.join(__dirname, './files/2.txt'), function (data) { 28 | console.log(data) 29 | 30 | getFileByPath(path.join(__dirname, './files/3.txt'), function (data) { 31 | console.log(data) 32 | }) 33 | }) 34 | }) 35 | 36 | // getFileByPath(path.join(__dirname, './files/1.txt'), function (data) { 37 | // console.log(data) 38 | // }) 39 | 40 | // getFileByPath(path.join(__dirname, './files/2.txt'), function (data) { 41 | // console.log(data) 42 | // }) 43 | 44 | // getFileByPath(path.join(__dirname, './files/3.txt'), function (data) { 45 | // console.log(data) 46 | // }) -------------------------------------------------------------------------------- /vueday02/code/lifecycle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | {{ msg }} 15 |
16 | 17 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /vueday05/code/01.父子组件之间传值.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 | 26 | 27 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /vueday04/06.ref获取DOM元素和组件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |

哈哈哈， 今天天气太好了！！！

17 | 18 |
19 | 20 | 21 |
22 | 23 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /vueday03/08.组件-创建组件的方式1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /vueday04/09.路由规则传参方式2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 登录 18 | 注册 19 | 20 | 21 | 22 |
23 | 24 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /vueday04/08.路由规则中定义参数.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 登录 18 | 注册 19 | 20 | 21 | 22 |
23 | 24 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /vueday06/01.webpack-study/webpack.config.js: -------------------------------------------------------------------------------- 1 | // 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的 2 | var path = require('path') 3 | // 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部 4 | // 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点 5 | var htmlWebpackPlugin = require('html-webpack-plugin') 6 | 7 | // 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建 8 | module.exports = { 9 | entry: path.join(__dirname, './src/main.js'), // 入口文件 10 | output: { // 指定输出选项 11 | path: path.join(__dirname, './dist'), // 输出路径 12 | filename: 'bundle.js' // 指定输出文件的名称 13 | }, 14 | plugins: [ // 所有webpack 插件的配置节点 15 | new htmlWebpackPlugin({ 16 | template: path.join(__dirname, './src/index.html'), // 指定模板文件路径 17 | filename: 'index.html' // 设置生成的内存页面的名称 18 | }) 19 | ], 20 | module: { // 配置所有第三方loader 模块的 21 | rules: [ // 第三方模块的匹配规则 22 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader 23 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader 24 | { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader 25 | { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader 26 | // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串 27 | { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 28 | { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法 29 | ] 30 | } 31 | } -------------------------------------------------------------------------------- /vueday03/05.动画-使用第三方类实现动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 27 | 28 | 29 | 32 | 33 | 34 | 38 |

这是一个H3

39 | 40 |
41 | 42 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /vueday01/13.v-for循环中key属性的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 19 | 20 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |

32 | {{item.id}} --- {{item.name}} 33 |

34 |
35 | 36 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /vueday05/code/06.名称案例-方式3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | + 18 | + 19 | 20 | 21 |

{{ fullname }}

22 |

{{ fullname }}

23 |

{{ fullname }}

24 | 25 |
26 | 27 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /vueday05/code/05.watch-监视路由地址的改变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 登录 17 | 注册 18 | 19 | 20 | 21 | 22 |
23 | 24 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /vueday03/10.组件-创建组件的方式3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 | 22 |
23 | 24 | 25 | 31 | 32 | 35 | 36 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /vueday04/01.复习-实现小球动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 28 |
29 | 30 |
31 | 32 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /vueday04/04.组件-父组件把方法传递给子组件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 24 | 25 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /vueday02/code/05.vue-resource基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
21 | 22 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /vueday01/paomadeng.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |

{{ msg }}

18 |
19 | 20 |
21 | 22 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /vueday04/10.路由-路由的嵌套.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | Account 17 | 18 | 19 | 20 |
21 | 22 | 32 | 33 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /vueday06/02.webpack-vue1/webpack.config.js: -------------------------------------------------------------------------------- 1 | // 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的 2 | var path = require('path') 3 | // 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部 4 | // 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点 5 | var htmlWebpackPlugin = require('html-webpack-plugin') 6 | 7 | // 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建 8 | module.exports = { 9 | entry: path.join(__dirname, './src/main.js'), // 入口文件 10 | output: { // 指定输出选项 11 | path: path.join(__dirname, './dist'), // 输出路径 12 | filename: 'bundle.js' // 指定输出文件的名称 13 | }, 14 | plugins: [ // 所有webpack 插件的配置节点 15 | new htmlWebpackPlugin({ 16 | template: path.join(__dirname, './src/index.html'), // 指定模板文件路径 17 | filename: 'index.html' // 设置生成的内存页面的名称 18 | }) 19 | ], 20 | module: { // 配置所有第三方loader 模块的 21 | rules: [ // 第三方模块的匹配规则 22 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader 23 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader 24 | { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader 25 | { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader 26 | // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串 27 | { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 28 | { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法 29 | { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader 30 | ] 31 | }, 32 | resolve: { 33 | alias: { // 修改 Vue 被导入时候的包的路径 34 | // "vue$": "vue/dist/vue.js" 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/webpack.config.js: -------------------------------------------------------------------------------- 1 | // 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的 2 | var path = require('path') 3 | // 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部 4 | // 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点 5 | var htmlWebpackPlugin = require('html-webpack-plugin') 6 | 7 | // 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建 8 | module.exports = { 9 | entry: path.join(__dirname, './src/main.js'), // 入口文件 10 | output: { // 指定输出选项 11 | path: path.join(__dirname, './dist'), // 输出路径 12 | filename: 'bundle.js' // 指定输出文件的名称 13 | }, 14 | plugins: [ // 所有webpack 插件的配置节点 15 | new htmlWebpackPlugin({ 16 | template: path.join(__dirname, './src/index.html'), // 指定模板文件路径 17 | filename: 'index.html' // 设置生成的内存页面的名称 18 | }) 19 | ], 20 | module: { // 配置所有第三方loader 模块的 21 | rules: [ // 第三方模块的匹配规则 22 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader 23 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader 24 | { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader 25 | { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader 26 | // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串 27 | { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 28 | { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法 29 | { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader 30 | ] 31 | }, 32 | resolve: { 33 | alias: { // 修改 Vue 被导入时候的包的路径 34 | // "vue$": "vue/dist/vue.js" 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/webpack.config.js: -------------------------------------------------------------------------------- 1 | // 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的 2 | var path = require('path') 3 | // 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部 4 | // 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点 5 | var htmlWebpackPlugin = require('html-webpack-plugin') 6 | 7 | // 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建 8 | module.exports = { 9 | entry: path.join(__dirname, './src/main.js'), // 入口文件 10 | output: { // 指定输出选项 11 | path: path.join(__dirname, './dist'), // 输出路径 12 | filename: 'bundle.js' // 指定输出文件的名称 13 | }, 14 | plugins: [ // 所有webpack 插件的配置节点 15 | new htmlWebpackPlugin({ 16 | template: path.join(__dirname, './src/index.html'), // 指定模板文件路径 17 | filename: 'index.html' // 设置生成的内存页面的名称 18 | }) 19 | ], 20 | module: { // 配置所有第三方loader 模块的 21 | rules: [ // 第三方模块的匹配规则 22 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader 23 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader 24 | { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader 25 | { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader 26 | // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串 27 | { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 28 | { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法 29 | { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader 30 | ] 31 | }, 32 | resolve: { 33 | alias: { // 修改 Vue 被导入时候的包的路径 34 | // "vue$": "vue/dist/vue.js" 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /vueday03/04.动画-修改v-前缀.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 41 | 42 | 43 | 44 |
45 | 46 | 47 | 48 | 49 | 50 |

这是一个H3

51 | 52 | 53 | 54 |
55 | 56 | 57 | 58 |
这是一个H6
59 | 60 |
61 | 62 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /vueday08-promise/03.Promise概念介绍.js: -------------------------------------------------------------------------------- 1 | // 1. Promise 是一个 构造函数，既然是构造函数， 那么，我们就可以 new Promise() 得到一个 Promise 的实例； 2 | // 2. 在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数） 3 | // 3. 在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法 4 | // 4. Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作； 5 | // 5. 既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态： 6 | // 5.1 状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者； 7 | // 5.2 状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者； 8 | // 5.3 由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来把 成功 或 失败的结果，返回给调用者； 9 | // 6. 我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，【预先】 为 这个 Promise 异步操作，指定 成功（resolve） 和 失败（reject） 回调函数； 10 | 11 | 12 | // 注意：这里 new 出来的 promise， 只是代表 【形式上】的一个异步操作； 13 | // 什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是做什么具体的异步事情，目前还不清楚 14 | // var promise = new Promise() 15 | 16 | 17 | // 这是一个具体的异步操作，其中，使用 function 指定一个具体的异步操作 18 | /* var promise = new Promise(function(){ 19 | // 这个 function 内部写的就是具体的异步操作！！！ 20 | }) */ 21 | 22 | const fs = require('fs') 23 | 24 | // 每当 new 一个 Promise 实例的时候，就会立即 执行这个 异步操作中的代码 25 | // 也就是说，new 的时候，除了能够得到 一个 promise 实例之外，还会立即调用 我们为 Promise 构造函数传递的那个 function，执行这个 function 中的 异步操作代码； 26 | /* var promise = new Promise(function () { 27 | fs.readFile('./files/2.txt', 'utf-8', (err, dataStr) => { 28 | if (err) throw err 29 | console.log(dataStr) 30 | }) 31 | }) */ 32 | 33 | 34 | // 初衷： 给路径，返回读取到的内容 35 | function getFileByPath(fpath) { 36 | return new Promise(function (resolve, reject) { 37 | fs.readFile(fpath, 'utf-8', (err, dataStr) => { 38 | 39 | if (err) return reject(err) 40 | resolve(dataStr) 41 | 42 | }) 43 | }) 44 | } 45 | 46 | /* getFileByPath('./files/2.txt') 47 | .then(function (data) { 48 | console.log(data + '-------') 49 | }, function (err) { 50 | console.log(err.message) 51 | }) */ -------------------------------------------------------------------------------- /vueday01/06.简易的计算器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /vueday05/webpack-study/src/main.js: -------------------------------------------------------------------------------- 1 | // 这是 main.js 是我们项目的JS入口文件 2 | 3 | // 1. 导入 Jquery 4 | // import *** from *** 是ES6中导入模块的方式 5 | // 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错 6 | import $ from 'jquery' 7 | // const $ = require('jquery') 8 | 9 | // 使用 import 语法，导入 CSS样式表 10 | import './css/index.css' 11 | import './css/index.less' 12 | import './css/index.scss' 13 | // 注意： webpack, 默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件； 14 | // 如果要处理 非JS类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器； 15 | // 1. 如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D 16 | // 2. 打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做 module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules 属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则； 17 | 18 | 19 | // 注意： webpack 处理第三方文件类型的过程： 20 | // 1. 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则 21 | // 2. 如果能找到对应的规则， 就会调用 对应的 loader 处理 这种文件类型； 22 | // 3. 在调用loader 的时候，是从后往前调用的； 23 | // 4. 当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到 bundle.js 中去 24 | 25 | 26 | 27 | 28 | $(function () { 29 | $('li:odd').css('backgroundColor', 'yellow') 30 | $('li:even').css('backgroundColor', function () { 31 | return '#' + 'D97634' 32 | }) 33 | }) 34 | 35 | 36 | // 经过刚才的演示，Webpack 可以做什么事情？？？ 37 | // 1. webpack 能够处理 JS 文件的互相依赖关系； 38 | // 2. webpack 能够处理JS的兼容问题，把 高级的、浏览器不是别的语法，转为 低级的，浏览器能正常识别的语法 39 | 40 | // 刚才运行的命令格式： webpack 要打包的文件的路径 打包好的输出文件的路径 41 | 42 | 43 | 44 | // 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能 45 | // 1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖 46 | // 2. 安装完毕后，这个 工具的用法， 和 webpack 命令的用法，完全一样 47 | // 3. 由于，我们是在项目中，本地安装的 webpack-dev-server ， 所以，无法把它当作 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行） 48 | // 4. 注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack 49 | // 5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到 实际的 物理磁盘上；而是，直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js; 50 | // 6. 我们可以认为， webpack-dev-server 把打包好的 文件，以一种虚拟的形式，托管到了 咱们项目的 根目录中，虽然我们看不到它，但是，可以认为， 和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js -------------------------------------------------------------------------------- /vueday06/02.webpack-vue1/src/main.js: -------------------------------------------------------------------------------- 1 | // 如何在 webpack 构建的项目中，使用 Vue 进行开发 2 | 3 | // 复习 在普通网页中如何使用vue： 4 | // 1. 使用 script 标签 ，引入 vue 的包 5 | // 2. 在 index 页面中，创建 一个 id 为 app div 容器 6 | // 3. 通过 new Vue 得到一个 vm 的实例 7 | 8 | 9 | // 在webpack 中尝试使用 Vue： 10 | // 注意： 在 webpack 中， 使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式； 11 | import Vue from 'vue' 12 | // import Vue from '../node_modules/vue/dist/vue.js' 13 | // 回顾 包的查找规则： 14 | // 1. 找 项目根目录中有没有 node_modules 的文件夹 15 | // 2. 在 node_modules 中 根据包名，找对应的 vue 文件夹 16 | // 3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件 17 | // 4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】 18 | 19 | // var login = { 20 | // template: '

这是login组件，是使用网页中形式创建出来的组件

' 21 | // } 22 | 23 | 24 | // 1. 导入 login 组件 25 | import login from './login.vue' 26 | // 默认，webpack 无法打包 .vue 文件，需要安装 相关的loader： 27 | // cnpm i vue-loader vue-template-compiler -D 28 | // 在配置文件中，新增loader哦配置项 { test:/\.vue$/, use: 'vue-loader' } 29 | 30 | var vm = new Vue({ 31 | el: '#app', 32 | data: { 33 | msg: '123' 34 | }, 35 | // components: { 36 | // login 37 | // } 38 | /* render: function (createElements) { // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现 39 | return createElements(login) 40 | } */ 41 | 42 | render: c => c(login) 43 | }) 44 | 45 | 46 | // 总结梳理： webpack 中如何使用 vue : 47 | // 1. 安装vue的包： cnpm i vue -S 48 | // 2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D 49 | // 3. 在 main.js 中，导入 vue 模块 import Vue from 'vue' 50 | // 4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style 51 | // 5. 使用 import login from './login.vue' 导入这个组件 52 | // 6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) }) 53 | // 7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域； 54 | 55 | 56 | import m222, { title as title123, content } from './test.js' 57 | console.log(m222) 58 | console.log(title123 + ' --- ' + content) -------------------------------------------------------------------------------- /vueday01/03.跑马灯效果.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 |

{{ msg }}

20 | 21 |
22 | 23 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /vueday05/webpack-study/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | // 启用热更新的 第2步 3 | const webpack = require('webpack') 4 | // 导入在内存中生成 HTML 页面的 插件 5 | // 只要是插件，都一定要 放到 plugins 节点中去 6 | // 这个插件的两个作用： 7 | // 1. 自动在内存中根据指定页面生成一个内存的页面 8 | // 2. 自动，把打包好的 bundle.js 追加到页面中去 9 | const htmlWebpackPlugin = require('html-webpack-plugin') 10 | 11 | // 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象 12 | module.exports = { 13 | // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口 14 | entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件 15 | output: { // 输出文件相关的配置 16 | path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去 17 | filename: 'bundle.js' // 这是指定 输出的文件的名称 18 | }, 19 | devServer: { // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些 20 | // --open --port 3000 --contentBase src --hot 21 | open: true, // 自动打开浏览器 22 | port: 3000, // 设置启动时候的运行端口 23 | contentBase: 'src', // 指定托管的根目录 24 | hot: true // 启用热更新 的 第1步 25 | }, 26 | plugins: [ // 配置插件的节点 27 | new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步 28 | new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML 页面的插件 29 | template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面 30 | filename: 'index.html' // 指定生成的页面的名称 31 | }) 32 | ], 33 | module: { // 这个节点，用于配置 所有 第三方模块 加载器 34 | rules: [ // 所有第三方模块的 匹配规则 35 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的第三方loader 规则 36 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则 37 | { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则 38 | ] 39 | } 40 | } 41 | 42 | // 当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步： 43 | // 1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口 44 | // 2. webpack 就会去 项目的 根目录中，查找一个叫做 `webpack.config.js` 的配置文件 45 | // 3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象 46 | // 4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建； -------------------------------------------------------------------------------- /vueday01/02.v-cloak的学习.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

++++++++ {{ msg }} ----------

21 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 | 41 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /vueday04/03.组件-父组件向子组件传值.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /vueday01/07.vue中样式-class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /vueday04/11.路由-命名视图实现经典布局.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 44 | 45 | 46 | 47 |
48 | 49 | 50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /notes/vueday11.md: -------------------------------------------------------------------------------- 1 | ## vue day11 ## 2 | 3 | ### VSCode快捷键 ### 4 | 5 | 1. 向上/下移动代码片段 6 | 7 | alt + 上箭头或下箭头 8 | 9 | 2. 向上/下复制代码片段 10 | 11 | alt + shift + 上箭头或下箭头 12 | 13 | 3. 换至下一行 14 | 15 | ctrl + enter 16 | 17 | 4. 换至上一行 18 | 19 | ctrl + shift + enter 20 | 21 | 5. 删除选中行 22 | 23 | ctrl + shift + k 24 | 25 | 6. 关闭当前窗口 26 | 27 | ctrl + w 28 | 29 | ### mui滑动插件的bug处理方案 ### 30 | 31 | babel的目的是将ES6或更高级的语法转换为ES5的语法 32 | 33 | 在使用babel5以上时, 默认会将每个js文件加上 `'use strict'` 开启严格模式, 而`mui`中使用了`arguments`, 所以会报错 34 | 35 | 方案1: 放弃mui 舍弃 36 | 37 | 方案2: 关闭babel默认开启的严格模式 目前版本(babel6及以上) 已经无法通过插件关闭严格模式了 故 舍弃 38 | 39 | 方案3: 忽略某个文件 采用此方案 40 | 41 | 在`.babelrc`的配置文件中, 添加ignore节点: 42 | 43 | { 44 | "presets": [ 45 | ["env", { 46 | "modules": false, 47 | "targets": { 48 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 49 | } 50 | }], 51 | "stage-2" 52 | ], 53 | "ignore": [ 54 | "./src/lib/mui/js/mui.js" 55 | ] 56 | } 57 | 58 | ### vue-preview插件的注意事项 ### 59 | 60 | - 由于vue-preview插件已经更新, 所以调整样式很麻烦, 这里推荐使用插件 vue2-preview, 这是一个机制的小伙子保留下来的旧版本插件 61 | 62 | - 但是这个机制的小伙子也更新了插件, 所以选择vue2-preview的1.0.2的版本进行使用 63 | 64 | 1. 装包 65 | 66 | npm i vue2-preview@1.0.2 -S 67 | 68 | 2. 配置loader 69 | 70 | 如果你是使用vue-cli生成的项目，可能需要你修改webpack.base.conf.js文件中的loaders，添加一个loader。 原因：插件编写中使用了es6的语法，需要进行代码编译 71 | 72 | { 73 | test: /vue-preview.src.*?js$/, 74 | loader: 'babel' 75 | } 76 | 77 | 3. 安装插件 78 | 79 | import VuePreview from 'vue2-preview' 80 | Vue.use(VuePreview) 81 | 82 | 4. 使用案例 83 | 84 | 87 | 88 | -------------------------------------------------------------------------------- /vueday06/01.webpack-study/src/main.js: -------------------------------------------------------------------------------- 1 | // 项目的JS入口文件 2 | console.log('ok') 3 | 4 | import './css/index.css' 5 | import './css/index.scss' 6 | // 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径 7 | // 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找 8 | import 'bootstrap/dist/css/bootstrap.css' 9 | 10 | // class 关键字，是ES6中提供的新语法，是用来 实现 ES6 中面向对象编程的方式 11 | class Person { 12 | // 使用 static 关键字，可以定义静态属性 13 | // 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性 14 | // 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性 15 | static info = { name: 'zs', age: 20 } 16 | } 17 | 18 | // 访问 Person 类身上的 info 静态属性 19 | console.log(Person.info) 20 | // 在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中 21 | // 通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法 22 | // 1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能： 23 | // 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D 24 | // 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D 25 | // 2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则： 26 | // 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ } 27 | // 2.2 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩： 28 | // 2.2.1 如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢； 29 | // 2.2.2 哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！ 30 | // 3. 在项目的 根目录中，新建一个 叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号 31 | // 3.1 在 .babelrc 写如下的配置： 大家可以把 preset 翻译成 【语法】 的意思 32 | // { 33 | // "presets": ["env", "stage-0"], 34 | // "plugins": ["transform-runtime"] 35 | // } 36 | // 4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法 37 | 38 | 39 | 40 | // Java C# 实现面向对象的方式完全一样了， class 是从后端语言中借鉴过来的， 来实现面向对象 41 | // var p1 = new Person() 42 | 43 | 44 | // function Animal(name){ 45 | // this.name = name 46 | // } 47 | // Animal.info = 123 48 | 49 | // var a1 = new Animal('小花') 50 | 51 | // // 这是静态属性： 52 | // // console.log(Animal.info) 53 | // // 这是实例属性： 54 | // console.log(a1.name) -------------------------------------------------------------------------------- /vueday02/code/04.生命周期函数演示.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |

{{ msg }}

16 |
17 | 18 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /vueday08-promise/04.使用Promise解决回调地狱.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | 3 | function getFileByPath(fpath) { 4 | return new Promise(function (resolve, reject) { 5 | fs.readFile(fpath, 'utf-8', (err, dataStr) => { 6 | 7 | if (err) return reject(err) 8 | resolve(dataStr) 9 | 10 | }) 11 | }) 12 | } 13 | 14 | // 先读取文件1，在读取2，最后读取3 15 | // 注意： 通过 .then 指定 回调函数的时候，成功的 回调函数，必须传，但是，失败的回调，可以省略不传 16 | // 这是一个 错误的示范，千万不要这么用； 硬是把 法拉利，开成了 拖拉机； 17 | /* getFileByPath('./files/1.txt') 18 | .then(function (data) { 19 | console.log(data) 20 | 21 | getFileByPath('./files/2.txt') 22 | .then(function (data) { 23 | console.log(data) 24 | 25 | getFileByPath('./files/3.txt') 26 | .then(function (data) { 27 | console.log(data) 28 | }) 29 | }) 30 | }) */ 31 | 32 | // 读取文件1 33 | // 在上一个 .then 中，返回一个新的 promise 实例，可以继续用下一个 .then 来处理 34 | 35 | 36 | // 如果 ，前面的 Promise 执行失败，我们不想让后续的Promise 操作被终止，可以为 每个 promise 指定 失败的回调 37 | /* getFileByPath('./files/11.txt') 38 | .then(function (data) { 39 | console.log(data) 40 | 41 | // 读取文件2 42 | return getFileByPath('./files/2.txt') 43 | }, function (err) { 44 | console.log('这是失败的结果：' + err.message) 45 | // return 一个 新的 Promise 46 | return getFileByPath('./files/2.txt') 47 | }) 48 | .then(function (data) { 49 | console.log(data) 50 | 51 | return getFileByPath('./files/3.txt') 52 | }) 53 | .then(function (data) { 54 | console.log(data) 55 | }).then(function (data) { 56 | console.log(data) 57 | }) */ 58 | 59 | // console.log('OKOKOK') 60 | 61 | 62 | 63 | // 当 我们有这样的需求： 哪怕前面的 Promise 执行失败了，但是，不要影响后续 promise 的正常执行，此时，我们可以单独为 每个 promise，通过 .then 指定一下失败的回调； 64 | 65 | // 有时候，我们有这样的需求，个上面的需求刚好相反：如果 后续的Promise 执行，依赖于 前面 Promise 执行的结果，如果前面的失败了，则后面的就没有继续执行下去的意义了，此时，我们想要实现，一旦有报错，则立即终止所有 Promise的执行； 66 | 67 | getFileByPath('./files/1.txt') 68 | .then(function (data) { 69 | console.log(data) 70 | 71 | // 读取文件2 72 | return getFileByPath('./files/22.txt') 73 | }) 74 | .then(function (data) { 75 | console.log(data) 76 | 77 | return getFileByPath('./files/3.txt') 78 | }) 79 | .then(function (data) { 80 | console.log(data) 81 | }) 82 | .catch(function (err) { // catch 的作用： 如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并 马上进入 catch 去处理 Promise中 抛出的异常； 83 | console.log('这是自己的处理方式：' + err.message) 84 | }) -------------------------------------------------------------------------------- /vueday03/06.动画-使用钩子函数模拟小球半场动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 28 |
29 | 30 |
31 | 32 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /webpack-demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | // 完全遵循了CommonJS规范 这里可以直接写node平台的代码 2 | const path = require('path') 3 | // 1. 导入webpack 4 | const webpack = require('webpack') 5 | 6 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 7 | 8 | // 导入HtmlWebpackPlugin 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | 11 | module.exports = { 12 | entry: './main.js', // 指定入口, 相对路径和绝对路径均可 13 | output: { 14 | // path: 'c:\users\ltc\desktop\vue-study-road' 15 | path: path.join(__dirname, './dist'), // 指定出口目录, 必须是绝对路径, 相对路径会报错!!! 16 | filename: 'bundle.js' // 指定出口文件名 17 | }, // 指定出口, 如果不设置, 默认是 ./dist 目录, 输出入口文件同名的文件 18 | // devServer: { 19 | // contentBase: path.join(__dirname, 'src'), // 托管根路径 20 | // compress: true, // 启用压缩 21 | // port: 3000, // 端口号 22 | // open: true, // 自动打开浏览器 23 | // hot: true // 2. 开启热更新 如果设置hot为true 需要手动添加HMR插件, 详见第三步 24 | // }, 25 | plugins: [ // 插件配置项 26 | new webpack.HotModuleReplacementPlugin(), // 3. 添加热更新插件 27 | new HtmlWebpackPlugin({ // 用于帮助我们自动生成HTML文件的 28 | template: './src/index.html', // 如果不指定template, 默认生成一个空的HTML5页面, 指定template表示从哪个HTML文件编译一个新的HTML出来 29 | filename: 'index.html' // 便于开发人员自己查看 30 | }), 31 | new VueLoaderPlugin() 32 | ], 33 | module: { 34 | rules: [ 35 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 36 | // less-loader 37 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, 38 | // { test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 39 | { 40 | test: /\.(png|jpg|gif|jpeg|bmp|webp)$/, 41 | use: ['url-loader?limit=8192&name=[hash:8]-[name].[ext]'] 42 | // use: [ 43 | // { 44 | // loader: 'url-loader', 45 | // options: { 46 | // limit: 8192 // 限制 单位为byte 8192字节是8KB 47 | // } 48 | // } 49 | // ] 50 | }, 51 | { test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] }, 52 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, 53 | { test: /\.vue$/, use: 'vue-loader' } 54 | ] 55 | }, 56 | // resolve: { 57 | // alias: { 58 | // 'vue$': 'vue/dist/vue.js' 59 | // } 60 | // }, 61 | // express.Router() 62 | mode: 'development' // 开发 developer 开发者 programmer 程序员 63 | } 64 | 65 | // function fn() { } 66 | 67 | // fn.call(null, 1, 2, 3, 4) 68 | // fn.apply(null, [1, 2, 3, 4]) 69 | // fn.bind() // ES5之后才有的 一般不用 70 | -------------------------------------------------------------------------------- /vueday01/04.事件修饰符.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 30 | 31 | 32 | 33 | 34 | 35 | 38 | 39 | 40 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 54 | 55 | 56 | 61 | 62 |
63 | 64 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /notes/hexo_deploy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 使用hexo部署一个博客服务器 3 | date: 2018-12-25 18:38:04 4 | tags: 5 | --- 6 | 7 | 8 | ## 使用hexo部署一个博客服务器 9 | 10 | ### 环境准备 ### 11 | 12 | 1. 安装node.js 13 | 2. 安装git 14 | 15 | 如果不会, 自行百度 16 | 17 | ### 安装hexo相关的工具 ### 18 | 19 | 1. 全局安装 `hexo-cli` 20 | 21 | npm i hexo-cli -g 22 | 23 | ### 创建一个博客项目 ### 24 | 25 | 1. 使用`hexo init <目录名>` 26 | 27 | 下载时间较长, 比较耗时, 需要去github下载模板代码 28 | 29 | hexo init hexo-blog 30 | 31 | 2. 使用`npm install`安装项目依赖 32 | 33 | cd hexo-blog 34 | npm i 35 | 36 | 3. 当安装完毕后, 目录中就会有一系列文件, 其中 `_config.yml` 存放着博客的配置信息 37 | 38 | 4. `_config.yml` 配置项如下: 39 | 40 | title: 天成的个人博客 # 标题 41 | subtitle: Code is my life. # 子标题 42 | description: Code is my life. # 描述 43 | keywords: Web,前端,node,ES6,开发,程序员,技术宅,java,android,Python,爬虫 # 关键词, 用于做SEO优化 44 | author: 李天成 # 作者 45 | language: zh-CN # 语言 46 | timezone: Asia/Shanghai # 时区 47 | 48 | 更多配置参见官网配置文档 49 | 50 | 5. 使用`hexo new <文章标题>`来写博客 51 | 52 | hexo new frontend_niubi 53 | 54 | 执行完该命令后, 会在 `./source/_posts/`目录下新建一个 `frontend_niubi.md` 文件 55 | 56 | 之后就可以随心所欲的写笔记了! 57 | 58 | 6. 写完笔记后, 使用 `hexo g` 命令结合主题(配置文件中: theme: landscape)和笔记(./srouce/_posts/目录中)生成HTML/css/js静态文件 59 | 60 | hexo g 61 | 62 | 执行完命令后, 会在 `./public` 中生成静态文件 63 | 64 | 7. 最后只需要执行`hexo server` 启动服务器, 即可看到博客了! 65 | 66 | hexo server 67 | 68 | 默认开启端口是4000, 通过 -p 可以指定端口号 69 | 70 | hexo server -p 80 71 | 72 | ## hexo与github.io爱的结晶 ## 73 | 74 | Github给每个用户都提供了一个轻量级的web服务器, 每个人的域名是: `用户名.github.io` 75 | 76 | 非常适合做博客, 这里就可以结合hexo生成的静态文件部署一个属于自己的个人博客 77 | 78 | 1. 在github上新建一个仓库, 仓库名必须是`github用户名.github.io` 79 | 80 | 2. 使用hexo的deploy功能完成项目的自动化部署 81 | 82 | 在部署之前, 一定要先配置好部署的参数 83 | 84 | hexo支持五个部署方式, 我们采取git 85 | 86 | 首先在`_config.yml`配置文件中的 `deploy:` 节点下配置一下 `type` 87 | 88 | deploy: 89 | type: git 90 | 91 | 如果使用的是git部署, 必须先装一个包: 92 | 93 | npm install hexo-deployer-git --save 94 | 95 | 装完以后修改配置: 96 | 97 | deploy: 98 | type: git # 类型为git 99 | repo: # 仓库地址 100 | branch: [branch] # 分支名 101 | message: [message] # 102 | 103 | 配置完成后, 执行`hexo g` 然后执行 `hexo d` 104 | 105 | hexo d是在将生成的静态文件, push到远程刚刚建好的仓库中, 而刚刚建的那个仓库正好可以通过`用户名.github.io`直接访问, 就是一个web服务器 106 | 107 | hexo g 108 | hexo d 109 | 110 | ## 设置hexo的主题 ## 111 | 112 | **墙裂推荐next主题, 不接受反驳!!!** 113 | 114 | 1. 安装 115 | 116 | 进入hexo博客的目录 117 | 118 | cd hexo-blog 119 | 120 | 将next的源码克隆到当前目录的themes目录下 121 | 122 | git clone https://github.com/iissnan/hexo-theme-next themes/next -------------------------------------------------------------------------------- /notes/vueday01.md: -------------------------------------------------------------------------------- 1 | ## vue day01 ## 2 | 3 | ### hello vue ### 4 | 5 | vue就是一个js文件而已 6 | 7 | 1. 新建HTML页面, 引入vue.js文件 8 | 9 | 10 | 11 | 2. 在页面中准备一个Vue的控制区域 12 | 13 |
14 | 15 | 3. 创建Vue实例 16 | 17 | var vm = new Vue({ 18 | el: '#app', 19 | data: { 20 | hello: '你好啊vuejs!' 21 | } 22 | }) 23 | 24 | 4. 在app控制区域中使用vue的指令或者插值表达式将hello数据渲染到页面 25 | 26 | 插值表达式: 27 | 28 |
29 |

30 | {{ hello }} 31 |

32 |
33 | 34 | v-text: 35 | 36 |

37 | 38 | v-html: 39 | 40 |

41 | 42 | 如果hello数据中有HTML标签, v-html会解析HTML标签, 而v-text会直接将其解析成纯文本输出 43 | 44 | 45 | ### 基础指令 ### 46 | 47 | 在vue中, 一切以 `v-` 开头的都是指令: directive 48 | 49 | 50 | 插值表达式, Mustache语法也被称为小胡子语法: 51 | 52 | {{ msg }} 53 | 54 | 1. v-cloak 55 | 56 | 了解即可, 可以结合css解决插值表达式闪烁的问题, 让标签元素默认隐藏, v-cloak的特点是当数据渲染完成后自动显示 57 | 58 | 2. v-text 59 | 60 | 将数据以**纯文本**的方式渲染到指定标签内部, 会直接覆盖标签内部的内容 61 | 62 | 3. v-html 63 | 64 | 同v-text, 区别在于可以渲染**HTML标签** 65 | 66 | 4. v-bind 67 | 68 | 做属性绑定的指令, 在标签中绑定title属性: 如果使用了属性绑定, 属性值就会被解析成JS表达式, 所以msg必须在vm实例的data中定义好, 否则会报错 69 | 70 | 71 | 72 | 该指令使用非常频繁, 所以有简写形式 是 冒号 `:` 73 | 74 | 75 | 76 | 而且v-bind可以绑定原生的dom属性, 也可以绑定自定义属性 77 | 78 | 5. v-on 79 | 80 | 做事件绑定的指令, 简写形式 是 艾特符号 `@` 81 | 82 | 83 | 84 | `clickHandler`必须在vue实例的 methods 节点中定义 85 | 86 | var vm = new Vue({ 87 | el: '#app', 88 | methods: { 89 | clickHandler() { 90 | console.log('秀!') 91 | } 92 | } 93 | }) 94 | 95 | 如果需要绑定其他事件, 将click换成其他事件名即可 96 | 97 | 6. v-model 98 | 99 | **注意: 这是唯一一个实现双向数据绑定的指令, 而且只能用于表单元素, 不需要指定属性, 只能绑定value属性** 100 | 101 | 102 | 103 | 如果双向数据绑定, 一定要先在data中定义好msg 104 | 105 | ### 事件修饰符 ### 106 | 107 | 事件修饰符在事件绑定时, 加在事件名后面 108 | 109 | 110 | 111 | 事件修饰符可以串联加多个 112 | 113 | 114 | 115 | 1. 阻止冒泡 116 | 117 | .stop 118 | 119 | 2. 阻止浏览器默认行为 120 | 121 | .prevent 122 | 123 | 3. 使用捕获, 等同于 `addEventListener()` 第三个参数传入true的效果 124 | 125 | .capture 126 | 127 | 4. 只有点击当前元素自身才会触发事件, 如果通过冒泡或者捕获传递过来的事件不会触发 128 | 129 | .self 130 | 131 | 5. 只触发一次 132 | 133 | .once 134 | 135 | 6. 在移动端使用scroll事件时建议加上, 可以提高性能 136 | 137 | .passive -------------------------------------------------------------------------------- /vueday06/02.webpack-vue1/dist/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { 40 | /******/ configurable: false, 41 | /******/ enumerable: true, 42 | /******/ get: getter 43 | /******/ }); 44 | /******/ } 45 | /******/ }; 46 | /******/ 47 | /******/ // getDefaultExport function for compatibility with non-harmony modules 48 | /******/ __webpack_require__.n = function(module) { 49 | /******/ var getter = module && module.__esModule ? 50 | /******/ function getDefault() { return module['default']; } : 51 | /******/ function getModuleExports() { return module; }; 52 | /******/ __webpack_require__.d(getter, 'a', getter); 53 | /******/ return getter; 54 | /******/ }; 55 | /******/ 56 | /******/ // Object.prototype.hasOwnProperty.call 57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 58 | /******/ 59 | /******/ // __webpack_public_path__ 60 | /******/ __webpack_require__.p = ""; 61 | /******/ 62 | /******/ // Load entry module and return exports 63 | /******/ return __webpack_require__(__webpack_require__.s = 0); 64 | /******/ }) 65 | /************************************************************************/ 66 | /******/ ([ 67 | /* 0 */ 68 | /***/ (function(module, exports) { 69 | 70 | // 项目的JS入口文件 71 | console.log('ok') 72 | 73 | /***/ }) 74 | /******/ ]); -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/dist/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { 40 | /******/ configurable: false, 41 | /******/ enumerable: true, 42 | /******/ get: getter 43 | /******/ }); 44 | /******/ } 45 | /******/ }; 46 | /******/ 47 | /******/ // getDefaultExport function for compatibility with non-harmony modules 48 | /******/ __webpack_require__.n = function(module) { 49 | /******/ var getter = module && module.__esModule ? 50 | /******/ function getDefault() { return module['default']; } : 51 | /******/ function getModuleExports() { return module; }; 52 | /******/ __webpack_require__.d(getter, 'a', getter); 53 | /******/ return getter; 54 | /******/ }; 55 | /******/ 56 | /******/ // Object.prototype.hasOwnProperty.call 57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 58 | /******/ 59 | /******/ // __webpack_public_path__ 60 | /******/ __webpack_require__.p = ""; 61 | /******/ 62 | /******/ // Load entry module and return exports 63 | /******/ return __webpack_require__(__webpack_require__.s = 0); 64 | /******/ }) 65 | /************************************************************************/ 66 | /******/ ([ 67 | /* 0 */ 68 | /***/ (function(module, exports) { 69 | 70 | // 项目的JS入口文件 71 | console.log('ok') 72 | 73 | /***/ }) 74 | /******/ ]); -------------------------------------------------------------------------------- /vueday06/01.webpack-study/dist/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { 40 | /******/ configurable: false, 41 | /******/ enumerable: true, 42 | /******/ get: getter 43 | /******/ }); 44 | /******/ } 45 | /******/ }; 46 | /******/ 47 | /******/ // getDefaultExport function for compatibility with non-harmony modules 48 | /******/ __webpack_require__.n = function(module) { 49 | /******/ var getter = module && module.__esModule ? 50 | /******/ function getDefault() { return module['default']; } : 51 | /******/ function getModuleExports() { return module; }; 52 | /******/ __webpack_require__.d(getter, 'a', getter); 53 | /******/ return getter; 54 | /******/ }; 55 | /******/ 56 | /******/ // Object.prototype.hasOwnProperty.call 57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 58 | /******/ 59 | /******/ // __webpack_public_path__ 60 | /******/ __webpack_require__.p = ""; 61 | /******/ 62 | /******/ // Load entry module and return exports 63 | /******/ return __webpack_require__(__webpack_require__.s = 0); 64 | /******/ }) 65 | /************************************************************************/ 66 | /******/ ([ 67 | /* 0 */ 68 | /***/ (function(module, exports) { 69 | 70 | // 项目的JS入口文件 71 | console.log('ok') 72 | 73 | /***/ }) 74 | /******/ ]); -------------------------------------------------------------------------------- /vueday06/04.webpack-vue-router/dist/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { 40 | /******/ configurable: false, 41 | /******/ enumerable: true, 42 | /******/ get: getter 43 | /******/ }); 44 | /******/ } 45 | /******/ }; 46 | /******/ 47 | /******/ // getDefaultExport function for compatibility with non-harmony modules 48 | /******/ __webpack_require__.n = function(module) { 49 | /******/ var getter = module && module.__esModule ? 50 | /******/ function getDefault() { return module['default']; } : 51 | /******/ function getModuleExports() { return module; }; 52 | /******/ __webpack_require__.d(getter, 'a', getter); 53 | /******/ return getter; 54 | /******/ }; 55 | /******/ 56 | /******/ // Object.prototype.hasOwnProperty.call 57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 58 | /******/ 59 | /******/ // __webpack_public_path__ 60 | /******/ __webpack_require__.p = ""; 61 | /******/ 62 | /******/ // Load entry module and return exports 63 | /******/ return __webpack_require__(__webpack_require__.s = 0); 64 | /******/ }) 65 | /************************************************************************/ 66 | /******/ ([ 67 | /* 0 */ 68 | /***/ (function(module, exports) { 69 | 70 | // 项目的JS入口文件 71 | console.log('ok') 72 | 73 | /***/ }) 74 | /******/ ]); -------------------------------------------------------------------------------- /vueday03/07.动画-列表动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 46 | 47 | 48 | 49 |
50 | 51 |
52 | 56 | 57 | 61 | 62 | 63 |
64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
  • 72 | {{item.id}} --- {{item.name}} 73 |
    • 74 |     75 | 76 | 77 |
    78 | 79 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /vueday04/07.路由-路由的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 34 | 35 | 36 | 37 |
    38 | 39 | 40 | 41 | 42 | 43 | 登录 44 | 注册 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
    54 | 55 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /vueday08-promise/demo.js: -------------------------------------------------------------------------------- 1 | // 创建对象会立即执行构造函数中传入的回调函数 2 | // let p = new Promise(() => { 3 | // // 做一些异步操作 4 | // console.log('promise执行了') 5 | // }) 6 | 7 | // 如果想让promise对象的回调函数按需执行 8 | // 可以将创建对象这个步骤放到一个function中, 需要时调用即可 9 | 10 | // function doSomething() { 11 | // let p = new Promise(() => { 12 | // // 做一些异步操作 13 | // console.log('promise执行了') 14 | // }) 15 | // } 16 | 17 | // this.$http.get('url').then() 18 | 19 | // const fs = require('fs') 20 | 21 | // function getFileByPath(fpath) { 22 | // return new Promise(function (resolve, reject) { 23 | // fs.readFile(fpath, 'utf-8', (err, dataStr) => { 24 | 25 | // if (err) return reject(err) 26 | // resolve(dataStr) 27 | 28 | // }) 29 | // }) 30 | // } 31 | 32 | // let p = getFileByPath('./file/1.txt') 33 | // p.then(function(data) { // 成功的回调 34 | 35 | // }, function(err) { // 失败的回调 36 | 37 | // }) 38 | 39 | // this.$http.get().then() 40 | 41 | // getFileByPath('./files/1.txt').then((data) => { 42 | // console.log(data) 43 | // }, (err) => { 44 | // console.log(err.message) 45 | // }) 46 | 47 | // setTimeout(function () { 48 | // console.log(1) 49 | // }, 0) 50 | 51 | // console.log(2) 52 | // function getFileByPath(fpath) { 53 | // return new Promise(function (resolve, reject) { 54 | // // 同步执行 55 | // console.log('这是promise构造函数的回调函数') 56 | // // 异步读取文件 57 | // fs.readFile(fpath, 'utf-8', (err, dataStr) => { // 异步执行 58 | // console.log('这是读取文件的异步操作') 59 | // if (err) return reject(err) 60 | // resolve(dataStr) 61 | 62 | // }) 63 | // }) 64 | // } 65 | 66 | // getFileByPath('./files/1.txt') 67 | // .then(data => { 68 | // console.log(data) 69 | // // 在.then的回调函数中, 如果继续返回一个promise对象 70 | // // 则可以继续在当前promise对象后继续.then来处理 第二次返回的promise对象的结果 71 | // return getFileByPath('./files/2.txt') // 返回值就是一个promise对象 72 | // }) 73 | // .then(data => { 74 | // console.log(data) 75 | // return getFileByPath('./files/3.txt') 76 | // }) 77 | // .then(data => { 78 | // console.log(data) 79 | // }) 80 | // .catch(err => { 81 | // // 自己处理异常 82 | // 83 | // }) 84 | 85 | // console.log('这是最后面的代码主线程') 86 | 87 | // vue-resource已经是基于promise封装的ajax请求框架 88 | 89 | // this.$http.get('lunbotu') 90 | // .then(data => { 91 | // this.banners = data.body 92 | // return this.$http.get('jiugongge') 93 | // }) 94 | // .then(data => { 95 | // this.jiugongge = data.body 96 | // }) 97 | 98 | // 不是所有的回调函数一定是异步操作!!! 99 | // function Student(callback) { 100 | // callback() // 同步执行 101 | // } 102 | 103 | // new Student(function() { 104 | // console.log('这是Student构造函数的回调函数') 105 | // }) 106 | 107 | // 常见的异步操作有: IO, 定时器, 事件 108 | // Input / Output 输入输出 109 | // 网络IO(Ajax) 文件IO(读写文件) 110 | // async 异步 sync 同步 111 | // synchronized 同步 112 | 113 | // SSH/SSM 114 | // Spring Stucts Hibernate 115 | // MyBatis -------------------------------------------------------------------------------- /notes/vueday03.md: -------------------------------------------------------------------------------- 1 | ## vue day03 ## 2 | 3 | ### 过滤器 ### 4 | 5 | - 用于 v-bind 和 插值表达式做最后输出前的简单文本处理, **只能用于v-bind和插值表达式** 6 | 7 | - 过滤器不会修改原数据, 只是在输出前做一道处理而已, 不能在过滤器中做太复杂的业务逻辑处理 8 | 9 | 定义过滤器有两种方式: 10 | 11 | 1. 全局过滤器 12 | 13 | 在所有vm实例中都可以使用 14 | 15 | 在Vue对象中有一个filter方法用于定义全局过滤器 16 | 17 | 参数1: 过滤器的名称 18 | 19 | 参数2: 过滤器的回调函数 20 | 21 | 回调函数中一定有一个参数, 是在使用过滤器时, 管道符左边的数据 22 | 23 | 回调函数的返回值就是过滤器处理的结果 24 | 25 | Vue.filter('msgFormat', (content, unit = "元") => { 26 | return '¥' + content + unit 27 | }) 28 | 29 | 使用方法(msg已定义在data中): 30 | 31 |

    {{ msg | msgFormat('美元') }}

    32 | 33 | 2. 私有过滤器 34 | 35 | 只能在当前vm实例中使用的过滤器, 在Vue构造函数的配置对象中的filters节点下, 和methods/data同级 36 | 37 | let vm = new Vue({ 38 | el: '#app', 39 | data: {}, 40 | methods: {}, 41 | filters: { 42 | msgFormat(content) { 43 | // 这里就是私有过滤处理的区域 44 | // content就是管道符左边的内容 45 | // 需要将处理完毕的结果return出去 46 | return content + '~~~' 47 | } 48 | } 49 | }) 50 | 51 | ### 按键修饰符 ### 52 | 53 | 如果需要在用户输入完内容, 按回车进行表单的提交, 或者数据添加等操作, 就需要给文本框绑定键盘事件 54 | 55 | 同时还需要监听到用户输入回车键 56 | 57 | Vue提供了按键修饰符解决这个问题 58 | 59 | 60 | 61 | 预定义的内置按键修饰符: 62 | 63 | .enter 回车 64 | .tab 65 | .delete (捕获“删除”和“退格”键) 66 | .esc 67 | .space 空格 68 | .up 69 | .down 70 | .left 71 | .right 72 | 73 | 如果需要用到其他按键, 可以直接使用 .keycode , 以上内置的按键修饰符也可以通过 .keycode来使用 74 | 75 | 76 | 77 | 如果需要自定义其他按键修饰符别名, 可以通过 `Vue.config.keycodes.xxx = 111` 的方式来定义 78 | 79 | // 可以使用 `v-on:keyup.f2` 80 | Vue.config.keyCodes.f2 = 113 81 | 82 | 83 | 84 | ### 自定义指令(了解) ### 85 | 86 | 当Vue提供的内置指令无法满足某些需求的时候, 就需要自定义指令来解决问题了 87 | 88 | 举官方文档中的案例: 89 | 90 | 需求: 当页面加载时让某个文本框获取焦点, 通过自定义指令 `v-focus` 来完成 91 | 92 | 1. 全局指令 93 | 94 | 通过`Vue.directive()` 定义全局指令 95 | 96 | 参数1: 指令名, 不需要v-开头, 但是在使用时需要加上v-便于Vue编译模板时区分普通属性和指令 97 | 98 | 参数2: 指令的钩子函数(在特定阶段执行的函数) 99 | 100 | Vue.directive('focus', { 101 | bind(el) { 102 | // 当指令被绑定到标签上时执行该函数, 只执行一次 103 | }, 104 | inserted(el) { 105 | // 当被绑定元素插入父节点时调用 106 | // 形参el 就是该指令绑定的元素, 原生DOM对象 107 | el.focus() 108 | }, 109 | update(el) { 110 | // 当DOM元素更新时调用 111 | }, 112 | componentUpdated() { 113 | 114 | }, 115 | unbind() { 116 | // 只调用一次, 指令与元素解绑时调用 117 | } 118 | }) 119 | 120 | 121 | 122 | 2. 私有指令 123 | 124 | 只能在当前vm实例内部使用 125 | 126 | 在Vue构造函数的配置对象中directives节点下, 和data/methods同级 127 | 128 | let vm = new Vue({ 129 | el: '#app', 130 | data: {}, 131 | methods: {}, 132 | filters: {}, 133 | directives: { 134 | //focus: { 135 | // bind(){}, 136 | // inserted() {} 137 | //} 138 | // 如果focus指令只需要在bind和update阶段做具体的操作,则可以简写为一个函数(全局指令也同理): 139 | focus() { 140 | 141 | } 142 | } 143 | }) 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /notes/vueday04.md: -------------------------------------------------------------------------------- 1 | ## vue day04 ## 2 | 3 | ### vue-resource的使用 ### 4 | 5 | 使用方法: 6 | 7 | 1. 在vue.js文件后引入 8 | 9 | 10 | 11 | 12 | 2. 当引入完成文件后, 在vue对象中就会有一个属性: `$http` 13 | 14 | 发送get请求: 15 | 16 | 参数1: URL 17 | 参数2: 配置对象 18 | 19 | 配置对象中可以设置一个params属性, 也是一个对象, 用于设置get请求的query参数 20 | 21 | vm.$http.get('url', {}).then(result => { 22 | // 请求成功的结果 23 | }) 24 | 25 | 发送post请求: 26 | 27 | 参数1: URL 28 | 参数2: 表单数据 29 | 参数3: 配置对象 30 | 31 | 一般使用post请求时, 配置对象中最好开启`emulateJSON: true`, 该配置会将表单数据以传统表单格式提交: `application/x-www-form-urlencoded`的 `Content-Type` 32 | 33 | vm.$http.post('url', {name: 'zs'}, {emulateJSON: true}).then(result => { 34 | // 请求成功的结果 35 | }) 36 | 37 | 3. 全局配置 38 | 39 | 由于在项目开发中, 请求的api根路径一般都是相同的, 而且为了便于后期修改, 需要将请求的根路径进行全局配置: 40 | 41 | Vue.http.options.root = '/root' 42 | 43 | **注意: 如果配置了全局的根路径, 想让其生效, 发送请求时URL必须是相对路径, 例如: `vm.$http.get('url')`, 而不是 `vm.$http.get('/url')`** 44 | 45 | 由于在项目开发中, 每次提交表单数据都需要使用传统表单提交, 所以需要将`emulateJSON`选项全局开启: 46 | 47 | Vue.http.options.emulateJSON = true 48 | 49 | 当开启了全局的emulateJSON选项后, 以后发送post请求, 第三个参数就不需要再配置`emulateJSON`选项了 50 | 51 | ### 动画 ### 52 | 53 | 54 | ![官网过渡动画流程图](https://cn.vuejs.org/images/transition.png) 55 | 56 | 上图描述了在vue中使用过渡类名完成动画的几个阶段, 其中涉及到6个类名: 57 | 58 | 1. v-enter 59 | 60 | 设置元素执行入场动画前的样式 61 | 62 | 2. v-enter-to 63 | 64 | 设置元素执行入场动画完毕后的样式 65 | 66 | 3. v-leave 67 | 68 | 设置元素执行离场动画前的样式 69 | 70 | 4. v-leave-to 71 | 72 | 设置元素执行离场动画完毕后的样式 73 | 74 | 5. v-enter-active 75 | 76 | 设置元素在执行入场动画时的样式 77 | 78 | 6. v-leave-active 79 | 80 | 设置元素在执行离场动画时的样式 81 | 82 | 83 | 使用动画的步骤: 84 | 85 | 1. 先在需要加动画的元素(必须得是单元素)外, 包裹一个`transition`标签, 是由Vue提供的组件 86 | 87 | 88 |

    社会毒瘤谢俊

    89 |     90 | 91 | 2. 添加类样式, 设置动画的过渡属性 92 | 93 | .v-enter, 94 | .v-leave-to { 95 | opacity: 0; 96 | transform: translateX(200px) 97 | } 98 | 99 | .v-enter-active, 100 | .v-leave-active { 101 | transition: all 0.5s ease; 102 | } 103 | 104 | 如果想书写样式时, 不使用默认的v-开头, 可以在transition标签中声明name属性即可, 这个name属性就是类样式的前缀 105 | 106 | 用于多个动画场景, 例如: p标签需要平移动画, h1标签需要淡入淡出动画, 为了避免类名冲突, 最好自定义前缀 107 | 108 | 109 |

    社会毒瘤谢俊

    110 |     111 | 112 | 类样式前缀也要同时修改: 113 | 114 | .xj-enter, 115 | .xj-leave-to { 116 | opacity: 0; 117 | transform: translateX(200px) 118 | } 119 | 120 | .xj-enter-active, 121 | .xj-leave-active { 122 | transition: all 0.5s ease; 123 | } 124 | 125 | ### 列表动画 ### 126 | 127 | 不同于单元素动画, 如果是使用v-for循环渲染出来的列表, 需要使用 `transition-group` 标签包裹 128 | 129 | 130 |
  • 131 | {{item.id}} --- {{item.name}} 132 |
    • 133 |     134 | 135 | 其他地方同上, 也需要设置过渡的类样式 136 | 137 | .v-enter, 138 | .v-leave-to { 139 | opacity: 0; 140 | transform: translateY(50px) 141 | } 142 | 143 | .v-enter-active, 144 | .v-leave-active { 145 | transition: all 0.5s ease; 146 | } -------------------------------------------------------------------------------- /vueday04/05.组件案例-评论列表.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
    15 | 16 | 17 | 18 | 19 | 20 |
      21 |
    • 22 | 评论人： {{ item.user }} 23 | {{ item.content }} 24 |
      • 25 |
    26 | 27 | 28 |
    29 | 30 | 31 | 50 | 51 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /notes/vueday02.md: -------------------------------------------------------------------------------- 1 | ## vue day02 ## 2 | 3 | ### 往期知识点回顾 ### 4 | 5 | 1. 创建对象的方式: 6 | 7 | // 对象字面量 8 | var obj = {} // new Object() 9 | 10 | // 数组字面量 11 | var arr = [] // new Array() 12 | 13 | // 正则字面量 14 | var regex = /\w+/ // new RegExp() 15 | 16 | // 使用Object构造函数创建对象 17 | var obj2 = new Object() 18 | 19 | // 自定义工厂函数创建对象 20 | var obj3 = createObj('zs') 21 | 22 | function createObj(name) { 23 | return { 24 | name: name 25 | } 26 | } 27 | 28 | // 自定义构造函数创建对象 29 | var obj4 = new Student('ls') 30 | 31 | function Student(name) { 32 | this.name = name 33 | } 34 | 35 | // 判断对象的类型, typeof判断对象永远都是 'object' 36 | console.log(typeof obj4) // 'object' 37 | 38 | // instanceof 判断对象的具体类型 39 | // instanceof 判断依据 是看对象是否在 该构造函数的原型链上 40 | // A instanceof B 就是看B是否在A的原型链上 41 | console.log(obj4 instanceof Student) // true 42 | console.log(obj4 instanceof Object) // true 43 | 44 | 总结: 创建对象 永远都离不开 构造函数, 最终一定是 new 构造函数创建出来的对象, 所以不存在几种创建对象的方式, 只有一种, 就是通过构造函数创建对象 45 | 46 | 2. 闭包 47 | 48 | 函数内部包含一个函数, 在内部函数中访问了外部函数中的局部成员 49 | 50 | function outer() { 51 | var a = 10 52 | function inner() { 53 | // 在下面这行代码执行时就会产生 closure 闭包空间 54 | var b = a + 20 55 | } 56 | return inner 57 | } 58 | 59 | outer()() 60 | 61 | 在开发中尽量减少使用闭包, 因为闭包一定会导致内存泄漏 62 | 63 | 内存泄漏: 本该被释放的内存, 没有被释放 64 | 65 | 3. 事件委托(事件代理) 66 | 67 | > 一般用在动态创建元素还需要绑定事件时 68 | 69 | > 因为直接绑定事件, 页面加载时就会绑定一次, 但是动态添加的元素就无法被绑定事件了, 而事件委托的原理是依赖于事件冒泡, 也就是说事件被绑定在父元素身上, 如果将来有新加入的子元素也会响应事件 70 | 71 | ### 设置类样式 ### 72 | 73 | 总结来说使用属性绑定的方式设置样式, 一般就是设置 对象 或 数组 74 | 75 | 1. 设置一个数组 76 | 77 | 适合同时设置多个固定样式 (一般不用) 78 | 79 |

    这是一个很大很大的H1，大到你无法想象！！！

    80 | 81 | 如果其中某些**样式需要动态切换**, 根据标记切换 82 | 83 | 在js中属性名如果是合法的变量名, 可以不用加引号, 以下代码表示h1固定样式是red和thin, active样式是根据flag的true或false动态切换 84 | 85 | flag需要在data中定义 86 | 87 |

    这是一个很大很大的H1，大到你无法想象！！！

    88 | 89 | 此方式适合多个固定样式结合少量动态切换的样式使用 90 | 91 | 2. 设置一个对象 92 | 93 | 适合多个动态切换的样式, 少部分固定样式使用, 因为固定样式也需要手动加上true, 不如直接用数组来设置样式 94 | 95 |

    这是一个很大很大的H1，大到你无法想象！！！

    96 | 97 | 3. 使用字符串拼接动态操作类样式 (**不推荐!!!**) 98 | 99 | 因为字符串操作容易出现问题, 所以尽量不要使用字符串拼接的方式去动态修改类样式 100 | 101 |

    这是一个很大很大的H1，大到你无法想象！！！

    102 | 103 | ### 设置行内样式 ### 104 | 105 | 将样式对象挂载到data节点中: 106 | 107 | var vm = new Vue({ 108 | el: '#app', 109 | data: { 110 | styleObj1: { color: 'red', 'font-weight': 200 }, 111 | styleObj2: { 'font-style': 'italic' } 112 | }, 113 | methods: {} 114 | }) 115 | 116 | 1. 设置一个对象(比较常用) 117 | 118 |

    这是一个h1

    119 | 120 | 2. 设置一个数组 (数组中放多个样式对象, 可以合并) 121 | 122 |

    这是一个h1

    123 | 124 | ### v-for 列表渲染 ### 125 | 126 | 准备渲染的数据: 127 | 128 | var vm = new Vue({ 129 | el: '#app', 130 | data: { 131 | list: [1, 2, 3, 4, 5, 6], 132 | users: [ 133 | { id: 1, name: 'zs1' }, 134 | { id: 2, name: 'zs2' }, 135 | { id: 3, name: 'zs3' }, 136 | { id: 4, name: 'zs4' } 137 | ], 138 | user: { 139 | id: 1, 140 | name: '托尼·屎大颗', 141 | gender: '男' 142 | } 143 | } 144 | }) 145 | 146 | 1. 渲染普通数组 147 | 148 |

    149 | 每一项: {{ item }} 150 | 索引: {{ index }} 151 |

    152 | 153 | 2. 渲染对象数组 154 | 155 |

    156 | 用户ID: {{ user.id }} 157 | 用户名: {{ user.name }} 158 | 索引: {{ index }} 159 |

    160 | 161 | 3. 渲染对象 162 | 163 |

    164 | 键: {{ key }} 165 | 值: {{ val }} 166 |

    167 | 168 | 4. 迭代数字 169 | 170 | item从1开始到20结束, 如果要当成索引用, 可以手动 -1 171 | 172 |

    173 | {{ item }} 174 |

    175 | 176 | ### v-for 中的 key 属性 ### 177 | 178 | - 结论: 除非使用的列表非常简单, 或者追求极致的性能体验, **都建议在使用v-for时加上 key 属性** 179 | 180 | - 原理: 由于使用v-for渲染列表时, vue不会记录每个列表项和数据之间的关系, 都是统一按照索引进行渲染的, 如果此时有一个复选框表单元素被勾选, 然后将新的元素插入到列表的前面, 导致整个列表顺序发生变化, 那么复选框也会跟随索引而勾选 不会跟随数据勾选 181 | 182 | - 解决方式: 在使用v-for时加上 :key 属性绑定, 绑定的值为每项数据的唯一标识, 而且数据类型必须是number / string 一般都用id作为唯一标识, 如果没有id时也可以使用索引 实在不行用name也行 183 | 184 | ### v-if 和 v-show ### 185 | 186 | - v-if和v-show都是用于控制元素的显示隐藏 187 | - v-if有较高的切换渲染消耗 188 | - v-show有较高的初始渲染消耗 189 | 190 | 总结: 如果需要频繁的切换显示隐藏推荐使用v-show, 如果只需要一次切换, 或者一次都没有, 则使用v-if 191 | 192 | -------------------------------------------------------------------------------- /notes/vueday05.md: -------------------------------------------------------------------------------- 1 | ## vueday05 ## 2 | 3 | ### 列表动画的其他属性 ### 4 | 5 | #### 列表元素同时过渡 #### 6 | 7 | 例如将数组中的元素删除时, 其他元素也一起执行动画, 此时所有元素都会加上 `v-move` 类名, 当前被删除的元素会加上 `v-leave-active` 类名 8 | 9 | .v-move 10 | .v-leave-active 11 | 12 | 所以只需要在`v-move`中开启过渡, `v-leave-active`中开启绝对定位即可 13 | 14 | .v-move { 15 | transition: all .8s ease; 16 | } 17 | .v-leave-active{ 18 | position: absolute; 19 | } 20 | 21 | 22 | #### appear属性 #### 23 | 24 | 列表加载时执行动画 25 | 26 | 27 |
  • 28 | {{item.id}} --- {{item.name}} 29 |
    • 30 |     31 | 32 | #### tag属性 #### 33 | 34 | 由于transition-group默认会渲染一个span标签包裹, 如果需要自定义标签, 可以通过tag属性来设置: 35 | 36 | 37 |
  • 38 | {{item.id}} --- {{item.name}} 39 |
    • 40 |     41 | 42 | ### 组件化 ### 43 | 44 | - 模块化是指在代码的业务逻辑上进行划分, 保证每个模块的职能单一, 从而方便后期管理维护 45 | 46 | - 组件化是指在UI界面的代码上进行划分, 提高项目中多个UI组件的复用性 47 | 48 | 49 | 50 | ### 创建组件的第一种方式 ### 51 | 52 | 1. 使用Vue.extend创建组件模板对象 53 | 54 | let com1 = Vue.extend({ 55 | template: '

    这是extend创建的组件

    ' 56 | }) 57 | 58 | 2. 使用Vue.component注册全局组件 59 | 60 | 参数1: 组件名称 61 | 62 | 参数2: 组件的模板对象 63 | 64 | Vue.component('com1', com1) 65 | 66 | 3. 使用组件 67 | 68 | 在页面中像使用HTML标签一样, 注意: 如果组件名称是驼峰命名, 需要改为 `-` 连接, 如果全小写, 就是一个单词 69 | 70 | 71 | 72 | ### 创建组件的第二种方式 ### 73 | 74 | 1. 使用Vue.component注册全局组件 75 | 76 | 参数1: 组件名称 77 | 78 | 参数2: 组件的模板对象 79 | 80 | Vue.component('com2', { 81 | template: '

    这是extend创建的组件

    ' 82 | }) 83 | 84 | 2. 使用组件 85 | 86 | 在页面中像使用HTML标签一样, 注意: 如果组件名称是驼峰命名, 需要改为 `-` 连接, 如果全小写, 就是一个单词 87 | 88 | 89 | 90 | **注意: 不管使用什么方式注册组件, 组件的根元素都只能有一个** 91 | 92 | 以上两种注册组件的方式都不好用, 因为template是一个字符串, 所以在其中写HTML没有智能提示, 非常不方便, 所以需要使用最后一种方式来注册 93 | 94 | ### 创建组件的第三种方式 ### 95 | 96 | 基本和第二种一样, 但是由于第二种写模板没有智能提示, 所以第三种就将模板抽取到HTML中的template标签内部, 在HTML中先写好模板, 注册组件时直接引用即可 97 | 98 | 1. 在HTML中定义好模板 99 | 100 | 106 | 107 | 1. 使用Vue.component注册全局组件 108 | 109 | 参数1: 组件名称 110 | 111 | 参数2: 组件的模板对象 112 | 113 | Vue.component('com3', { 114 | template: '#tmp1' 115 | }) 116 | 117 | 2. 使用组件 118 | 119 | 在页面中像使用HTML标签一样, 注意: 如果组件名称是驼峰命名, 需要改为 `-` 连接, 如果全小写, 就是一个单词 120 | 121 | 122 | 123 | **注意: 不管使用什么方式注册组件, 组件的根元素都只能有一个** 124 | 125 | 126 | ### 组件切换 ### 127 | 128 | vscode插件: 129 | 130 | vetur 131 | vue2 snippets 132 | 133 | 1. 通过v-if来切换组件 134 | 135 | 2. 通过component组件来切换组件 136 | 137 | 138 | 139 | 140 | 141 | data: { 142 | comName: 'login' // 显示login组件 143 | } 144 | 145 | ### 父组件向子组件传值 ### 146 | 147 | 因为在vue中, 组件之间的data是相互不能共享的, 即使是子组件也无法直接访问父组件的data 148 | 149 | 如果子组件需要用父组件的数据, 必须通过父组件手动传递过去 150 | 151 | 通过 **属性绑定** 的方式进行数据传递: 152 | 153 | 父组件的data: 154 | 155 | data: { 156 | msg: '这是父组件的数据!' 157 | } 158 | 159 | 在子组件使用的地方, 进行属性绑定: 160 | 161 | 162 | 163 | 在子组件的props中需要先声明再使用, props和data还有methods等属性平级, 是一个数组, 其中需要定义字符串类型的属性名: 164 | 165 | ... 166 | data() {}, 167 | methods: {}, 168 | props: ['pmsg'] // 需要存放字符串类型的数据, 字符串就是父组件传递过来的属性名 169 | ... 170 | 171 | 做完以上操作后, 在子组件中就可以随意的使用pMsg属性了, 用法和data中的数据一样 172 | 173 | 注意: props中的属性是只读的, data中的属性是可读可写的 174 | 175 | prop的特点是**单向下行绑定**, 数据是只会通过父组件流向子组件的单向数据流, 子组件修改数据父组件是不会同步的, 而父组件修改数据, 所有引用该数据的子组件都会同步刷新 176 | 177 | ### 子组件向父组件传值 ### 178 | 179 | 与父组件向子组件传值不同, 子向父传值用的是事件绑定的形式 180 | 181 | 父组件的methods中声明事件处理函数: 182 | 183 | methods: { 184 | show(data) { 185 | console.log('这是子组件传递过来的数据:' + data) 186 | } 187 | } 188 | 189 | 父组件先给子组件绑定一个自定义事件: 190 | 191 | 192 | 193 | 子组件在特定的时机, 通过`$emit()`方法触发父组件绑定的事件, 将数据传递过去 194 | 195 | `$emit()`: 196 | 197 | 参数1: 事件名 198 | 199 | 参数2: 传递的数据, 也就是父组件中事件处理函数的参数 200 | 201 | // 当this指向vm对象时均可触发事件 202 | this.$emit('showinfo', '哈哈哈,这是子组件的数据') 203 | 204 | ### ref的使用 ### 205 | 206 | Vue不提倡我们操作DOM, 但是有些BT的功能可能通过DOM操作更简单的可以完成, 这时候Vue也提供了访问DOM元素的方式: `ref` 属性 207 | 208 | 给DOM元素或组件上设置ref属性: 209 | 210 |

    这是h1

    211 | 212 | 在vm实例中可以直接通过`$refs.hh`获取到该DOM对象 213 | 214 | this.$refs.hh 215 | 216 | ### 路由 ### 217 | 218 | 路由的目的是为了, 切换不同的组件, 从而实现一个HTML中对应很多组件, 也是所谓的 SPA (Single Page Application) 单页面应用程序 219 | 220 | 以上就是所谓的前端路由, 通过#锚点完成组件的切换标识 221 | 222 | -------------------------------------------------------------------------------- /vueday03/01.vue-resource改造品牌列表案例.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 17 | 18 | 19 |
    20 |
    21 |

    添加品牌

    22 |
    23 |
    24 | 25 | 29 | 30 | 31 |
    32 |
    33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 55 | 56 | 57 |
    IdNameDescriptionCtimeOperation
    {{item.id}}{{item.name}}{{item.description}}{{item.ctime}} 53 | 删除 54 |
    58 | 59 | 60 |
    61 | 62 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /notes/vueday08.md: -------------------------------------------------------------------------------- 1 | ## vue day08 ## 2 | 3 | ### babel的使用 ### 4 | 5 | 1. 装核心包和loader的包 6 | 7 | **注意事项**: 由于`babel-loader`和`babel-core`已经更新, `babel-core`换了个包名, 最新版的包名是`@babel/core`, 最新版本的`babel-core`必须结合最新版本的`babel-loader`使用, 也就是`babel-core7`结合`babel-loader8`使用, 而`npm i babel-loader babel-core -D` 这个指令安装的是`babel-loader8` 和 `babel-core6`, 所以会导致`babel`无法使用, 需要手动将`babel-loader`的版本降为 7 8 | 9 | 总结: 10 | 11 | npm i babel-loader@7 babel-core -D 12 | 13 | 2. 装语法的包 14 | 15 | 由于babel默认只能将一部分ES6语法转为ES5, 所以还需要根据自身的需求选择语法预设 (preset) 16 | 17 | 必须要装的是`env`, `stage-X`可以选装, 但是如果需要用更高级的ES6语法, 建议都装 18 | 19 | 不推荐使用最新版本的插件而放弃stage, 这样你会多很多工作 20 | 21 | npm i babel-preset-env babel-preset-stage-0 -D 22 | 23 | 3. 在`webpack.config.js`中配置好loader 24 | 25 | module: { 26 | rules: [ 27 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 28 | // less-loader 29 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, 30 | { test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 31 | { 32 | test: /\.(png|jpg|gif|jpeg|bmp|webp)$/, 33 | use: ['url-loader?limit=8192&name=[hash:8]-[name].[ext]'] 34 | // use: [ 35 | // { 36 | // loader: 'url-loader', 37 | // options: { 38 | // limit: 8192 // 限制 单位为byte 8192字节是8KB 39 | // } 40 | // } 41 | // ] 42 | }, 43 | { test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] }, 44 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } 45 | ] 46 | }, 47 | 48 | 4. 在项目根目录新建一个`.babelrc`配置文件, 并在其中配置好语法预设 49 | 50 | { 51 | "presets": ["env", "stage-0"] 52 | } 53 | 54 | ### render函数的使用 ### 55 | 56 | 创建VM实例时, 指定el属性来设置VM实例的托管区域, 以后可以将注册的组件在托管区域内以标签形式来使用 57 | 58 | 如果使用render函数, 则是将指定的某个组件, 直接替换掉托管区域(app) 59 | 60 | 传统的component方式: 61 | 62 | var login = { 63 | template: '

    这是登录组件

    ' 64 | } 65 | 66 | // 创建 Vue 实例，得到 ViewModel 67 | var vm = new Vue({ 68 | el: '#app', 69 | data: {}, 70 | methods: {}, 71 | components: { 72 | login 73 | } 74 | }); 75 | 76 | 使用render函数渲染组件: 77 | 78 | var login = { 79 | template: '

    这是登录组件

    ' 80 | } 81 | 82 | var vm = new Vue({ 83 | el: '#app', 84 | data: {}, 85 | methods: {}, 86 | render: function(createElement) { 87 | return createElement(login) 88 | } 89 | }) 90 | 91 | 简写: 92 | 93 | var login = { 94 | template: '

    这是登录组件

    ' 95 | } 96 | 97 | var vm = new Vue({ 98 | el: '#app', 99 | data: {}, 100 | methods: {}, 101 | render: c => c(login) 102 | }) 103 | 104 | ### 使用webpack引入vue ### 105 | 106 | 1. 安装 107 | 108 | npm i vue -S 109 | 110 | 2. 正在main.js中引入vue 111 | 112 | 注意: 如果在main.js中直接引入安装好的vue, 那么默认会引入`vue.runtime.common.js`而非完整版的vue.js文件 113 | 114 | vue包的package.json中配置的main节点如下: 115 | 116 | "main": "dist/vue.runtime.common.js", 117 | 118 | 3. 在引入vue之前, 先给vue引入起个别名, 指向完整版的vue.js文件 119 | 120 | 在webpack.config.js的配置对象中, 新增一个`resolve`节点, 添加`alias`属性 121 | 122 | resolve: { 123 | alias: { 124 | 'vue$': 'vue/dist/vue.js' 125 | } 126 | }, 127 | 128 | 4. 在main.js中直接引入vue 129 | 130 | import Vue from 'vue' 131 | 132 | ### 模块化vue组件 ### 133 | 134 | 1. 装包 135 | 136 | npm i vue-loader vue-template-compiler -D 137 | 138 | 2. 在webpack配置文件中添加匹配规则 139 | 140 | { test: /\.vue$/, use: 'vue-loader'} 141 | 142 | 3. 在webpack添加`VueLoaderPlugin`插件 143 | 144 | **注意: 这一个插件是必须的!** 145 | 146 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 147 | ... 148 | plugins: [ // 插件配置项 149 | new webpack.HotModuleReplacementPlugin(), // 3. 添加热更新插件 150 | new HtmlWebpackPlugin({ // 用于帮助我们自动生成HTML文件的 151 | template: './src/index.html', // 如果不指定template, 默认生成一个空的HTML5页面, 指定template表示从哪个HTML文件编译一个新的HTML出来 152 | filename: 'index.html' // 便于开发人员自己查看 153 | }), 154 | new VueLoaderPlugin() 155 | ], 156 | 157 | 4. 新建vue文件 158 | 159 | 注意: vue文件内部有三个节点, 分别是 `` 和 `` 还有 `` 160 | 161 | 分别表示HTML模板, js代码, 样式, template节点下只能有一个根元素 162 | 163 | login.vue: 164 | 165 | 170 | 171 | 176 | 177 | 182 | 183 | 5. 在main.js中导入login.vue文件, 以变量接收对象 184 | 185 | import login from './src/login.vue' 186 | 187 | 6. 使用render函数渲染login组件 188 | 189 | let vm = new Vue({ 190 | el:'#app', 191 | data: { 192 | msg: 'xxx' 193 | }, 194 | render: c => c(login) 195 | }) 196 | 197 | **注意**: 使用render函数渲染组件, 可以使用`vue.runtime.common.js`的vue包, 不会报错 198 | 199 | 不过render函数的特点是将app盒子直接替换成login组件 200 | 201 | ### ES6的export和export default ### 202 | 203 | 在同一个目录中有两个js文件: `m1.js` 和 `m2.js` 204 | 205 | 在ES6中, 导入和导出的语法一共就4种方式: 206 | 207 | import *** from *** 例如: import $ from 'jquery' 208 | import *** 例如: import './css/1.css' 209 | export 210 | export default 211 | 212 | 由于开发中会用到模块化, 所以在一个js文件中定义的成员, 需要向外暴露, 就可以使用export或export default 213 | 214 | 1. export default 介绍 215 | 216 | 一个js文件, 只能通过 `export default` 向外暴露一次 217 | 218 | 通过 `export default` 暴露的对象, 可以在 `import` 的时候手动指定变量名接收, 不需要考虑导出时的变量, 相当于直接把整个数据导出了 219 | 220 | 案例: 在`m1.js`中导出一个对象, 在`m2.js`中接收 221 | 222 | `m1.js` 223 | 224 | export default { 225 | name: '张三', 226 | age: 18 227 | } 228 | 229 | `m2.js` 230 | 231 | import person from './m1.js' 232 | 233 | 2. export 介绍 234 | 235 | 一般将export称为按需导出 236 | 237 | 在一个js文件中, 可以通过`export`向外暴露多个成员 238 | 239 | 通过 `export` 暴露的成员, 必须定义名称, 而且其他地方导入的时候, 必须按照导出时定义名称来选择导入 240 | 241 | 导入时可以通过 `as` 起别名 242 | 243 | 案例: 在`m1.js`中导出多个数据, 在`m2.js`中接收 244 | 245 | `m1.js` 246 | 247 | export let name = '李四' 248 | export let age = 18 249 | export let gender = '男' 250 | export let obj = { name: '对象的名字' } 251 | 252 | `m2.js` 253 | 254 | import { name, age, obj as o } from './m1.js' 255 | 256 | ### 在webpack中使用vue-router ### 257 | 258 | 1. 装包 259 | 260 | npm i vue-router -S 261 | 262 | 2. 导入vue-router包并安装到vue身上 263 | 264 | import Vue from 'vue' 265 | import VueRouter from 'vue-router' 266 | // 手动安装到vue身上 267 | Vue.use(VueRouter) 268 | 269 | 3. 创建路由对象 270 | 271 | import account from './componets/account.vue' 272 | 273 | let router = new VueRouter({ 274 | routes: [ 275 | { path: '/account', component: account } 276 | ] 277 | }) 278 | 279 | 4. 将路由对象挂载到vm实例 280 | 281 | let vm = new Vue({ 282 | el: '#app', 283 | data: {}, 284 | router 285 | }) 286 | 287 | -------------------------------------------------------------------------------- /vueday02/code/01.品牌列表案例.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 17 | 18 | 19 |
    20 |
    21 |

    添加品牌

    22 |
    23 |
    24 | 28 | 29 | 33 | 34 | 35 | 36 | 37 | 41 |
    42 |
    43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 66 | 67 | 68 |
    IdNameCtimeOperation
    {{ item.id }}{{ item.ctime }} 64 | 删除 65 |
    69 | 70 | 71 | 72 |
    73 | 74 | 216 | 217 | 218 | -------------------------------------------------------------------------------- /notes/vueday06.md: -------------------------------------------------------------------------------- 1 | ## vue day06 ## 2 | 3 | ### 路由的基本使用 ### 4 | 5 | 1. 导入vue-router的js文件 6 | 7 | 8 | 9 | 2. 创建组件的模板对象 10 | 11 | // 组件的模板对象 12 | var login = { 13 | template: '

    登录组件

    ' 14 | } 15 | 16 | var register = { 17 | template: '

    注册组件

    ' 18 | } 19 | 20 | 3. 创建路由对象, 配置路由的匹配规则 21 | 22 | let router = new VueRouter({ 23 | // 匹配规则 24 | routes: [ 25 | { path: '/login', component: login }, 26 | { path: '/register', component: register } 27 | ] 28 | }) 29 | 30 | 4. 将router挂载到vm实例身上 31 | 32 | let vm = new Vue({ 33 | el: '#app', 34 | data: {}, 35 | methods: {}, 36 | router 37 | }) 38 | 39 | 5. 提前准备好一个"坑", 占位组件 `router-view` 40 | 41 | `router-view`在哪里, 路由匹配成功后组件就会放到哪里 42 | 43 | 44 | 45 | 注意: 当vue-router包引入后, 会自动开启hash路由模式, 也就是在地址栏最后会自动加上 `#/` 46 | 47 | 路由切换的原理: 地址栏的hash `#/` 的值发生变化时, 路由会进行匹配, 将匹配的组件替换到 `` 的区域中 48 | 49 | 结合a标签可以实现, 点击切换路由, 例如: 50 | 51 | 登录 52 | 注册 53 | 54 | ### router-link的使用 ### 55 | 56 | 上面使用a标签的方式, 每次都需要在 `/` 前面加一个 `#` 不符合优雅的程序员编程习惯 57 | 58 | Vue-Router也提供了一个组件来帮助我们渲染a标签: `router-link` 59 | 60 | 登录 61 | 注册 62 | 63 | 如果你不希望router-link渲染成一个a标签, 还可以通过tag属性指定你希望渲染的标签元素 64 | 65 | 登录 66 | 67 | **注意: 即使被渲染成了span, 点击还是会切换路由, 因为不管渲染成什么元素, Vue-Router都会为其绑定点击事件** 68 | 69 | ### redirect的作用 ### 70 | 71 | 用于设置页面加载时默认显示的组件 72 | 73 | 在路由匹配规则的配置中使用path+redirect属性来设置重定向的组件: 74 | 75 | ... 76 | routes: [ 77 | { path: '/', redirect: '/login' }, 78 | { path: '/login', component: login }, 79 | ] 80 | ... 81 | 82 | ### 当前选中的路由链接高亮 ### 83 | 84 | `router-link` 默认会有切换时的类样式, 当前显示的路由, 默认加上的类名为: `router-link-active` 85 | 86 | 我们可以自己添加css类样式完成当前路由高亮的效果 87 | 88 | 除此之外, 还可以将默认值修改为自定义的类名: 89 | 90 | 在路由的构造选项中, 通过 `linkActiveClass` 设置自定义类名 91 | 92 | let router = new VueRouter({ 93 | // 本地打开只能使用 hash , 不能使用history, 如果需要使用history模式, 必须后台服务器给予支持 94 | // mode: 'history', 95 | // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思 96 | routes: [ // 路由匹配规则 97 | // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性： 98 | // 属性1 是 path， 表示监听 哪个路由链接地址； 99 | // 属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件 100 | // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称； 101 | // { path: '/', component: login }, 102 | { path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事 103 | { path: '/login', component: login }, 104 | { path: '/register', component: register } 105 | ], 106 | linkActiveClass: 'myactive' 107 | }) 108 | 109 | ### 路由传参-query ### 110 | 111 | 与后端路由传参方式一样, 在链接最后加上 ? 传参 112 | 113 | 114 | 115 | query传参的特点是, 路由匹配规则和 `/login` 一样, 不需要做额外的修改 116 | 117 | var router = new VueRouter({ 118 | routes: [ 119 | { path: '/login', component: login }, 120 | { path: '/register', component: register } 121 | ] 122 | }) 123 | 124 | 在login组件内部, 根据 `组件实例.$route.query` 获取query对象 125 | 126 | this.$route.query.name 127 | 128 | 如果需要把参数渲染到页面, 由于以前使用data中的数据渲染到页面, 可以省略this, 这里同理, 如果需要使用插值表达式进行渲染: 129 | 130 | {{ $route.query.name }} 131 | 132 | ### 路由传参-params ### 133 | 134 | 这种方式需要在路由匹配中定义好才可以使用 `:id` 135 | 136 | var router = new VueRouter({ 137 | routes: [ 138 | { path: '/login/:id/:name', component: login }, 139 | { path: '/register', component: register } 140 | ] 141 | }) 142 | 143 | 定义好了路由规则之后, 可以直接在URL中进行传参了: 144 | 145 | 注意: 必须完整匹配 146 | 147 | 148 | 149 | 在login组件实例中可以使用 `$route.params.id` 获取参数 150 | 151 | this.$route.params.id 152 | this.$route.params.name 153 | 154 | 如果需要渲染到页面也可以通过插值表达式进行渲染 155 | 156 | ### 路由嵌套(子路由) ### 157 | 158 | 先在路由匹配规则中, 通过`children`属性来确定路由之间的关系: 159 | 160 | var router = new VueRouter({ 161 | routes: [ 162 | { 163 | path: '/account', 164 | component: account, 165 | // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址 166 | children: [ 167 | { path: 'login', component: login }, 168 | { path: 'register', component: register } 169 | ] 170 | } 171 | // { path: '/account/login', component: login }, 172 | // { path: '/account/register', component: register } 173 | ] 174 | }) 175 | 176 | 注意: 如果在写子路由的匹配规则, 需要注意, path前面不能加 `/` 如果加 `/`表示直接匹配 `/login`, 而我们期望的是匹配 `/account/login`, 所以不能在子路由的规则前面加上 `/` 必须是相对路径, 如果期望就是 `/login`, 那么就可以在前面加上 `/` 177 | 178 | 匹配规则书写完后, 还需要在account组件中, 放置一个 `` 组件, 用于切换子路由的登录注册组件 179 | 180 | ### watch的使用 ### 181 | 182 | 用于监视数据的变化 183 | 184 | 在data中先定义好数据并使用 185 | 186 | 与data同级的位置有一个watch属性, 也是一个对象, 在其中可以定义一些与data中要监视的数据同名的函数, 用于监听data中数据的变化: 187 | 188 | let vm = new Vue({ 189 | el: '#app', 190 | data: { 191 | msg: '嘻嘻嘻' 192 | }, 193 | methods: {}, 194 | watch: { 195 | // 此处的函数名必须和data中要监视的数据一致 196 | msg(newVal, oldVal) { 197 | // 当msg发生变化的时候会执行该函数, 在此处可以处理一些操作 198 | } 199 | } 200 | }) 201 | 202 | 除了可以监视data中已有数据, watch还可以监视vm实例身上的属性, 例如最常用的就是监视路由的变化: `$route` 对象的变化 203 | 204 | watch: { 205 | $route(to, from) { 206 | // to 表示路由改变后的值 207 | // from 表示路由改变前的值 208 | } 209 | } 210 | 211 | ### computed属性的使用 ### 212 | 213 | 1. 计算属性就是定义在 `computed` 中的函数, 虽然是一个函数, 使用时和`data`中的属性一模一样, 就当成一个普通的数据使用即可 214 | 215 | 2. 在计算属性内部用到的**所有数据**, 只要发生了变化, 计算属性会自动同步 216 | 217 | 3. 同步的结果还会缓存, 如果多个地方引用了计算属性, 不会重复计算, 每次更新只会计算一次 218 | 219 | 4. 由于计算属性使用和`data`中的属性一模一样, 也是挂载到vm实例身上的一个数据, 所以**不能和`data`中的属性产生冲突, 重复声明!!!** 220 | 221 | 5. 计算属性无法通过外界修改, 只有当内部引用的数据发生变化时才会自动更新 222 | 223 | 案例: 224 | 225 | 226 | data: { 227 | msg: '谢俊今天没洗头,' 228 | }, 229 | computed: { 230 | fullMessage() { 231 | return this.msg + '今天天气真好啊!' 232 | } 233 | } 234 | 235 | 当msg发生变化时, fullMessage会自动更新 236 | 237 | ### nrm的使用 ### 238 | 239 | 由于npm默认的服务器站点访问速度较慢, 所以之前我们使用`cnpm`进行包的安装 240 | 241 | 但是有时候`cnpm`装包会出现问题, 或者无法安装 242 | 243 | 还有另一个渠道, 使用`nrm`修改npm下载源地址 244 | 245 | 1. 安装nrm 246 | 247 | npm i -g nrm 248 | 249 | 或 250 | 251 | cnpm i -g nrm 252 | 253 | 2. 通过 `nrm ls` 查看所有支持的源 254 | 255 | `*`表示当前正在使用的源 256 | 257 | C:\Users\LTC>nrm ls 258 | 259 | npm ---- https://registry.npmjs.org/ 260 | cnpm --- http://r.cnpmjs.org/ 261 | * taobao - https://registry.npm.taobao.org/ 262 | nj ----- https://registry.nodejitsu.com/ 263 | rednpm - http://registry.mirror.cqupt.edu.cn/ 264 | npmMirror https://skimdb.npmjs.com/registry/ 265 | edunpm - http://registry.enpmjs.org/ 266 | 267 | 3. 通过 `nrm use cnpm` 切换当前使用的源 268 | 269 | nrm use cnpm 270 | 271 | C:\Users\LTC>nrm use cnpm 272 | 273 | Registry has been set to: http://r.cnpmjs.org/ 274 | 275 | 4. 做完以上操作后, 正常使用 `npm i` 安装你的包即可 276 | 277 | ### webpack4的基本使用 ### 278 | 279 | 1. 打包 280 | 281 | 会自动创建输出目录 282 | 283 | webpack 入口文件 --output 输出文件 284 | 285 | 举例: 286 | 287 | webpack main.js -o ./dist/main.js 288 | 289 | -d 参数可以指定当前的模式为development, 即不压缩 290 | 291 | webpack main.js -o ./dist/main.js -d 292 | 293 | 在webpack3中不需要指定以上所有的参数, -o和-d都不需要, 但是在webpack4中必须指定 -o, 如果不指定-d默认以production模式打包, 会进行压缩, 速度较慢, 开发阶段建议不要使用 294 | 295 | -------------------------------------------------------------------------------- /notes/vueday07.md: -------------------------------------------------------------------------------- 1 | ## vue day07 ## 2 | 3 | ### webpack基本使用的复习 ### 4 | 5 | 1. 在项目中安装webpack包 6 | 7 | npm install -D webpack 8 | npm install -D webpack-cli 9 | 10 | 注意事项: 如果安装的是4以上的版本, 还需要装`cli`的包 11 | 12 | 13 | 2. 在全局安装webpack包 14 | 15 | npm install webpack -g 16 | npm install webpack-cli -g 17 | 18 | 3. 使用全局的webpack指令, 编译输出文件 19 | 20 | 与webpack3不同, webpack4使用指令时, 必须加上 `-o` 的参数才可以正确的输出到./dist目录下 21 | 22 | webpack main.js -o ./dist/main.js 23 | 24 | ### webpack的配置文件 ### 25 | 26 | 如果每次执行webpack指令时都需要指定入口和出口, 就太麻烦了, 官方文档也提供了一种配置文件的方式, 只需要在项目的根目录下新建一个名为: `webpack.config.js` 文件, 并且遵循CommonJS规范对外暴露一个配置对象, 按照官方文档进行配置, 即可每次只需要输入webpack自动查找配置文件进行编译打包: 27 | 28 | webpack.config.js文件配置如下: 29 | 30 | // 完全遵循了CommonJS规范 这里可以直接写node平台的代码 31 | const path = require('path') 32 | 33 | module.exports = { 34 | entry: './main.js', // 指定入口, 相对路径和绝对路径均可 35 | output: { 36 | path: path.join(__dirname, './dist'), // 指定出口目录, 必须是绝对路径, 相对路径会报错!!! 37 | filename: 'bundle.js' // 指定出口文件名 38 | }, // 指定出口, 如果不设置, 默认是 ./dist 目录, 输出入口文件同名的文件 39 | mode: 'development' // 开发 developer 开发者 Programmer 程序员 40 | } 41 | 42 | ### webpack-dev-server的使用 ### 43 | 44 | 每次修改代码都需要手动运行`webpack`指令, 不符合开发人员的需求 45 | 46 | 所以可以结合`webpack-dev-server`工具, 完成自动化编译打包 47 | 48 | 1. 安装`webpack-dev-server` 49 | 50 | 必须先安装`webpack`和`webpack-cli`在项目开发依赖! 51 | 52 | npm i webpack webpack-cli -D 53 | 54 | 再安装`webpack-dev-server`到项目开发依赖 55 | 56 | npm i webpack-dev-server -D 57 | 58 | 2. 在`package.json`的`scripts`节点中配置一个运行脚本 59 | 60 | 因为webpack-dev-server是安装在项目开发依赖, 无法全局直接运行, 所以必须在`package.json`中配置运行脚本 61 | 62 | "scripts": { 63 | "test": "echo \"Error: no test specified\" && exit 1", 64 | "dev": "webpack-dev-server" 65 | }, 66 | 67 | 3. 配置完脚本后, 通过`npm run dev`可以运行脚本 68 | 69 | npm run dev 70 | 71 | #### webpack-dev-server的特点 #### 72 | 73 | 1. 运行`npm run dev`后, 会启动一个web服务器, 将项目根目录托管到web服务器中 74 | 75 | 2. 每当修改了项目中的main.js文件后就会自动编译 76 | 77 | 3. 编译输出的文件被托管在项目根目录下, 是一个虚拟文件, 通过`http://localhost:8080/bundle.js`可以直接访问, 但是不会存储在物理磁盘上, 而是放在内存中 78 | 79 | 因为放在物理磁盘上影响效率, 而且对磁盘的寿命也有影响 80 | 81 | 了解了webpack-dev-server的特点后, 在`index.html`中, 就不能再引入 `../dist/bundle.js` 而是应该引入, web服务器根目录的`bundle.js` 82 | 83 | 84 | 85 | 享受它带来的快感吧! 86 | 87 | 每次修改了main.js后会自动编译输出到根目录的内存中的bundle.js文件, 同时还支持自动刷新浏览器 88 | 89 | 注意: webpack-dev-server, 主要作用就是在开发阶段方便程序员频繁修改代码, 自动看效果, 如果项目最终上线, 还是需要使用webpack进行打包编译输出到物理磁盘的dist目录 90 | 91 | #### webpack-dev-server的常用参数 #### 92 | 93 | --open // 自动打开浏览器 94 | --port // 自定义端口号 95 | --contentBase // 指定托管的根目录 96 | --hot // 热模块替换 HMR Hot Module Replacement 97 | 98 | 在`package.json`的`scripts`节点下设置: 99 | 100 | "scripts": { 101 | "test": "echo \"Error: no test specified\" && exit 1", 102 | "dev": "webpack-dev-server --open --port 3000 --contentBase ./src --hot" 103 | }, 104 | 105 | #### webpack-dev-server参数写入配置(第二种设置参数的方式) #### 106 | 107 | 可以不再命令后面使用参数, `package.json`中直接调用`webpack-dev-server` 108 | 109 | 在`package.json`的`scripts`节点下设置: 110 | 111 | "scripts": { 112 | "test": "echo \"Error: no test specified\" && exit 1", 113 | "dev": "webpack-dev-server", 114 | "dev2": "webpack-dev-server --open --port 3000 --contentBase ./src --hot" 115 | }, 116 | 117 | 参数在`webpack.config.js`文件中的`devServer`节点中设置: 118 | 119 | devServer: { 120 | contentBase: path.join(__dirname, 'src'), // 托管根路径 121 | compress: true, // 启用压缩 122 | port: 3000, // 端口号 123 | open: true, // 自动打开浏览器 124 | hot: true // 2. 开启热更新 如果设置hot为true 需要手动添加HMR插件, 详见第三步 125 | }, 126 | 127 | **注意**: 必须有 `webpack.HotModuleReplacementPlugin` 才能完全启用 HMR, 如果 `webpack` 或 `webpack-dev-server` 是通过 `--hot` 选项启动的，那么这个插件会被自动添加, 反之需要手动添加HMR插件, 在`plugins`节点下创建HMR对象即可 128 | 129 | // 1. 导入webpack 130 | const webpack = require('webpack') 131 | 132 | module.exports = { 133 | // ... 134 | plugins: [ // 插件配置项 135 | new webpack.HotModuleReplacementPlugin(), // 3. 添加热更新插件 136 | ], 137 | } 138 | 139 | ### HtmlWebpackPlugin的使用 ### 140 | 141 | 因为每次使用物理磁盘的`index.html`, 还需要考虑`bundle.js`的位置, `DevServer`生成的`bundle.js`在 `/` 目录, 而`webpack`打包输出的却在`dist`目录, 所以容易产生一些困扰, 开发阶段引用根目录, 上线后又要手动换成`dist`目录, 不太方便 142 | 143 | `HtmlWebpackPlugin`帮助我们解决了`bundle.js`的路径问题 144 | 145 | 1. 将`index.html`托管到内存中的根目录下, 和`bundle.js`同级 146 | 147 | 2. 自动添加了`bundle.js`的引用 148 | 149 | 使用方法: 150 | 151 | 1. 安装插件 152 | 153 | npm install --save-dev html-webpack-plugin 154 | 155 | 2. 在`webpack.config.js`中引入 156 | 157 | // 导入HtmlWebpackPlugin 158 | const HtmlWebpackPlugin = require('html-webpack-plugin') 159 | 160 | 3. 在`plugins`节点下添加插件 161 | 162 | plugins: [ // 插件配置项 163 | new webpack.HotModuleReplacementPlugin(), // 3. 添加热更新插件 164 | new HtmlWebpackPlugin({ // 用于帮助我们自动生成HTML文件的 165 | template: './src/index.html', // 如果不指定template, 默认生成一个空的HTML5页面, 指定template表示从哪个HTML文件编译一个新的HTML出来 166 | filename: 'index.html' // 默认值就是index.html, 便于开发人员自己查看 167 | }) 168 | ], 169 | 170 | ### loader的使用 ### 171 | 172 | - webpack默认情况下只支持js文件的打包编译, 除此以外所有的文件都无法解析处理 173 | 174 | - 这样设计的目的是为了让webpack更轻量级, 可定制性更高, 根据开发者的需要而选择合适的loader来解析对应的文件 175 | 176 | - 所以提出了loader的概念, 主要的目的是为了处理一些其他文件的打包编译 177 | 178 | 在webpack中, 最基础的css文件也无法处理, 而且使用了webpack之后, css也不会像以前那样在HTML中引入, 而是放在`main.js`中使用es6的`import`语法引入: 179 | 180 | import './src/css/index.css' 181 | 182 | #### css-loader和style-loader的使用 #### 183 | 184 | 由于项目中并未安装`css-loader` 所以无法解析css后缀的文件 185 | 186 | 1. 安装css-loader和style-loader 187 | 188 | npm i style-loader css-loader -D 189 | 190 | 2. 配置loader 191 | 192 | rules节点表示loader的匹配规则, 根据不同的正则来匹配不同的文件类型, 从而选择合适的loader来解析文件 193 | 194 | module.exports = { 195 | module: { 196 | rules: [ 197 | { 198 | test: /\.css$/, 199 | use: [ 'style-loader', 'css-loader' ] 200 | } 201 | ] 202 | } 203 | } 204 | 205 | **注意: loader是有加载顺序的, 顺序是从右到左** 206 | 207 | 为什么会有style-loader和css-loader呢? 208 | 209 | css-loader用于解析css文件, 将其解析为样式, 交给style-loader应用到页面中 210 | 211 | #### less-loader的使用 #### 212 | 213 | 根据上面的经验来学习less-loader 214 | 215 | 1. 装包, 注意: 需要装less-loader和less两个包 216 | 217 | npm i less-loader less -D 218 | 219 | 2. 配置 220 | 221 | module: { 222 | rules: [ 223 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 224 | // less-loader 225 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } 226 | ] 227 | }, 228 | 229 | 230 | #### sass-loader的使用 #### 231 | 232 | 根据上面的经验来学习sass-loader 233 | 234 | 1. 装包, 注意需要安装sass-loader和node-sass两个包 235 | 236 | npm i sass-loader node-sass -D 237 | 238 | 2. 配置 239 | 240 | module: { 241 | rules: [ 242 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 243 | // less-loader 244 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, 245 | { test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 246 | ] 247 | }, 248 | 249 | #### url-loader的使用 #### 250 | 251 | 根据上面的经验来学习url-loader 252 | 253 | 作用: 由于webpack无法加载图片, 在css中如果使用了`background-image`, webpack就会报错, 同理如果使用了字体文件也无法加载 254 | 255 | 此时都需要使用`file-loader`或者`url-loader` 256 | 257 | 两者的区别在于: `url-loader` 更高级一些, 可以添加一些配置, 实现在指定大小以内的图片进行base64的转码, 减少浏览器的二次请求 258 | 259 | 1. 装包 260 | 261 | npm i -D url-loader file-loader 262 | 263 | 2. 配置 264 | 265 | { 266 | test: /\.(png|jpg|gif|jpeg|bmp|webp)$/, 267 | use: ['url-loader?limit=8192&name=[hash:8]-[name].[ext]'] 268 | // use: [ 269 | // { 270 | // loader: 'url-loader', 271 | // options: { 272 | // limit: 8192 // 限制 单位为byte 8192字节是8KB 273 | // } 274 | // } 275 | // ] 276 | }, 277 | { test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] } 278 | 279 | --------------------------------------------------------------------------------