├── .gitignore ├── promise ├── 1.txt ├── 2.txt ├── 3.txt └── app.js ├── vueday06 ├── vue-cli-demo │ ├── static │ │ └── .gitkeep │ ├── .eslintignore │ ├── config │ │ ├── prod.env.js │ │ ├── dev.env.js │ │ └── index.js │ ├── build │ │ ├── logo.png │ │ ├── vue-loader.conf.js │ │ ├── build.js │ │ ├── check-versions.js │ │ ├── webpack.base.conf.js │ │ ├── utils.js │ │ └── webpack.dev.conf.js │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── router │ │ │ └── index.js │ │ ├── App.vue │ │ └── components │ │ │ └── HelloWorld.vue │ ├── .editorconfig │ ├── .gitignore │ ├── .babelrc │ ├── .postcssrc.js │ ├── index.html │ ├── README.md │ ├── .eslintrc.js │ └── package.json ├── vue-cli-test │ ├── static │ │ └── .gitkeep │ ├── config │ │ ├── prod.env.js │ │ ├── dev.env.js │ │ └── index.js │ ├── build │ │ ├── logo.png │ │ ├── vue-loader.conf.js │ │ ├── build.js │ │ ├── check-versions.js │ │ ├── webpack.base.conf.js │ │ └── utils.js │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── router │ │ │ └── index.js │ │ ├── App.vue │ │ └── components │ │ │ └── HelloWorld.vue │ ├── .editorconfig │ ├── .gitignore │ ├── .babelrc │ ├── .postcssrc.js │ ├── index.html │ ├── README.md │ └── package.json ├── 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 ├── webpack-demo │ ├── .babelrc │ ├── src │ │ ├── css │ │ │ ├── index.css │ │ │ ├── index.scss │ │ │ └── index.less │ │ ├── images │ │ │ └── 1.jpg │ │ ├── m1.js │ │ ├── login.vue │ │ ├── index.html │ │ └── main.js │ ├── dist │ │ └── index.html │ ├── package.json │ └── webpack.config.js └── 03.code │ ├── 01.在页面中渲染基本的组件.html │ └── 02.在页面中使用render函数渲染组件.html ├── vueday05 ├── webpack-study │ ├── 先运行 npm install 安装依赖包.txt │ ├── src │ │ ├── css │ │ │ ├── index.css │ │ │ ├── index.less │ │ │ └── index.scss │ │ ├── index.html │ │ └── main.js │ ├── package.json │ └── webpack.config.js ├── webpack-demo │ ├── src │ │ ├── css │ │ │ ├── index.css │ │ │ ├── index.scss │ │ │ └── index.less │ │ ├── images │ │ │ └── 1.jpg │ │ ├── main.js │ │ └── index.html │ ├── package.json │ ├── dist │ │ └── index.html │ └── webpack.config.js └── code │ ├── 03.名称案例.html │ ├── 04.名称案例-方式2.html │ ├── 02.路由基本的使用.html │ ├── 01.父子组件之间传值.html │ ├── 06.名称案例-方式3.html │ └── 05.watch-监视路由地址的改变.html ├── notes ├── git冲突的解决.png ├── tcp和udp.png ├── vueday06.md ├── vueday08.md └── vueday03.md ├── vueday02 ├── code │ ├── 06.客户端JSONP页面.html │ ├── 按键修饰符.html │ ├── 过滤器的基本用法.html │ ├── 03.过滤器的基本使用.html │ ├── 05.vue-resource基本使用.html │ └── 04.生命周期函数演示.html └── node-server │ └── app.js ├── vueday01 ├── 15.今天内容的总结和回顾.html ├── 12.v-for迭代数字.html ├── 08.vue中样式-style.html ├── 09.v-for循环普通数组.html ├── 11.v-for循环对象.html ├── 10.v-for循环对象数组.html ├── v-bind指令.html ├── 01.Vue的基本代码.html ├── vue的基本使用.html ├── 05.v-model指令的学习.html ├── v-model指令.html ├── 14.v-if和v-show的使用.html ├── v-on指令.html ├── 13.v-for循环中key属性的使用.html ├── 跑马灯.html ├── 07.vue中样式-class.html ├── 02.v-cloak的学习.html ├── 06.简易的计算器.html ├── 03.跑马灯效果.html └── 04.事件修饰符.html ├── vueday03 ├── 02.动画-不使用动画.html ├── 09.组件-创建组件的方式2.html ├── 11.组件-组件中的data和methods.html ├── 14.组件切换-方式2.html ├── 12.组件-why components data must be a function.html ├── 08.组件-创建组件的方式1.html ├── 动画最终章节.html ├── 03.动画-使用过渡类名实现动画.html ├── 15.组件切换-切换动画.html ├── 结合第三方类库实现动画.html ├── 05.动画-使用第三方类实现动画.html ├── 10.组件-创建组件的方式3.html ├── 04.动画-修改v-前缀.html ├── 组件的基本使用.html ├── 小球动画.html ├── 13.组件切换-方式1.html ├── 06.动画-使用钩子函数模拟小球半场动画.html ├── 列表动画.html └── 07.动画-列表动画.html ├── README.md └── vueday04 ├── 02.复习-定义组件的方式.html ├── 06.ref获取DOM元素和组件.html ├── 09.路由规则传参方式2.html ├── 08.路由规则中定义参数.html ├── 03.组件-父组件向子组件传值.html ├── 01.复习-实现小球动画.html ├── 04.组件-父组件把方法传递给子组件.html ├── 10.路由-路由的嵌套.html ├── 11.路由-命名视图实现经典布局.html ├── 路由的基本使用.html └── 07.路由-路由的基本使用.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /promise/1.txt: -------------------------------------------------------------------------------- 1 | 1.今天天气真好啊适合睡觉! 2 | -------------------------------------------------------------------------------- /promise/2.txt: -------------------------------------------------------------------------------- 1 | 2.今天天气真冷啊适合睡觉! 2 | -------------------------------------------------------------------------------- /promise/3.txt: -------------------------------------------------------------------------------- 1 | 3.今天天气真热啊适合睡觉! 2 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vueday05/webpack-study/先运行 npm install 安装依赖包.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vueday05/webpack-study/src/css/index.css: -------------------------------------------------------------------------------- 1 | li{ 2 | list-style: none; 3 | } -------------------------------------------------------------------------------- /vueday06/webpack-demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "stage-0"] 3 | } -------------------------------------------------------------------------------- /vueday05/webpack-demo/src/css/index.css: -------------------------------------------------------------------------------- 1 | li{ 2 | list-style: none; 3 | } 4 | -------------------------------------------------------------------------------- /vueday06/webpack-demo/src/css/index.css: -------------------------------------------------------------------------------- 1 | li{ 2 | list-style: none; 3 | } 4 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /vueday05/webpack-study/src/css/index.less: -------------------------------------------------------------------------------- 1 | ul{ 2 | padding: 0; 3 | margin: 0; 4 | } -------------------------------------------------------------------------------- /notes/git冲突的解决.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/notes/git冲突的解决.png -------------------------------------------------------------------------------- /notes/tcp和udp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/notes/tcp和udp.png -------------------------------------------------------------------------------- /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/vue-cli-demo/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /vueday05/webpack-demo/src/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/vueday05/webpack-demo/src/images/1.jpg -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/vueday06/vue-cli-demo/build/logo.png -------------------------------------------------------------------------------- /vueday06/vue-cli-test/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/vueday06/vue-cli-test/build/logo.png -------------------------------------------------------------------------------- /vueday06/webpack-demo/src/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/vueday06/webpack-demo/src/images/1.jpg -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/vueday06/vue-cli-demo/src/assets/logo.png -------------------------------------------------------------------------------- /vueday06/vue-cli-test/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/vueday06/vue-cli-test/src/assets/logo.png -------------------------------------------------------------------------------- /vueday06/01.webpack-study/src/images/生小孩.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/vueday06/01.webpack-study/src/images/生小孩.jpg -------------------------------------------------------------------------------- /vueday06/01.webpack-study/src/images2/生小孩.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/vue-study-road23/master/vueday06/01.webpack-study/src/images2/生小孩.jpg -------------------------------------------------------------------------------- /vueday05/webpack-demo/src/css/index.scss: -------------------------------------------------------------------------------- 1 | html, body{ 2 | margin: 0; 3 | padding: 0; 4 | 5 | li{ 6 | font-size: 12px; 7 | line-height: 90px; 8 | } 9 | } -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /vueday06/webpack-demo/src/css/index.scss: -------------------------------------------------------------------------------- 1 | html, body{ 2 | margin: 0; 3 | padding: 0; 4 | 5 | li{ 6 | font-size: 12px; 7 | line-height: 90px; 8 | } 9 | } -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/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 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /vueday05/webpack-demo/src/css/index.less: -------------------------------------------------------------------------------- 1 | ul{ 2 | padding: 0; 3 | margin: 0; 4 | // base64编码 5 | background-image: url('../images/1.jpg'); 6 | } 7 | 8 | body, html { 9 | margin: 0; 10 | padding: 0; 11 | } -------------------------------------------------------------------------------- /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/vue-cli-demo/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /vueday06/webpack-demo/src/css/index.less: -------------------------------------------------------------------------------- 1 | ul{ 2 | padding: 0; 3 | margin: 0; 4 | // base64编码 5 | background-image: url('../images/1.jpg'); 6 | } 7 | 8 | body, html { 9 | margin: 0; 10 | padding: 0; 11 | } -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/subcom/login.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 9 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | /* eslint-disable no-new */ 8 | new Vue({ 9 | el: '#app', 10 | router, 11 | render: h => h(App) 12 | }) 13 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | /* eslint-disable no-new */ 8 | new Vue({ 9 | el: '#app', 10 | router, 11 | render: h => h(App) 12 | }) 13 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /vueday06/webpack-demo/src/m1.js: -------------------------------------------------------------------------------- 1 | // 模块对外暴露的默认成员, 一个模块只能对外暴露一次export default 2 | // export default 3 | // 无需在导出的时候起名字. 导入时通过import xxx语法来起名 4 | export default { 5 | a: 1, 6 | b: 2 7 | } 8 | 9 | // export 10 | // 按需导出 11 | export const name = '素馅熊' 12 | export const gender = 'female' 13 | 14 | // import xxx from './m1.js' -------------------------------------------------------------------------------- /vueday06/webpack-demo/src/login.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-cli-demo 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import HelloWorld from '@/components/HelloWorld' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'HelloWorld', 12 | component: HelloWorld 13 | } 14 | ] 15 | }) 16 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-cli-test 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import HelloWorld from '@/components/HelloWorld' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'HelloWorld', 12 | component: HelloWorld 13 | } 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 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 23 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 24 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | // 导入 app 组件 4 | import app from './App.vue' 5 | 6 | // 导入 自定义路由模块 7 | import router from './router.js' 8 | 9 | var vm = new Vue({ 10 | el: '#app', 11 | render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中 12 | router // 4. 将路由对象挂载到 vm 上 13 | }) 14 | 15 | // 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中； 16 | // Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 中去； -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-demo 2 | 3 | > 这是一个牛逼的vue项目 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-test 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /vueday02/code/06.客户端JSONP页面.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/main/Account.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 15 | 16 | 25 | -------------------------------------------------------------------------------- /vueday05/webpack-demo/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 | // 转译工具 babel 将所有ES6的语法 转换成ES5 为了浏览器兼容性 10 | 11 | import './css/index.css' 12 | import './css/index.less' 13 | import './css/index.scss' 14 | 15 | import 'bootstrap/dist/css/bootstrap.css' 16 | 17 | $(function () { 18 | $('li:odd').css('backgroundColor', 'blue') 19 | $('li:even').css('backgroundColor', function () { 20 | return '#' + 'baa119' 21 | }) 22 | }) 23 | -------------------------------------------------------------------------------- /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/vue-cli-test/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vueday02/code/按键修饰符.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vueday06/05.webpack-路由嵌套/src/router.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 | // 导入 Account 组件 8 | import account from './main/Account.vue' 9 | import goodslist from './main/GoodsList.vue' 10 | 11 | // 导入Account的两个子组件 12 | import login from './subcom/login.vue' 13 | import register from './subcom/register.vue' 14 | 15 | // 3. 创建路由对象 16 | var router = new VueRouter({ 17 | routes: [ 18 | // account goodslist 19 | { 20 | path: '/account', 21 | component: account, 22 | children: [ 23 | { path: 'login', component: login }, 24 | { path: 'register', component: register } 25 | ] 26 | }, 27 | { path: '/goodslist', component: goodslist } 28 | ] 29 | }) 30 | 31 | // 把路由对象暴露出去 32 | export default router -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## vue-study-road23 ## 2 | 3 | > 这是我的vue学习笔记! 请多多关照! 4 | 5 | ### vue day01 ### 6 | 7 | - [笔记](./notes/vueday01.md "笔记") 8 | 9 | - [代码](./vueday01 "代码") 10 | 11 | ### vue day02 ### 12 | 13 | - [笔记](./notes/vueday02.md "笔记") 14 | 15 | - [代码](./vueday02 "代码") 16 | 17 | ### vue day03 ### 18 | 19 | - [笔记](./notes/vueday03.md "笔记") 20 | 21 | - [代码](./vueday03 "代码") 22 | 23 | ### vue day04 ### 24 | 25 | - [笔记](./notes/vueday04.md "笔记") 26 | 27 | - [代码](./vueday03 "代码") 28 | 29 | ### vue day05 ### 30 | 31 | - [笔记](./notes/vueday05.md "笔记") 32 | 33 | - [代码](./vueday04 "代码") 34 | 35 | ### vue day06 ### 36 | 37 | - [笔记](./notes/vueday06.md "笔记") 38 | 39 | - [代码](./vueday05 "代码") 40 | 41 | ### vue day07 ### 42 | 43 | - [笔记](./notes/vueday07.md "笔记") 44 | 45 | - [代码](./vueday05 "代码") 46 | 47 | ### vue day08 ### 48 | 49 | - [笔记](./notes/vueday08.md "笔记") 50 | 51 | - [代码](./vueday06 "代码") -------------------------------------------------------------------------------- /vueday01/v-bind指令.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 |
24 | 25 | 26 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /vueday05/webpack-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-demo", 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 --port 3000 --open --contentBase ./src --hot", 9 | "dev": "webpack-dev-server", 10 | "build": "webpack" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "jquery": "^3.3.1" 17 | }, 18 | "devDependencies": { 19 | "css-loader": "^2.1.0", 20 | "file-loader": "^3.0.1", 21 | "html-webpack-plugin": "^3.2.0", 22 | "less": "^3.9.0", 23 | "less-loader": "^4.1.0", 24 | "node-sass": "^4.11.0", 25 | "sass-loader": "^7.1.0", 26 | "style-loader": "^0.23.1", 27 | "webpack": "^4.29.0", 28 | "webpack-cli": "^3.2.1", 29 | "webpack-dev-server": "^3.1.14" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /vueday05/webpack-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /vueday06/03.code/02.在页面中使用render函数渲染组件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |

444444

16 |
17 | 18 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /vueday02/code/过滤器的基本用法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |

{{ msg | msgFilter('你好世界') }}

16 | 17 | 18 | 19 |
20 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /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 | var scriptStr = `${query.callback}(${JSON.stringify(data)})` 25 | // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行 26 | res.end(scriptStr) 27 | } else { 28 | res.end('404') 29 | } 30 | }) 31 | 32 | // 指定端口号并启动服务器监听 33 | server.listen(3000, function () { 34 | console.log('server listen at http://127.0.0.1:3000') 35 | }) -------------------------------------------------------------------------------- /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 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 中去； -------------------------------------------------------------------------------- /vueday05/webpack-demo/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /vueday06/webpack-demo/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /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 来暴露成员 -------------------------------------------------------------------------------- /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 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /vueday06/webpack-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

我不是vue控制的区域

17 |
18 | 19 | 20 |

{{msg}}

21 | 22 |
23 | 24 | 25 | 26 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vueday01/vue的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 |

{{ msg + 'xxx' }} 今天天气真好啊!

25 | 26 |

今天天气真好啊!

27 | 28 |

29 | 30 | 31 |
32 | 33 | 34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /vueday01/v-model指令.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |

{{msg}}

23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vueday06/webpack-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-demo", 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 --port 3000 --open --contentBase ./src --hot", 9 | "dev": "webpack-dev-server", 10 | "build": "webpack" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "bootstrap": "^3.4.0", 17 | "jquery": "^3.3.1", 18 | "vue": "^2.5.22" 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 | "node-sass": "^4.11.0", 31 | "sass-loader": "^7.1.0", 32 | "style-loader": "^0.23.1", 33 | "url-loader": "^1.1.2", 34 | "vue-loader": "^15.6.2", 35 | "vue-template-compiler": "^2.5.22", 36 | "webpack": "^4.29.0", 37 | "webpack-cli": "^3.2.1", 38 | "webpack-dev-server": "^3.1.14" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /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/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 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vueday01/v-on指令.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 |

{{ msg }}

24 | 25 | 26 |
27 | 28 | 29 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /vueday03/08.组件-创建组件的方式1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /vueday03/动画最终章节.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 |

这是一个H3

40 | 41 |
42 | 43 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /notes/vueday06.md: -------------------------------------------------------------------------------- 1 | ## vue day06 ## 2 | 3 | ### 路由传参 ### 4 | 5 | ### watch ### 6 | 7 | 监视数据变化 8 | 9 | 使用方法: 10 | 11 | 在于data/methods同级的地方, 添加一个watch属性, 值为对象 12 | 13 | 在对象中添加方法, 方法名就是要监视的数据(该数据必须存在, 可以是data中的数据, 也可是是vm实例上的数据例如:$route) 14 | 15 | watch: { 16 | $route(to, from) { 17 | // console.log(to, from) 18 | // console.log(to.path) 19 | // console.log(from.path) 20 | // console.log(newVal + ' --- ' + oldVal) 21 | // 客户端版本信息 BOM 22 | // console.log(window.navigator.userAgent) 23 | if (to.path === '/login') { 24 | console.log('欢迎进入登录页面') 25 | } else if (to.path === '/register') { 26 | console.log('欢迎进入注册页面') 27 | } 28 | } 29 | } 30 | 31 | ### computed ### 32 | 33 | 注意事项: 34 | 35 | 1. 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了； 36 | 37 | 2. 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值 38 | 39 | 3. 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值； 40 | 41 | 4. 一旦在data中定义了属性, 就不能在computed中定义同名属性了 会冲突 42 | 43 | 5. computed计算属性默认是只读的 44 | 45 | 使用方法: 46 | 47 | 在data或methods同级的地方加入一个computed属性 48 | 49 | computed: { // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用； 50 | 'fullname': function () { 51 | console.log('ok') 52 | return this.firstname + '-' + this.middlename + '-' + this.lastname 53 | } 54 | } 55 | 56 | 57 | -------------------------------------------------------------------------------- /vueday03/15.组件切换-切换动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 24 | 25 | 26 | 27 |
28 | 登录 29 | 注册 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /vueday06/webpack-demo/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 | // 转译工具 babel 将所有ES6的语法 转换成ES5 为了浏览器兼容性 10 | 11 | import './css/index.css' 12 | import './css/index.less' 13 | import './css/index.scss' 14 | 15 | import 'bootstrap/dist/css/bootstrap.css' 16 | 17 | // 直接引入的vue是runtime的vue文件, 该文件如果要渲染组件, 必须使用render函数 18 | // import Vue from 'vue/dist/vue.js' 19 | import Vue from 'vue' 20 | 21 | // 如果使用render函数结合runtime-only模式的vue文件 22 | // 模板对象必须在外面用 .vue 文件定义好然后倒入进来 23 | // let login = { 24 | // template: '

login组件

' 25 | // } 26 | 27 | import login from './login.vue' 28 | 29 | new Vue({ 30 | el: '#app', 31 | data: { 32 | msg: '素馅熊' 33 | }, 34 | render: c => c(login), 35 | // components: { 36 | // login 37 | // } 38 | }) 39 | 40 | class Person { 41 | static info = { 42 | name: '素馅熊', 43 | age: 18 44 | } 45 | } 46 | 47 | console.log(Person.info) 48 | 49 | 50 | import xxx from './m1.js' 51 | console.log(xxx) 52 | 53 | // 导入的数据 都是只读的, 不可修改 54 | import { name, gender as g } from './m1.js' 55 | // 如果需要修改, 可以在本地先另存一个变量 再修改新的变量 56 | // let n = name 57 | console.log(name, g) 58 | 59 | 60 | $(function () { 61 | $('li:odd').css('backgroundColor', 'blue') 62 | $('li:even').css('backgroundColor', function () { 63 | return '#' + 'baa119' 64 | }) 65 | }) 66 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vueday03/结合第三方类库实现动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 21 | 22 | 23 | 26 | 27 | 28 | 31 |

这是一个H3

32 | 33 |
34 | 35 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 |

{{ fullname }}

21 |

{{ fullname }}

22 |

{{ fullname }}

23 | 24 |
25 | 26 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /vueday03/05.动画-使用第三方类实现动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 21 | 22 | 23 | 26 | 27 | 28 | 32 |

这是一个H3

33 | 34 |
35 | 36 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /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 | {{item.id}} --- {{item.name}} 32 |

33 |
34 | 35 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /vueday01/跑马灯.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 |

{{ msg }}

19 | 20 |
21 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /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 |

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

44 | 45 | 46 |
47 | 48 | 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 | } -------------------------------------------------------------------------------- /vueday04/03.组件-父组件向子组件传值.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vueday03/组件的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 25 | 26 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /vueday03/小球动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 18 | 19 | 20 | 21 |
22 | 23 | 27 |
28 | 29 |
30 | 31 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /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) -------------------------------------------------------------------------------- /vueday03/13.组件切换-方式1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |

爸爸收到的数据是: {{usernameFromLogin}}

16 | 17 | 登录 18 | 注册 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 36 | 37 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /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 |

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

20 |

==================

21 | 22 | 23 | 24 |
{{msg2}}
25 |
26 |
1212112
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | 42 | 43 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /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 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-test", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "TianchengLee ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.5.2", 14 | "vue-router": "^3.0.1" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^7.1.2", 18 | "babel-core": "^6.22.1", 19 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 20 | "babel-loader": "^7.1.1", 21 | "babel-plugin-syntax-jsx": "^6.18.0", 22 | "babel-plugin-transform-runtime": "^6.22.0", 23 | "babel-plugin-transform-vue-jsx": "^3.5.0", 24 | "babel-preset-env": "^1.3.2", 25 | "babel-preset-stage-2": "^6.22.0", 26 | "chalk": "^2.0.1", 27 | "copy-webpack-plugin": "^4.0.1", 28 | "css-loader": "^0.28.0", 29 | "extract-text-webpack-plugin": "^3.0.0", 30 | "file-loader": "^1.1.4", 31 | "friendly-errors-webpack-plugin": "^1.6.1", 32 | "html-webpack-plugin": "^2.30.1", 33 | "node-notifier": "^5.1.2", 34 | "optimize-css-assets-webpack-plugin": "^3.2.0", 35 | "ora": "^1.2.0", 36 | "portfinder": "^1.0.13", 37 | "postcss-import": "^11.0.0", 38 | "postcss-loader": "^2.0.8", 39 | "postcss-url": "^7.2.1", 40 | "rimraf": "^2.6.0", 41 | "semver": "^5.3.0", 42 | "shelljs": "^0.7.6", 43 | "uglifyjs-webpack-plugin": "^1.1.1", 44 | "url-loader": "^0.5.8", 45 | "vue-loader": "^13.3.0", 46 | "vue-style-loader": "^3.0.1", 47 | "vue-template-compiler": "^2.5.2", 48 | "webpack": "^3.6.0", 49 | "webpack-bundle-analyzer": "^2.9.0", 50 | "webpack-dev-server": "^2.9.1", 51 | "webpack-merge": "^4.1.0" 52 | }, 53 | "engines": { 54 | "node": ">= 6.0.0", 55 | "npm": ">= 3.0.0" 56 | }, 57 | "browserslist": [ 58 | "> 1%", 59 | "last 2 versions", 60 | "not ie <= 8" 61 | ] 62 | } 63 | -------------------------------------------------------------------------------- /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 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /promise/app.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | 4 | // 回调地狱 5 | // setTimeout(function() { 6 | // // ... 7 | // setInterval(function() { 8 | // //发送ajax请求 9 | // $.ajax({ 10 | // url: '', 11 | // success: function() { 12 | // setTimeout(function() { 13 | // // xxx 14 | // }, 2000) 15 | // } 16 | // }) 17 | // }, 5000) 18 | // }, 2000) 19 | 20 | // 1. 创建promise对象时, 必须传入一个回调函数, 否则会报错 21 | // 2. 创建promise对象, 立即就会执行传入的回调函数, 如果想按需执行, 需要将promise的创建封装到一个函数中 22 | // 封装的函数 23 | function readFileByPath(fpath) { 24 | return new Promise(function (resolve, reject) { 25 | // 在这里 就可以进行异步任务的执行 26 | // console.log('promise被执行了!') 27 | fs.readFile(path.join(__dirname, fpath), function (err, data) { 28 | // console.log(data.toString()) 29 | // console.log(err) 30 | if (err) return reject(err) 31 | resolve(data.toString()) 32 | }) 33 | }) 34 | // return p 35 | } 36 | 37 | // fetch.js 38 | 39 | // 调用者 40 | // readFileByPath('123.txt').then(function(data) { 41 | // console.log('这是得到的结果:' + data) 42 | // }, function(err) { 43 | // console.log('这是错误信息:' + err.message) 44 | // }) 45 | 46 | // this.$http.get('').then(data=>{}, err=>{}) 47 | 48 | // setTimeout(function () { 49 | // console.log(111) 50 | // }, 0) 51 | 52 | // console.log(222) 53 | 54 | // 1. 学会如何使用promise封装的库 (必须掌握) 55 | // 2. 学会自己封装一个promise的函数 (最好能掌握) 56 | 57 | readFileByPath('1.txt') 58 | .then(data => { 59 | console.log('我是第一个.then', data) 60 | return readFileByPath('2.txt') 61 | }) 62 | .then(data => { 63 | console.log('我是第二个.then', data) 64 | return readFileByPath('3.txt') 65 | }) 66 | .then(data => { 67 | console.log('我是第三个.then', data) 68 | }) 69 | .catch(err => { 70 | console.log(err.message) 71 | }) 72 | .finally(() => { 73 | console.log('不管出不出异常, 最终都会执行的哦!') 74 | }) 75 | 76 | // readFileByPath('2.txt') 77 | // .then(data => { 78 | // console.log(data) 79 | // }) 80 | 81 | // readFileByPath('3.txt') 82 | // .then(data => { 83 | // console.log(data) 84 | // }) -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | // stage : 草案 草稿 26 | // 2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则： 27 | // 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ } 28 | // 2.2 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩： 29 | // 2.2.1 如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢； 30 | // 2.2.2 哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！ 31 | // 3. 在项目的 根目录中，新建一个 叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号 32 | // 3.1 在 .babelrc 写如下的配置： 大家可以把 preset 翻译成 【语法】 的意思 33 | // { 34 | // "presets": ["env", "stage-0"], 35 | // "plugins": ["transform-runtime"] 36 | // } 37 | // 4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法 38 | 39 | 40 | 41 | // Java C# 实现面向对象的方式完全一样了， class 是从后端语言中借鉴过来的， 来实现面向对象 42 | // var p1 = new Person() 43 | 44 | 45 | // function Animal(name){ 46 | // this.name = name 47 | // } 48 | // Animal.info = 123 49 | 50 | // var a1 = new Animal('小花') 51 | 52 | // // 这是静态属性： 53 | // // console.log(Animal.info) 54 | // // 这是实例属性： 55 | // console.log(a1.name) -------------------------------------------------------------------------------- /vueday06/vue-cli-test/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 3000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: true, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /vueday05/webpack-demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | // 热模块替换的插件 HMR 在webpack中内置了 3 | const webpack = require('webpack') 4 | // 引入html-webpack-plugin 5 | const HtmlWebpackPlugin = require('html-webpack-plugin') 6 | 7 | // 在webpack的配置中, 装插件的方式都一样 8 | // 在plugins节点下创建插件对象 {} new Object() [] new Array() /\d/ new RegExp() 9 | module.exports = { 10 | entry: './src/main.js', // entry是指定打包文件的入口, 可以使用相对路径 11 | output: { 12 | path: path.join(__dirname, 'dist'), // output是指输出的目录, 必须是绝对路径 13 | filename: 'bundle.js' 14 | }, 15 | devServer: { 16 | // contentBase: "./src", // 托管的根目录 17 | hot: true, // 我要开启或关闭HMR 18 | open: true, // 自动打开浏览器 19 | port: 3000 // 设置devServer的端口号 20 | }, 21 | plugins: [ 22 | // 装了插件表示当前项目有资格开启HMR 23 | new webpack.HotModuleReplacementPlugin(), 24 | // 安装插件 25 | // 如果不传入任何配置选项, 默认也会创建一个index.html托管在服务器根路径 26 | // 只不过这个HTML是空的, title默认是webpack app 27 | new HtmlWebpackPlugin({ 28 | // title: '传智大法好!!!', // 如果模板中有title, 会覆盖这里的配置 29 | template: './src/index.html' 30 | }) 31 | ], 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.css$/, 36 | // use: [ 37 | // { loader: 'style-loader' }, 38 | // { 39 | // loader: 'css-loader', 40 | // options: { 41 | // modules: true 42 | // } 43 | // } 44 | // ] 45 | // css-loader 用于解析css文件 46 | // style-loader 用于将css代码 使用js动态的插入到html中, 减少二次请求 47 | // use使用loader时 顺序是固定的从右到左的加载 48 | use: ['style-loader', 'css-loader'] 49 | }, 50 | { 51 | test: /\.less$/, 52 | use: ['style-loader', 'css-loader', 'less-loader'] 53 | }, 54 | { 55 | test: /\.scss$/, 56 | use: ['style-loader', 'css-loader', 'sass-loader'] 57 | }, 58 | { 59 | test: /\.(png|jpg|gif|bmp|jpeg)$/, 60 | use: [ 61 | { 62 | loader: 'url-loader', 63 | options: { 64 | limit: 81920 // 字节 Byte 如果在8192个字节(8KB)内 就使用base64编码 65 | } 66 | } 67 | ] 68 | }, 69 | { 70 | test: /\.(eot|svg|ttf|woff|woff2)$/, 71 | use: [ 72 | { 73 | loader: 'url-loader' 74 | } 75 | ] 76 | } 77 | ] 78 | }, 79 | mode: 'development' 80 | } -------------------------------------------------------------------------------- /vueday06/vue-cli-test/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | 12 | 13 | module.exports = { 14 | context: path.resolve(__dirname, '../'), 15 | entry: { 16 | app: './src/main.js' 17 | }, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: '[name].js', 21 | publicPath: process.env.NODE_ENV === 'production' 22 | ? config.build.assetsPublicPath 23 | : config.dev.assetsPublicPath 24 | }, 25 | resolve: { 26 | extensions: ['.js', '.vue', '.json'], 27 | alias: { 28 | '@': resolve('src'), 29 | } 30 | }, 31 | module: { 32 | rules: [ 33 | { 34 | test: /\.vue$/, 35 | loader: 'vue-loader', 36 | options: vueLoaderConfig 37 | }, 38 | { 39 | test: /\.js$/, 40 | loader: 'babel-loader', 41 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 42 | }, 43 | { 44 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 45 | loader: 'url-loader', 46 | options: { 47 | limit: 10000, 48 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 49 | } 50 | }, 51 | { 52 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 53 | loader: 'url-loader', 54 | options: { 55 | limit: 10000, 56 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 57 | } 58 | }, 59 | { 60 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 61 | loader: 'url-loader', 62 | options: { 63 | limit: 10000, 64 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 65 | } 66 | } 67 | ] 68 | }, 69 | node: { 70 | // prevent webpack from injecting useless setImmediate polyfill because Vue 71 | // source contains it (although only uses it if it's native). 72 | setImmediate: false, 73 | // prevent webpack from injecting mocks to Node native modules 74 | // that does not make sense for the client 75 | dgram: 'empty', 76 | fs: 'empty', 77 | net: 'empty', 78 | tls: 'empty', 79 | child_process: 'empty' 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /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 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-demo", 3 | "version": "1.0.0", 4 | "description": "这是一个牛逼的vue项目", 5 | "author": "TianchengLee ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js" 12 | }, 13 | "dependencies": { 14 | "vue": "^2.5.2", 15 | "vue-router": "^3.0.1" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer": "^7.1.2", 19 | "babel-core": "^6.22.1", 20 | "babel-eslint": "^8.2.1", 21 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 22 | "babel-loader": "^7.1.1", 23 | "babel-plugin-syntax-jsx": "^6.18.0", 24 | "babel-plugin-transform-runtime": "^6.22.0", 25 | "babel-plugin-transform-vue-jsx": "^3.5.0", 26 | "babel-preset-env": "^1.3.2", 27 | "babel-preset-stage-2": "^6.22.0", 28 | "chalk": "^2.0.1", 29 | "copy-webpack-plugin": "^4.0.1", 30 | "css-loader": "^0.28.0", 31 | "eslint": "^4.15.0", 32 | "eslint-config-standard": "^10.2.1", 33 | "eslint-friendly-formatter": "^3.0.0", 34 | "eslint-loader": "^1.7.1", 35 | "eslint-plugin-import": "^2.7.0", 36 | "eslint-plugin-node": "^5.2.0", 37 | "eslint-plugin-promise": "^3.4.0", 38 | "eslint-plugin-standard": "^3.0.1", 39 | "eslint-plugin-vue": "^4.0.0", 40 | "extract-text-webpack-plugin": "^3.0.0", 41 | "file-loader": "^1.1.4", 42 | "friendly-errors-webpack-plugin": "^1.6.1", 43 | "html-webpack-plugin": "^2.30.1", 44 | "node-notifier": "^5.1.2", 45 | "optimize-css-assets-webpack-plugin": "^3.2.0", 46 | "ora": "^1.2.0", 47 | "portfinder": "^1.0.13", 48 | "postcss-import": "^11.0.0", 49 | "postcss-loader": "^2.0.8", 50 | "postcss-url": "^7.2.1", 51 | "rimraf": "^2.6.0", 52 | "semver": "^5.3.0", 53 | "shelljs": "^0.7.6", 54 | "uglifyjs-webpack-plugin": "^1.1.1", 55 | "url-loader": "^0.5.8", 56 | "vue-loader": "^13.3.0", 57 | "vue-style-loader": "^3.0.1", 58 | "vue-template-compiler": "^2.5.2", 59 | "webpack": "^3.6.0", 60 | "webpack-bundle-analyzer": "^2.9.0", 61 | "webpack-dev-server": "^2.9.1", 62 | "webpack-merge": "^4.1.0" 63 | }, 64 | "engines": { 65 | "node": ">= 6.0.0", 66 | "npm": ">= 3.0.0" 67 | }, 68 | "browserslist": [ 69 | "> 1%", 70 | "last 2 versions", 71 | "not ie <= 8" 72 | ] 73 | } 74 | -------------------------------------------------------------------------------- /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/vueday08.md: -------------------------------------------------------------------------------- 1 | ## vueday08 ## 2 | 3 | ### babel的配置 ### 4 | 5 | 1. 安装babel的核心包和loader, 和语法预设 6 | 7 | 由于babel7目前使用还有很多问题 8 | 9 | 所以选择使用babel6 10 | 11 | babel-preset-env 核心语法包 12 | 13 | babel-preset-stage-0 ES2015的语法包合集 14 | 15 | npm i babel-loader@7 babel-core babel-preset-env babel-preset-stage-0 -D 16 | 17 | 2. 配置loader 18 | 19 | module: { 20 | rules: [ 21 | { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } 22 | ] 23 | } 24 | 25 | 3. 配置babel 26 | 27 | 在.babelrc中进行配置 28 | 29 | { 30 | "presets": ["env", "stage-0"] 31 | } 32 | 33 | ### vue-loader的配置 ### 34 | 35 | 总结梳理： webpack 中如何使用 vue : 36 | 37 | 1. 安装vue的包： cnpm i vue -S 38 | 2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D 39 | + 配置vue-loader 40 | + 安装VueLoaderPlugin在webpack.config.js文件中 41 | 3. 在 main.js 中，导入 vue 模块 import Vue from 'vue' 42 | 4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style 43 | 5. 使用 import login from './login.vue' 导入这个组件 44 | 6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) }) 45 | 7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域； 46 | 47 | 48 | ### CommonJS模块化规范 ### 49 | 50 | 导入: 51 | 52 | require() 53 | 54 | 导出: 55 | 56 | module.exports = {} 57 | 58 | ### ES6模块化规范 ### 59 | 60 | 1. 导入(可以导入js/css等其他文件): 61 | 62 | 导入js: 63 | 64 | import 变量名 from 包名/路径 65 | 66 | 导入css: 67 | 68 | import 路径 69 | 70 | 2. 导出 71 | 72 | export 73 | 74 | export default {} 75 | 76 | ### vue-cli 脚手架 ### 77 | 78 | 由Vue官方提供的一键生成webpack工程化模板项目 79 | 80 | 目前最新的版本是v3.0, 18年8月份发布的正式版 81 | 82 | 我自己电脑中安装的是v2.9.6 83 | 84 | 1. 全局安装vue-cli 85 | 86 | 注意: vue-cli包最新的版本是v2.9.6, 如果需要安装v3.0以后的版本, 包名更换为了 @vue/cli 自行去官网查阅文档 87 | 88 | npm i vue-cli -g 89 | 90 | 2. 执行vue init初始化创建一个项目 91 | 92 | vue init webpack vue-cli-demo 93 | 94 | 3. 配置项目 95 | 96 | ? Project name vue-cli-demo 97 | ? Project description 这是一个牛逼的vue项目 98 | ? Author TianchengLee 99 | ? Vue build runtime 100 | ? Install vue-router? Yes 101 | ? Use ESLint to lint your code? No 102 | ? Pick an ESLint preset Standard 103 | ? Set up unit tests No 104 | ? Setup e2e tests with Nightwatch? No 105 | ? Should we run `npm install` for you after the project has been created? (recommended) npm 106 | 107 | 4. 当配置好后立即会开始使用npm装包 108 | 109 | 由于速度较慢, 建议 ctrl + c 停止 110 | 111 | 重新使用yarn或cnpm等工具进行安装会更快 112 | 113 | cd vue-cli-demo 114 | cnpm i 115 | 116 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 85 | 86 | 96 | 97 | 98 | 114 | -------------------------------------------------------------------------------- /vueday04/路由的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 34 | 35 | 36 | 37 |
38 | 39 | 41 | 42 | 登录 43 | 注册 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 58 |
59 | 60 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | assetsRoot: path.resolve(__dirname, '../dist'), 52 | assetsSubDirectory: 'static', 53 | assetsPublicPath: '/', 54 | 55 | /** 56 | * Source Maps 57 | */ 58 | 59 | productionSourceMap: true, 60 | // https://webpack.js.org/configuration/devtool/#production 61 | devtool: '#source-map', 62 | 63 | // Gzip off by default as many popular static hosts such as 64 | // Surge or Netlify already gzip all static assets for you. 65 | // Before setting to `true`, make sure to: 66 | // npm install --save-dev compression-webpack-plugin 67 | productionGzip: false, 68 | productionGzipExtensions: ['js', 'css'], 69 | 70 | // Run the build command with an extra argument to 71 | // View the bundle analyzer report after build finishes: 72 | // `npm run build --report` 73 | // Set to `true` or `false` to always turn it on or off 74 | bundleAnalyzerReport: process.env.npm_config_report 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /vueday03/列表动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 42 | 43 | 44 | 45 |
46 | 47 |
48 | 52 | 53 | 57 | 58 | 59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
  • 68 | {{item.id}} --- {{item.name}} 69 |
    • 70 |     71 | 72 | 73 |
    74 | 75 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /vueday06/webpack-demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | // 热模块替换的插件 HMR 在webpack中内置了 3 | const webpack = require('webpack') 4 | // 引入html-webpack-plugin 5 | const HtmlWebpackPlugin = require('html-webpack-plugin') 6 | 7 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 8 | 9 | // 在webpack的配置中, 装插件的方式都一样 10 | // 在plugins节点下创建插件对象 {} new Object() [] new Array() /\d/ new RegExp() 11 | module.exports = { 12 | entry: './src/main.js', // entry是指定打包文件的入口, 可以使用相对路径 13 | output: { 14 | path: path.join(__dirname, 'dist'), // output是指输出的目录, 必须是绝对路径 15 | filename: 'bundle.js' 16 | }, 17 | devServer: { 18 | // contentBase: "./src", // 托管的根目录 19 | hot: true, // 我要开启或关闭HMR 20 | open: true, // 自动打开浏览器 21 | port: 3000 // 设置devServer的端口号 22 | }, 23 | plugins: [ 24 | // 装了插件表示当前项目有资格开启HMR 25 | new webpack.HotModuleReplacementPlugin(), 26 | // 安装插件 27 | // 如果不传入任何配置选项, 默认也会创建一个index.html托管在服务器根路径 28 | // 只不过这个HTML是空的, title默认是webpack app 29 | new HtmlWebpackPlugin({ 30 | // title: '传智大法好!!!', // 如果模板中有title, 会覆盖这里的配置 31 | template: './src/index.html' 32 | }), 33 | new VueLoaderPlugin() 34 | ], 35 | module: { 36 | rules: [ 37 | { 38 | test: /\.css$/, 39 | // use: [ 40 | // { loader: 'style-loader' }, 41 | // { 42 | // loader: 'css-loader', 43 | // options: { 44 | // modules: true 45 | // } 46 | // } 47 | // ] 48 | // css-loader 用于解析css文件 49 | // style-loader 用于将css代码 使用js动态的插入到html中, 减少二次请求 50 | // use使用loader时 顺序是固定的从右到左的加载 51 | use: ['style-loader', 'css-loader'] 52 | }, 53 | { 54 | test: /\.less$/, 55 | use: ['style-loader', 'css-loader', 'less-loader'] 56 | }, 57 | { 58 | test: /\.scss$/, 59 | use: ['style-loader', 'css-loader', 'sass-loader'] 60 | }, 61 | { 62 | test: /\.(png|jpg|gif|bmp|jpeg)$/, 63 | use: [ 64 | { 65 | loader: 'url-loader', 66 | options: { 67 | limit: 81920 // 字节 Byte 如果在8192个字节(8KB)内 就使用base64编码 68 | } 69 | } 70 | ] 71 | }, 72 | { 73 | test: /\.(eot|svg|ttf|woff|woff2)$/, 74 | use: [ 75 | { 76 | loader: 'url-loader' 77 | } 78 | ] 79 | }, 80 | { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, 81 | { test: /\.vue$/, loader: "vue-loader" }, 82 | ] 83 | }, 84 | // resolve: { 85 | // alias: { 86 | // vue$: 'vue/dist/vue.js' 87 | // } 88 | // }, 89 | mode: 'development' 90 | } -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js' 26 | }, 27 | output: { 28 | path: config.build.assetsRoot, 29 | filename: '[name].js', 30 | publicPath: process.env.NODE_ENV === 'production' 31 | ? config.build.assetsPublicPath 32 | : config.dev.assetsPublicPath 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.vue', '.json'], 36 | alias: { 37 | '@': resolve('src'), 38 | } 39 | }, 40 | module: { 41 | rules: [ 42 | // ...(config.dev.useEslint ? [createLintingRule()] : []), 43 | { 44 | test: /\.vue$/, 45 | loader: 'vue-loader', 46 | options: vueLoaderConfig 47 | }, 48 | { 49 | test: /\.js$/, 50 | loader: 'babel-loader', 51 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 52 | }, 53 | { 54 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 55 | loader: 'url-loader', 56 | options: { 57 | limit: 10000, 58 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 59 | } 60 | }, 61 | { 62 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 63 | loader: 'url-loader', 64 | options: { 65 | limit: 10000, 66 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 67 | } 68 | }, 69 | { 70 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 71 | loader: 'url-loader', 72 | options: { 73 | limit: 10000, 74 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 75 | } 76 | } 77 | ] 78 | }, 79 | node: { 80 | // prevent webpack from injecting useless setImmediate polyfill because Vue 81 | // source contains it (although only uses it if it's native). 82 | setImmediate: false, 83 | // prevent webpack from injecting mocks to Node native modules 84 | // that does not make sense for the client 85 | dgram: 'empty', 86 | fs: 'empty', 87 | net: 'empty', 88 | tls: 'empty', 89 | child_process: 'empty' 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /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 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /notes/vueday03.md: -------------------------------------------------------------------------------- 1 | ## vue day03 ## 2 | 3 | ### 私有过滤器 ### 4 | 5 | 不同于全局过滤器, 私有过滤器只能在当前vm实例内部使用, 定义方式也是在当前vm实例的配置对象中加入一个filters的节点, 与methods和data等节点同级: 6 | 7 | filters: { 8 | // 方法名就是过滤器名 9 | // 方法就是过滤器 10 | // 就近原则 如果当前vm实例的私有过滤器和全局过滤器同名了 就会优先使用私有过滤器 11 | msgFormat() { 12 | 13 | } 14 | } 15 | 16 | ### 按键修饰符 ### 17 | 18 | 当用户输入完数据后, 每次都需要点击添加按钮才可以将数据录入表中, 用户体验不佳, 最好能够当用户输入完数据后, 直接按回车立即录入表中 19 | 20 | Vue提供了按键修饰符来解决这个问题: 21 | 22 | 23 | 24 | `@keyup.enter` 的意思是给input绑定键盘抬起事件, 并且只有在`回车键`抬起时才会触发 25 | 26 | 也就是当用户抬起回车时就会调用add方法 进行添加的逻辑操作 27 | 28 | 所有**键盘事件**都有按键修饰符, 本质上其实是点的keyCode, 只不过Vue为了方便大家记忆, 内置了一些别名: 29 | 30 | .enter 31 | .tab 32 | .delete (捕获“删除”和“退格”键) 33 | .esc 34 | .space 35 | .up 36 | .down 37 | .left 38 | .right 39 | 40 | 如果需要自定义别名, 可以使用全局的`config.keyCodes`对象来添加: 41 | 42 | // 可以使用 `v-on:keyup.f1` 43 | Vue.config.keyCodes.f1 = 112 44 | 45 | ### 自定义指令 (了解内容) ### 46 | 47 | 在Vue内部提供了很多内置指令: v-text, v-html, v-if, v-show, v-model ... 等等, 一切以v-开头的都是指令 48 | 49 | 除了内部提供的这些指令外, 开发者还可以自定义指令 50 | 51 | 因为Vue的作者考虑到, 有些情况还是需要操作DOM元素的, 通过指令可以对一些DOM元素操作进行封装 52 | 53 | 1. 定义全局指令 54 | 55 | // 定义全局指令 56 | // 参数1: 指令名称, 不需要 v- 57 | // 参数2: 对象, 对象中有可以有5个函数 bind, inserted, update, componentUpdated, unbind 58 | // 5个函数就是所谓的钩子函数, 就是当指令应用到标签身上整个过程, 每个阶段所调用的函数 59 | Vue.directive('focus', { 60 | // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 61 | bind(el) { 62 | // console.log(el) 63 | // console.log('我被绑定了') 64 | // el.focus() 65 | }, 66 | // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 67 | inserted(el) { 68 | console.log(el) 69 | // console.log('我insert到父节点了') 70 | el.focus() 71 | }, 72 | // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前 73 | update() {} 74 | }) 75 | 76 | 2. 使用指令 77 | 78 | 79 | 80 | **注意: 定义指令时不需要加 `v-` 使用指令时必须要加 `v-`** 81 | 82 | 83 | ### 定义私有指令 ### 84 | 85 | 同私有过滤器, 在vm配置对象中, 和methods以及data同级的位置, 加入一个`directives`的属性: 86 | 87 | 88 | directives: { 89 | focus: { 90 | bind() { 91 | 92 | }, 93 | inserted() { 94 | 95 | } 96 | } 97 | } 98 | 99 | ### 生命周期函数 ### 100 | 101 | 生命周期函数是指, Vue实例创建的过程中, 从出生到死亡每个阶段所执行的函数 102 | 103 | 一共有8个: 104 | 105 | beforeCreate: 实例完全创建之前, 此时data和methods等数据都没有初始化, 不能使用 106 | 107 | created: 实例已经创建完毕了, 此时data和methods等数据都可以使用了, 实例对象也可以访问 108 | 109 | beforeMount: 模板在内存中编译完成了, 但是还未渲染到页面上 110 | 111 | mounted: 编译好的模板完全渲染到页面, 用户最终看到的样子, 此时DOM元素也是最新的, 如果想操作DOM元素, 最好在这个生命周期函数中进行 112 | 113 | beforeUpdate: 当data中数据改变时会触发, 此时页面上的数据并没有重新渲染, 只是data中的数据更新了 114 | 115 | updated: 当data中数据改变后, 并将页面上的数据也更新完成后会触发, 此时data中的数据和页面上的数据是同步的 116 | 117 | beforeDestroy: 当实例进入销毁阶段时执行的钩子函数, 此时Vue实例中的data/methods/filters/directives等都还可以使用 118 | 119 | destroyed: 实例上的所有成员已经完全销毁, 无法使用了 120 | 121 | 122 | ### 域名更新 ### 123 | 124 | 课程中所有接口的域名都替换为: `vue.lovegf.cn:8899` 125 | 126 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /vueday06/vue-cli-test/build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /vueday06/vue-cli-demo/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | --------------------------------------------------------------------------------