├── CSS ├── CSS.md ├── Shopping │ ├── css │ │ ├── base.css │ │ ├── common.css │ │ └── index.css │ ├── favicon.ico │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ └── icomoon.woff │ ├── images │ │ ├── error.png │ │ ├── icons.png │ │ ├── logo.png │ │ ├── recom.png │ │ ├── sk.png │ │ ├── success.png │ │ └── wx_cz.jpg │ ├── index.html │ ├── upload │ │ ├── bargain.png │ │ ├── bg_03.png │ │ ├── floor-1-1.png │ │ ├── floor-1-2.png │ │ ├── floor-1-3.png │ │ ├── floor-1-4.png │ │ ├── floor-1-5.png │ │ ├── floor-1-6.png │ │ ├── floor-1-b01.png │ │ ├── focus1.png │ │ ├── list.jpg │ │ └── recom_03.jpg │ └── 品优购项目搭建.md └── 品优购代码规范.md ├── DataStructure └── 数据结构.md ├── Docker ├── Docker.md ├── Keycloak.md ├── images │ ├── QQ截图20200612193602.jpg │ ├── image-20200612163401160.png │ ├── image-20200612163621219.png │ └── image-20200612164518264.png └── 环境搭建.md ├── HTML └── HTML.md ├── JVM └── JVM.md ├── Mongo ├── Mongo.md └── spring-boot-mongo.md ├── MultiThread ├── JUC.md └── 并发编程理论.md ├── MyBatisPlus ├── CodeGenerator.java └── MyBatisPlus.md ├── MySQL ├── MySQL.md └── MySQL_Details.md ├── Netty ├── Netty.md └── netty-demo │ ├── .gitignore │ ├── pom.xml │ └── src │ └── main │ └── java │ └── com │ └── netty │ └── demo │ └── nio │ ├── ByteBufferGetPutDemo.java │ ├── MappedByteBufferDemo.java │ ├── ReadonlyBuffer.java │ ├── channels │ └── FileChannelDemo.java │ └── chat │ ├── GroupChatApplication.java │ └── GroupChatServer.java ├── Network └── Network.md ├── Node └── NodeJS.md ├── README.md ├── RabbitMQ ├── RabbitMQ.md └── image │ ├── 2.3-1-AMQP协议模型.jpg │ ├── 2.5-1-RabbitMQ的整体架构图.jpg │ ├── 2.6-1-RabbitMQ消息流转图.jpg │ ├── 3.1.2-1-消息落库.jpg │ └── 3.1.2-2-消息的回调检查.jpg ├── Redis └── Redis.md ├── Spring ├── Spring.md ├── Spring5.md └── SpringMVC源码.md ├── SpringBoot-2020 ├── 001-spring-boot.md ├── OAuth2系列.pdf ├── utils │ ├── LoginFailureHandler.java │ ├── LoginSuccessHandler.java │ ├── LogoutAppSuccessHandler.java │ ├── RecursionEntity.java │ ├── RecursionList.java │ ├── RequestFailureHandler.java │ ├── ResponseBean.java │ └── SecurityConfig.java └── 递归封装N级菜单 │ ├── RecursionEntity.java │ └── RecursionList.java ├── SpringBoot ├── SpringBoot.md └── SpringBoot源码.md ├── SpringCloudAlibaba └── SpringCloudAlibaba.md ├── Swagger ├── Swagger.md └── Swagger.pdf ├── Vue ├── IMPORTANT.md ├── Vue.md ├── Vue踩坑记录.md ├── axios.md ├── element-ui踩坑记录.md ├── vue-2021 │ ├── vue2 │ │ ├── 01-MVVM模型 │ │ │ └── index.html │ │ ├── 02-数据代理 │ │ │ ├── 1-Object.defineProperty.html │ │ │ ├── 2-何为数据代理.html │ │ │ └── 3-vue中的数据代理.html │ │ ├── 03-Vue中的this │ │ │ └── index.html │ │ ├── 04-事件处理 │ │ │ ├── 1-事件的基本使用.html │ │ │ └── 2-事件修饰符.html │ │ ├── 05-计算属性 │ │ │ └── 1-姓名案例-使用计算属性.html │ │ ├── 06-监视属性 │ │ │ ├── 1-天气案例.html │ │ │ └── 2-深度监视.html │ │ ├── 07-绑定样式 │ │ │ ├── 1-绑定样式.html │ │ │ └── style.css │ │ ├── 08-条件渲染 │ │ │ ├── 1-template标签不会破坏HTML结构.html │ │ │ └── 2-vIf中添加key.html │ │ ├── 09-列表渲染 │ │ │ ├── 1-基本列表.html │ │ │ ├── 2-key的原理.html │ │ │ ├── 3-列表过滤.html │ │ │ └── 4-列表排序.html │ │ ├── 10-更新时的问题 │ │ │ ├── 1-index.html │ │ │ ├── 2-模拟vm的数据监测.html │ │ │ ├── 3-Vue.set的使用.html │ │ │ └── 4-数组更新检测.html │ │ ├── 11-收集表单数据 │ │ │ ├── index.html │ │ │ └── style.css │ │ ├── 12-过滤器 │ │ │ ├── index.html │ │ │ └── style.css │ │ ├── 13-内置指令 │ │ │ ├── 1. v-text指定.html │ │ │ ├── 2.v-html指令.html │ │ │ ├── 3. v-cloak.html │ │ │ ├── 4. v-once指令.html │ │ │ └── 5. 自定义指令.html │ │ ├── 14-生命周期 │ │ │ ├── 1. 引出生命周期.html │ │ │ ├── 2. 分析生命周期.html │ │ │ ├── 3. 总结生命周期.html │ │ │ └── 生命周期.png │ │ ├── 15-组件基础 │ │ │ ├── 1.组件基本使用.html │ │ │ ├── 2. 组件的嵌套.html │ │ │ ├── 3. VueComponent.html │ │ │ ├── 4-一个重要的内置关系.html │ │ │ └── 扩展-js原型.html │ │ ├── 16-单文件组件 │ │ │ ├── App.vue │ │ │ ├── School.vue │ │ │ ├── index.html │ │ │ └── main.js │ │ ├── READEME.md │ │ └── js │ │ │ ├── dayjs.min.js │ │ │ ├── vue.js │ │ │ └── vue.min.js │ ├── vue_sass │ │ ├── .editorconfig │ │ ├── .eslintignore │ │ ├── .eslintrc.js │ │ ├── .gitignore │ │ ├── .prettierignore │ │ ├── .prettierrc.js │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── jsconfig.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ └── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ └── logo.png │ │ │ ├── components │ │ │ ├── CSSExtensions │ │ │ │ ├── NestedProperties.vue │ │ │ │ ├── NestedRules.vue │ │ │ │ └── ReferencingParentSelectors.vue │ │ │ ├── RulesAndDirectives │ │ │ │ └── AtExtend.vue │ │ │ └── SassScript │ │ │ │ ├── DataTypes.vue │ │ │ │ ├── Operations.vue │ │ │ │ └── Variables.vue │ │ │ ├── main.js │ │ │ ├── router │ │ │ └── index.js │ │ │ ├── style │ │ │ └── index.scss │ │ │ └── views │ │ │ ├── CSSExtensions.vue │ │ │ ├── Dashboard.vue │ │ │ ├── RulesAndDirectives.vue │ │ │ └── SassScript.vue │ └── vue_test │ │ ├── .env.development │ │ ├── .env.staging │ │ ├── .gitignore │ │ ├── 01_src_分析CLI │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── HelloWorld.vue │ │ │ └── School.vue │ │ └── main.js │ │ ├── 02_src_ref属性 │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── School.vue │ │ └── main.js │ │ ├── 03_src_props配置 │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── Student.vue │ │ └── main.js │ │ ├── 04_src_mixin混入 │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── School.vue │ │ │ └── Student.vue │ │ ├── main.js │ │ └── mixin.js │ │ ├── 05_src_插件 │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── School.vue │ │ │ └── Student.vue │ │ ├── main.js │ │ └── plugins.js │ │ ├── 06_src_scoped样式 │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── School.vue │ │ │ └── Student.vue │ │ └── main.js │ │ ├── 07_src_todoList案例 │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── TodoList.vue │ │ │ ├── TodoListFooter.vue │ │ │ ├── TodoListHeader.vue │ │ │ └── TodoListItem.vue │ │ └── main.js │ │ ├── 08_浏览器本地存储 │ │ ├── LocalStorage.html │ │ └── SessionStorage.html │ │ ├── 09_src_todoList_浏览器本地存储 │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── TodoList.vue │ │ │ ├── TodoListFooter.vue │ │ │ ├── TodoListHeader.vue │ │ │ └── TodoListItem.vue │ │ └── main.js │ │ ├── 10_src_自定义事件 │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── School.vue │ │ │ └── Student.vue │ │ └── main.js │ │ ├── 11_src_$attrs的使用 │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── School.vue │ │ │ └── Student.vue │ │ └── main.js │ │ ├── 12_src_todoList自定义事件 │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── TodoList.vue │ │ │ ├── TodoListFooter.vue │ │ │ ├── TodoListHeader.vue │ │ │ └── TodoListItem.vue │ │ └── main.js │ │ ├── 13_src_全局事件总线 │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── School.vue │ │ │ └── Student.vue │ │ └── main.js │ │ ├── 14_src_todoList全局事件总线 │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── TodoList.vue │ │ │ ├── TodoListFooter.vue │ │ │ ├── TodoListHeader.vue │ │ │ └── TodoListItem.vue │ │ └── main.js │ │ ├── 15_src_消息订阅与发布 │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── School.vue │ │ │ └── Student.vue │ │ └── main.js │ │ ├── 16_src_todoList添加编辑功能 │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── TodoList.vue │ │ │ ├── TodoListFooter.vue │ │ │ ├── TodoListHeader.vue │ │ │ └── TodoListItem.vue │ │ └── main.js │ │ ├── 17_src_vuecli配置代理请求跨域 │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── http.js │ │ └── main.js │ │ ├── 18_github列表展示案例_未完成 │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── UserSearch.vue │ │ │ ├── UserSearchHeader.vue │ │ │ └── UserSearchList.vue │ │ ├── main.js │ │ └── network │ │ │ └── index.js │ │ ├── 19_src_插槽 │ │ ├── 1_src_不使用插槽 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── Category.vue │ │ │ └── main.js │ │ ├── 2_src_默认插槽 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ ├── food.jpg │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── Category.vue │ │ │ └── main.js │ │ ├── 3_src_具名插槽 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ ├── food.jpg │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── Category.vue │ │ │ └── main.js │ │ └── 4_src_作用域插槽 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ ├── food.jpg │ │ │ └── logo.png │ │ │ ├── components │ │ │ └── Category.vue │ │ │ └── main.js │ │ ├── 20_vuex │ │ ├── 1_src_求和案例_纯vue版本 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── Count.vue │ │ │ └── main.js │ │ ├── 2_src_求和案例_vuex版本 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── Count.vue │ │ │ ├── main.js │ │ │ └── store │ │ │ │ └── index.js │ │ ├── 3_src_多组件共享数据 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ ├── Count.vue │ │ │ │ └── Person.vue │ │ │ ├── main.js │ │ │ └── store │ │ │ │ └── index.js │ │ └── 4_src_命名空间_多模块_数据共享 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ └── logo.png │ │ │ ├── components │ │ │ ├── Count.vue │ │ │ └── Person.vue │ │ │ ├── main.js │ │ │ └── store │ │ │ ├── index.js │ │ │ └── modules │ │ │ ├── count.js │ │ │ └── person.js │ │ ├── 21_vue_router │ │ ├── 1_src_vuerouter基本使用 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ ├── Banner.vue │ │ │ │ └── BaseContent.vue │ │ │ ├── main.js │ │ │ ├── pages │ │ │ │ ├── About.vue │ │ │ │ └── Home.vue │ │ │ └── router │ │ │ │ └── index.js │ │ ├── 2_src_嵌套路由_命名路由_params和query的使用 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ ├── Banner.vue │ │ │ │ └── BaseContent.vue │ │ │ ├── main.js │ │ │ ├── pages │ │ │ │ ├── About.vue │ │ │ │ ├── Home.vue │ │ │ │ ├── Message.vue │ │ │ │ ├── MessageDetails.vue │ │ │ │ └── News.vue │ │ │ └── router │ │ │ │ └── index.js │ │ ├── 3_src_路由传参_props属性 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ ├── Banner.vue │ │ │ │ └── BaseContent.vue │ │ │ ├── main.js │ │ │ ├── pages │ │ │ │ ├── About.vue │ │ │ │ ├── Home.vue │ │ │ │ ├── Message.vue │ │ │ │ ├── MessageDetails.vue │ │ │ │ └── News.vue │ │ │ └── router │ │ │ │ └── index.js │ │ ├── 4_src_组件激活和失活的生命周期函数 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ ├── Banner.vue │ │ │ │ └── BaseContent.vue │ │ │ ├── main.js │ │ │ ├── pages │ │ │ │ ├── About.vue │ │ │ │ ├── Home.vue │ │ │ │ ├── Message.vue │ │ │ │ ├── MessageDetails.vue │ │ │ │ └── News.vue │ │ │ └── router │ │ │ │ └── index.js │ │ └── 5_src_全局导航守卫和组件内导航守卫 │ │ │ ├── App.vue │ │ │ ├── README.md │ │ │ ├── assets │ │ │ └── logo.png │ │ │ ├── components │ │ │ ├── Banner.vue │ │ │ └── BaseContent.vue │ │ │ ├── main.js │ │ │ ├── pages │ │ │ ├── About.vue │ │ │ ├── Home.vue │ │ │ ├── Message.vue │ │ │ ├── MessageDetails.vue │ │ │ └── News.vue │ │ │ └── router │ │ │ ├── index.js │ │ │ ├── navigation-guards.js │ │ │ ├── router.js │ │ │ └── routes.js │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── App.vue │ │ ├── README.md │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── Banner.vue │ │ │ └── BaseContent.vue │ │ ├── main.js │ │ ├── pages │ │ │ ├── About.vue │ │ │ ├── Home.vue │ │ │ ├── Message.vue │ │ │ ├── MessageDetails.vue │ │ │ └── News.vue │ │ └── router │ │ │ ├── index.js │ │ │ ├── navigation-guards.js │ │ │ ├── router.js │ │ │ └── routes.js │ │ └── vue.config.js └── 项目开发.md ├── WEB └── 前端基础.md ├── elasticsearch └── elasticsearch.md ├── python └── python基础.md └── 考研资料 ├── C语言基础.md ├── C语言算法笔记.md ├── 操作系统.md ├── 操作系统笔记.md ├── 数据结构和算法.md ├── 数据结构算法.md ├── 考研数据结构842基础课笔记(4).md ├── 考研数据结构842基础课笔记(5-6).md ├── 考研数据结构842基础课笔记(7).md └── 计算机考研基础编程题.md /CSS/Shopping/css/base.css: -------------------------------------------------------------------------------- 1 | /* 把我们所有标签的内外边距清零 */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | 6 | /* CSS3 盒子模型 */ 7 | box-sizing: border-box; 8 | } 9 | 10 | /* em 和 i 斜体的文字不倾斜 */ 11 | em, 12 | i { 13 | font-style: normal 14 | } 15 | 16 | /* 去掉li 的小圆点 */ 17 | li { 18 | list-style: none 19 | } 20 | 21 | img { 22 | /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ 23 | border: 0; 24 | /* 取消图片底侧有空白缝隙的问题 */ 25 | vertical-align: middle 26 | } 27 | 28 | button { 29 | /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */ 30 | cursor: pointer 31 | } 32 | 33 | a { 34 | color: #666; 35 | text-decoration: none 36 | } 37 | 38 | a:hover { 39 | color: #c81623 40 | } 41 | 42 | button, 43 | input { 44 | /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ 45 | font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; 46 | border: 0; 47 | outline: none; 48 | } 49 | 50 | body { 51 | /* CSS3 抗锯齿形 让文字显示的更加清晰 */ 52 | -webkit-font-smoothing: antialiased; 53 | background-color: #fff; 54 | font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; 55 | color: #666; 56 | 57 | height: 3000px; 58 | } 59 | 60 | .hide, 61 | .none { 62 | display: none 63 | } 64 | 65 | /* 清除浮动 */ 66 | .clearfix:after { 67 | visibility: hidden; 68 | clear: both; 69 | display: block; 70 | content: "."; 71 | height: 0 72 | } 73 | 74 | .clearfix { 75 | *zoom: 1 76 | } -------------------------------------------------------------------------------- /CSS/Shopping/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/favicon.ico -------------------------------------------------------------------------------- /CSS/Shopping/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/fonts/icomoon.eot -------------------------------------------------------------------------------- /CSS/Shopping/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/fonts/icomoon.ttf -------------------------------------------------------------------------------- /CSS/Shopping/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/fonts/icomoon.woff -------------------------------------------------------------------------------- /CSS/Shopping/images/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/images/error.png -------------------------------------------------------------------------------- /CSS/Shopping/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/images/icons.png -------------------------------------------------------------------------------- /CSS/Shopping/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/images/logo.png -------------------------------------------------------------------------------- /CSS/Shopping/images/recom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/images/recom.png -------------------------------------------------------------------------------- /CSS/Shopping/images/sk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/images/sk.png -------------------------------------------------------------------------------- /CSS/Shopping/images/success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/images/success.png -------------------------------------------------------------------------------- /CSS/Shopping/images/wx_cz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/images/wx_cz.jpg -------------------------------------------------------------------------------- /CSS/Shopping/upload/bargain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/bargain.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/bg_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/bg_03.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/floor-1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/floor-1-1.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/floor-1-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/floor-1-2.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/floor-1-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/floor-1-3.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/floor-1-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/floor-1-4.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/floor-1-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/floor-1-5.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/floor-1-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/floor-1-6.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/floor-1-b01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/floor-1-b01.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/focus1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/focus1.png -------------------------------------------------------------------------------- /CSS/Shopping/upload/list.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/list.jpg -------------------------------------------------------------------------------- /CSS/Shopping/upload/recom_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/CSS/Shopping/upload/recom_03.jpg -------------------------------------------------------------------------------- /Docker/images/QQ截图20200612193602.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Docker/images/QQ截图20200612193602.jpg -------------------------------------------------------------------------------- /Docker/images/image-20200612163401160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Docker/images/image-20200612163401160.png -------------------------------------------------------------------------------- /Docker/images/image-20200612163621219.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Docker/images/image-20200612163621219.png -------------------------------------------------------------------------------- /Docker/images/image-20200612164518264.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Docker/images/image-20200612164518264.png -------------------------------------------------------------------------------- /MultiThread/并发编程理论.md: -------------------------------------------------------------------------------- 1 | # 一、Java并发基础 2 | 3 | ## 1. 理论基础 4 | 5 | **1、多线程的出现是要解决什么问题的**？ 6 | 7 | **（1）发挥多核CPU的优势**。 8 | 9 | **单核CPU上所谓的”多线程”那是假的多线程，同一时间处理器只会处理一段逻辑，只不过线程之间切换得比较快，看着像多个线程”同时”运行罢了**。多核CPU上的多线程才是真正的多线程，它能让你的多段逻辑同时工作，多线程，可以真正发挥出多核CPU的优势来，达到充分利用CPU的目的。 10 | 11 | **（2）防止阻塞**。 12 | 13 | 从程序运行效率的角度来看，单核CPU不但不会发挥出多线程的优势，反而会因为在单核CPU上运行多线程导致线程上下文的切换，而降低程序整体的效率。但是单核CPU我们还是要应用多线程，就是为了防止阻塞。试想，如果单核CPU使用单线程，那么只要这个线程阻塞了，比方说远程读取某个数据吧，对端迟迟未返回又没有设置超时时间，那么你的整个程序在数据返回回来之前就停止运行了。多线程可以防止这个问题，多条线程同时运行，哪怕一条线程的代码执行读取数据阻塞，也不会影响其它任务的执行。 14 | 15 | 16 | 17 | **2、线程不安全是指什么？举例说明**。 18 | 19 | **线程安全：如果你的代码在多线程下执行和在单线程下执行永远都能获得一样的结果，那么你的代码就是线程安全的**。线程不安全则正好相反。 20 | 21 | 举例：多个线程访问同一个资源，没有对改资源的访问进行并发控制，就会发生线程安全问题。 -------------------------------------------------------------------------------- /MySQL/MySQL_Details.md: -------------------------------------------------------------------------------- 1 | 脏读：指读取到其他事物正在处理的未提交数据。 2 | 3 | 不可重复读：指并发更新时，另一个事务前后查询相同数据时的数据不符合预期。 4 | 5 | 幻读：指并发新增、删除这种会产生数量变化的操作时，另一个事务前后查询相同数据时不符合预期。 6 | 7 | **MySQL 默认隔离级别 RR，MySQL 5.1 以后默认存储引擎就是 InnoDB，因此 MySQL 默认 RR 也能解决幻读问题**。 8 | 9 | | 隔离级别 | 脏读可能性 | 不可重复读可能性 | 幻读可能性 | 加锁读 | 10 | | ---------------- | ---------- | ---------------- | ---------------- | ------ | 11 | | READ UNCOMMITTED | 是 | 是 | 是 | 否 | 12 | | READ COMMITTED | 否 | 是 | 是 | 否 | 13 | | REPEATABLE READ | 否 | 否 | 是（InnoDB除外） | 否 | 14 | | SERIALIZATION | 否 | 否 | 否 | 是 | 15 | 16 | 在 MySQL InnoDB 存储引擎下RC、RR基于 MVCC （多版本并发控制）进行并发事务控制。MVCC 是基于 “数据版本” 对并发事务的访问。 -------------------------------------------------------------------------------- /Netty/netty-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | .idea/ 3 | *.iml 4 | target/ 5 | *.txt 6 | -------------------------------------------------------------------------------- /Netty/netty-demo/pom.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 4.0.0 6 | 7 | com.netty.demo 8 | netty-demo 9 | 1.0-SNAPSHOT 10 | 11 | netty框架学习 12 | 13 | -------------------------------------------------------------------------------- /Netty/netty-demo/src/main/java/com/netty/demo/nio/ByteBufferGetPutDemo.java: -------------------------------------------------------------------------------- 1 | package com.netty.demo.nio; 2 | 3 | 4 | import java.nio.BufferUnderflowException; 5 | import java.nio.ByteBuffer; 6 | 7 | /** 8 | * {@link ByteBuffer} 示例 9 | *

10 | * put到 {@link ByteBuffer} 中是什么类型, get 时也要取出对应的类型, 11 | * 否则会抛出 {@link BufferUnderflowException} 12 | * 13 | * @author yang 14 | * @date 2021-11-17 14:46 15 | */ 16 | public class ByteBufferGetPutDemo { 17 | 18 | public static void main(String[] args) { 19 | ByteBuffer bf = ByteBuffer.allocate(1024); 20 | 21 | bf.putInt(100); 22 | bf.putLong(99); 23 | bf.putChar('a'); 24 | bf.putShort(Short.parseShort("66")); 25 | 26 | bf.flip(); 27 | 28 | System.out.println(bf.getInt()); 29 | System.out.println(bf.getLong()); 30 | System.out.println(bf.getChar()); 31 | System.out.println(bf.getInt()); 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /Netty/netty-demo/src/main/java/com/netty/demo/nio/MappedByteBufferDemo.java: -------------------------------------------------------------------------------- 1 | package com.netty.demo.nio; 2 | 3 | import java.io.IOException; 4 | import java.io.RandomAccessFile; 5 | import java.nio.MappedByteBuffer; 6 | import java.nio.channels.FileChannel; 7 | 8 | /** 9 | * {@link MappedByteBuffer} 示例 10 | *

11 | * 可以让文件直接在内存(堆外内存)修改, 操作系统不需要再拷贝一次 12 | * 13 | * @author yang 14 | * @date 2021-11-17 15:13 15 | */ 16 | public class MappedByteBufferDemo { 17 | 18 | public static void main(String[] args) throws IOException { 19 | 20 | // 所谓动态读取是指从文件的任意位置开始访问文件，而不是必须从文件开始位置读取到文件末尾。 21 | RandomAccessFile raf = new RandomAccessFile("file01.txt", "rw"); 22 | FileChannel channel = raf.getChannel(); 23 | 24 | /* 25 | * mode: FileChannel.MapMode.READ_WRITE 使用的模式 26 | * position: 可以直接修改内存的起始位置 27 | * size：映射到内存的大小。即, 将 "file01.txt" 的多个字节映射到内存; 可以直接修改的范围是[0, 5) 28 | */ 29 | MappedByteBuffer mbf = channel.map(FileChannel.MapMode.READ_WRITE, 0, 5); 30 | byte[] bytes = "张".getBytes(); 31 | 32 | // 这样就可以直接修改文件了 33 | mbf.put(bytes, 0, bytes.length); 34 | 35 | channel.close(); 36 | raf.close(); 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /Netty/netty-demo/src/main/java/com/netty/demo/nio/ReadonlyBuffer.java: -------------------------------------------------------------------------------- 1 | package com.netty.demo.nio; 2 | 3 | import java.nio.ByteBuffer; 4 | 5 | /** 6 | * {@link ByteBuffer} 转为 readonly 7 | * 8 | * @author yang 9 | * @date 2021-11-17 15:01 10 | */ 11 | public class ReadonlyBuffer { 12 | public static void main(String[] args) { 13 | ByteBuffer bf = ByteBuffer.allocate(1024); 14 | for (int i = 129; i < 300; ++i) { 15 | bf.put(Integer.valueOf(i).byteValue()); 16 | } 17 | 18 | bf.flip(); 19 | 20 | ByteBuffer roBf = bf.asReadOnlyBuffer(); 21 | while (roBf.hasRemaining()) { 22 | System.out.println(roBf.get()); 23 | } 24 | 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Netty/netty-demo/src/main/java/com/netty/demo/nio/chat/GroupChatApplication.java: -------------------------------------------------------------------------------- 1 | package com.netty.demo.nio.chat; 2 | 3 | /** 4 | * 群聊应用 5 | * 6 | * @author Ringo 7 | * @date 2021/11/17 22:14 8 | */ 9 | public class GroupChatApplication { 10 | public static void main(String[] args) { 11 | GroupChatServer.create().listen(); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 一、补充 2 | 3 | [juc最新笔记，补充了AQS等知识(含测试代码)](https://github.com/RingoTangs/java-util-concurrent) 4 | 5 | [RabbitMQ消息可靠性投递、避免消息重复消费(流程图 + 测试代码)](https://github.com/RingoTangs/spring-boot-rabbitmq-delivery) 6 | 7 | [Redis应用场景、Redisson分布式锁、Redis内存淘汰策略、LRU算法](https://github.com/RingoTangs/redis-redlock) 8 | 9 | [Spring Security 自定义校验逻辑，支持图片验证码、短信验证码登录（支持JSON和表单登录）、自动登录](https://github.com/RingoTangs/spring-security-login-demo) 10 | 11 | [Gitee仓库地址](https://gitee.com/RingoTangs/learning-note) 12 | 13 | [智能优化算法](https://github.com/RingoTangs/optimize-samples) 14 | 15 | [SpringCloudAlibaba](https://gitee.com/RingoTangs/spring-cloud-alibaba-demo) 16 | 17 | -------------------------------------------------------------------------------- /RabbitMQ/image/2.3-1-AMQP协议模型.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/RabbitMQ/image/2.3-1-AMQP协议模型.jpg -------------------------------------------------------------------------------- /RabbitMQ/image/2.5-1-RabbitMQ的整体架构图.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/RabbitMQ/image/2.5-1-RabbitMQ的整体架构图.jpg -------------------------------------------------------------------------------- /RabbitMQ/image/2.6-1-RabbitMQ消息流转图.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/RabbitMQ/image/2.6-1-RabbitMQ消息流转图.jpg -------------------------------------------------------------------------------- /RabbitMQ/image/3.1.2-1-消息落库.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/RabbitMQ/image/3.1.2-1-消息落库.jpg -------------------------------------------------------------------------------- /RabbitMQ/image/3.1.2-2-消息的回调检查.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/RabbitMQ/image/3.1.2-2-消息的回调检查.jpg -------------------------------------------------------------------------------- /SpringBoot-2020/OAuth2系列.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/SpringBoot-2020/OAuth2系列.pdf -------------------------------------------------------------------------------- /SpringBoot-2020/utils/LoginSuccessHandler.java: -------------------------------------------------------------------------------- 1 | package com.ymy.boot.conf.handler; 2 | 3 | import com.fasterxml.jackson.databind.ObjectMapper; 4 | import com.ymy.boot.entity.Hr; 5 | import com.ymy.boot.entity.ResponseBean; 6 | import org.springframework.security.core.Authentication; 7 | import org.springframework.security.web.authentication.AuthenticationSuccessHandler; 8 | import org.springframework.stereotype.Component; 9 | 10 | import javax.servlet.ServletException; 11 | import javax.servlet.http.HttpServletRequest; 12 | import javax.servlet.http.HttpServletResponse; 13 | import java.io.IOException; 14 | import java.io.PrintWriter; 15 | 16 | /** 17 | * 登录成功处理器 18 | */ 19 | @Component 20 | public class LoginSuccessHandler implements AuthenticationSuccessHandler { 21 | 22 | @Override 23 | public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException { 24 | response.setContentType("application/json;charset=UTF-8"); 25 | ObjectMapper objectMapper = new ObjectMapper(); 26 | 27 | // Principal 就是 实体类 Hr 的信息 28 | Hr hr = (Hr) authentication.getPrincipal(); 29 | hr.setPassword(null); 30 | String info = objectMapper.writeValueAsString(ResponseBean.ok("登录成功", hr)); 31 | 32 | PrintWriter printWriter = response.getWriter(); 33 | printWriter.write(info); 34 | printWriter.flush(); 35 | printWriter.close(); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /SpringBoot-2020/utils/LogoutAppSuccessHandler.java: -------------------------------------------------------------------------------- 1 | package com.ymy.boot.conf.handler; 2 | 3 | import com.fasterxml.jackson.databind.ObjectMapper; 4 | import com.ymy.boot.entity.Hr; 5 | import com.ymy.boot.entity.ResponseBean; 6 | import org.springframework.security.core.Authentication; 7 | import org.springframework.security.web.authentication.logout.LogoutSuccessHandler; 8 | import org.springframework.stereotype.Component; 9 | 10 | import javax.servlet.ServletException; 11 | import javax.servlet.http.HttpServletRequest; 12 | import javax.servlet.http.HttpServletResponse; 13 | import java.io.IOException; 14 | import java.io.PrintWriter; 15 | 16 | @Component 17 | public class LogoutAppSuccessHandler implements LogoutSuccessHandler { 18 | @Override 19 | public void onLogoutSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) 20 | throws IOException, ServletException { 21 | response.setContentType("application/json;charset=UTF-8"); 22 | 23 | Hr hr = null; 24 | if (authentication != null) { 25 | hr = (Hr) authentication.getPrincipal(); 26 | } 27 | 28 | PrintWriter printWriter = response.getWriter(); 29 | printWriter.write(new ObjectMapper().writeValueAsString(ResponseBean.ok("成功注销!", hr))); 30 | printWriter.flush(); 31 | printWriter.close(); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /SpringBoot-2020/utils/RecursionEntity.java: -------------------------------------------------------------------------------- 1 | package com.ymy.boot.utils; 2 | 3 | import java.util.List; 4 | 5 | public interface RecursionEntity { 6 | 7 | Integer getId(); 8 | 9 | Integer getParentId(); 10 | 11 | void setChildren(List children); 12 | } 13 | -------------------------------------------------------------------------------- /SpringBoot-2020/utils/RecursionList.java: -------------------------------------------------------------------------------- 1 | package com.ymy.boot.utils; 2 | 3 | import java.util.List; 4 | import java.util.stream.Collectors; 5 | 6 | /** 7 | * 递归封装列表 8 | */ 9 | public class RecursionList { 10 | 11 | /** 12 | * 将列表 封装成 ==> 带多级菜单的列表 13 | * 14 | * @param list 所有的列表 15 | * @param parentId 一级菜单的 parentId（用来获取一级菜单） 16 | * @return 17 | */ 18 | public List levelList(List list, Integer parentId) { 19 | List ret = list.stream().filter(item -> item.getParentId().equals(parentId)) 20 | .map(item -> { 21 | item.setChildren(getChildren(item, list)); 22 | return item; 23 | }).collect(Collectors.toList()); 24 | System.out.println(ret); 25 | return ret; 26 | } 27 | 28 | /** 29 | * 递归获得子部门 30 | * 31 | * @param root 当前的部门 32 | * @param list 所有的部门列表 33 | * @return 34 | */ 35 | private List getChildren(T root, List list) { 36 | return list.stream().filter(item -> item.getParentId().equals(root.getId())) 37 | .map(item -> { 38 | item.setChildren(getChildren(item, list)); 39 | return item; 40 | }).collect(Collectors.toList()); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /SpringBoot-2020/utils/RequestFailureHandler.java: -------------------------------------------------------------------------------- 1 | package com.ymy.boot.conf.handler; 2 | 3 | import com.fasterxml.jackson.databind.ObjectMapper; 4 | import com.ymy.boot.entity.ResponseBean; 5 | import org.springframework.security.authentication.*; 6 | import org.springframework.security.core.AuthenticationException; 7 | import org.springframework.security.core.userdetails.UsernameNotFoundException; 8 | import org.springframework.security.web.AuthenticationEntryPoint; 9 | import org.springframework.stereotype.Component; 10 | 11 | import javax.servlet.ServletException; 12 | import javax.servlet.http.HttpServletRequest; 13 | import javax.servlet.http.HttpServletResponse; 14 | import java.io.IOException; 15 | import java.io.PrintWriter; 16 | 17 | @Component 18 | public class RequestFailureHandler implements AuthenticationEntryPoint { 19 | @Override 20 | public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException, ServletException { 21 | response.setContentType("application/json;charset=UTF-8"); 22 | response.setStatus(HttpServletResponse.SC_UNAUTHORIZED); 23 | ResponseBean responseBean; 24 | if (authException instanceof InsufficientAuthenticationException) { 25 | responseBean = ResponseBean.failure("尚未登录, 请登录!"); 26 | } else { 27 | responseBean = ResponseBean.failure("访问失败!"); 28 | } 29 | 30 | PrintWriter printWriter = response.getWriter(); 31 | printWriter.write(new ObjectMapper().writeValueAsString(responseBean)); 32 | printWriter.flush(); 33 | printWriter.close(); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /SpringBoot-2020/utils/ResponseBean.java: -------------------------------------------------------------------------------- 1 | package com.ymy.boot.entity; 2 | 3 | import io.swagger.annotations.ApiModel; 4 | import io.swagger.annotations.ApiModelProperty; 5 | import lombok.AllArgsConstructor; 6 | import lombok.Data; 7 | import lombok.EqualsAndHashCode; 8 | import lombok.NoArgsConstructor; 9 | 10 | @Data 11 | @AllArgsConstructor 12 | @NoArgsConstructor 13 | @EqualsAndHashCode(callSuper = false) 14 | @ApiModel(value = "ResponseBean", description = "封装返回结果") 15 | public class ResponseBean { 16 | 17 | @ApiModelProperty(value = "状态码") 18 | private Integer status; 19 | 20 | @ApiModelProperty(value = "信息") 21 | private String message; 22 | 23 | @ApiModelProperty(value = "返回数据") 24 | private Object data; 25 | 26 | public static ResponseBean ok(String message) { 27 | return new ResponseBean(200, message, null); 28 | } 29 | 30 | public static ResponseBean ok(String message, Object data) { 31 | return new ResponseBean(200, message, data); 32 | } 33 | 34 | public static ResponseBean failure(String message) { 35 | return new ResponseBean(500, message, null); 36 | } 37 | 38 | public static ResponseBean failure(String message, Object data) { 39 | return new ResponseBean(500, message, data); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /SpringBoot-2020/递归封装N级菜单/RecursionEntity.java: -------------------------------------------------------------------------------- 1 | package com.ymy.boot.utils; 2 | 3 | import java.util.List; 4 | 5 | public interface RecursionEntity { 6 | 7 | Integer getId(); 8 | 9 | Integer getParentId(); 10 | 11 | void setChildren(List children); 12 | } 13 | -------------------------------------------------------------------------------- /SpringBoot-2020/递归封装N级菜单/RecursionList.java: -------------------------------------------------------------------------------- 1 | package com.ymy.boot.utils; 2 | 3 | import java.util.List; 4 | import java.util.stream.Collectors; 5 | 6 | /** 7 | * 递归封装列表 8 | */ 9 | public class RecursionList { 10 | 11 | /** 12 | * 将列表 封装成 ==> 带多级菜单的列表 13 | * 14 | * @param list 所有的列表 15 | * @param parentId 一级菜单的 parentId（用来获取一级菜单） 16 | * @return 17 | */ 18 | public List levelList(List list, Integer parentId) { 19 | return list.stream().filter(item -> item.getParentId().equals(parentId)) 20 | .map(item -> { 21 | item.setChildren(getChildren(item, list)); 22 | return item; 23 | }).collect(Collectors.toList()); 24 | } 25 | 26 | /** 27 | * 递归获得子部门 28 | * 29 | * @param root 当前的部门 30 | * @param list 所有的部门列表 31 | * @return 32 | */ 33 | private List getChildren(T root, List list) { 34 | return list.stream().filter(item -> item.getParentId().equals(root.getId())) 35 | .map(item -> { 36 | item.setChildren(getChildren(item, list)); 37 | return item; 38 | }).collect(Collectors.toList()); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /Swagger/Swagger.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Swagger/Swagger.pdf -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/01-MVVM模型/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

14 |

{{$options}}

15 |

{{_c}}

16 |
17 | 18 | 19 | 20 | 39 | 40 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/02-数据代理/1-Object.defineProperty.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 | 13 | 14 | 15 | 56 | 57 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/02-数据代理/2-何为数据代理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 | 13 | 14 | 15 | 30 | 31 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/02-数据代理/3-vue中的数据代理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 |
13 |

名称: {{name}} {{_data.name}}

14 |

地址：{{address}}

15 |
16 | 17 | 18 | 19 | 33 | 34 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/03-Vue中的this/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 54 | 55 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/04-事件处理/1-事件的基本使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 35 | 36 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/05-计算属性/1-姓名案例-使用计算属性.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 |
13 | 14 | 15 |

全名: {{fullName}}

16 |
17 | 18 | 19 | 20 | 41 | 42 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/07-绑定样式/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | #app { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: space-around; 11 | flex-direction: column; 12 | align-items: center; 13 | } 14 | 15 | .box { 16 | height: 200px; 17 | width: 400px; 18 | border: 3px solid #000; 19 | } 20 | 21 | .box:hover { 22 | cursor: pointer; 23 | } 24 | 25 | .happy { 26 | background-color: pink; 27 | } 28 | 29 | .sad { 30 | background-color: blue; 31 | } 32 | 33 | .normal { 34 | background-color: skyblue; 35 | } 36 | 37 | .box-radius { 38 | border-radius: 10px; 39 | } 40 | 41 | .text-scale { 42 | font-size: 20px; 43 | } 44 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/08-条件渲染/1-template标签不会破坏HTML结构.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 |
13 | 17 | 20 | 21 |
22 | 23 | 24 | 25 | 35 | 36 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/09-列表渲染/1-基本列表.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 |
13 | 14 | 19 |
20 | 21 | 22 | 23 | 42 | 43 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/10-更新时的问题/2-模拟vm的数据监测.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 | 13 | 14 | 15 | 48 | 49 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/11-收集表单数据/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .title { 8 | text-align: center; 9 | border-bottom: 2px solid rgba(0, 0, 0, 0.3); 10 | padding-bottom: 4px; 11 | } 12 | 13 | .form > div { 14 | margin-top: 10px; 15 | } 16 | 17 | .form { 18 | width: 350px; 19 | } 20 | 21 | .submitArea { 22 | text-align: center; 23 | } 24 | 25 | .belongArea { 26 | text-align: center; 27 | } 28 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/12-过滤器/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/13-内置指令/1. v-text指定.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 | 18 |
19 |
nihao, {{msg}}
20 |
nihao,
21 |
22 |
23 | 24 | 25 | 26 | 37 | 38 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/13-内置指令/2.v-html指令.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 |
13 | 26 |
1
27 | 28 | 29 |
30 |
31 | 32 | 33 | 44 | 45 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/13-内置指令/3. v-cloak.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 15 | 16 | 17 | 18 | 22 |
23 | {{msg}} 24 |
25 | 26 | 27 | 37 | 38 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/13-内置指令/4. v-once指令.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 |
13 | 19 |

初始 n 的值是: {{n}}

20 |

当前 n 的值是: {{n}}

21 | 22 |
23 | 24 | 25 | 26 | 36 | 37 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/14-生命周期/生命周期.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue2/14-生命周期/生命周期.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/15-组件基础/4-一个重要的内置关系.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 | 16 |
17 | 18 |
19 | 20 | 21 | 22 | 59 | 60 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/15-组件基础/扩展-js原型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 | 13 | 14 | 15 | 36 | 37 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/16-单文件组件/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 9 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/16-单文件组件/School.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/16-单文件组件/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Index 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue2/16-单文件组件/main.js: -------------------------------------------------------------------------------- 1 | // 浏览器不认识这行代码, 会报错(这只是 CLI 的基本形式) 2 | import App from "./App.vue"; 3 | 4 | const vm = new Vue({ 5 | el: "#app", 6 | template: ``, // template 会将 HTML 中的容器全部替换 7 | components: { App }, 8 | }); 9 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | insert_final_newline = false 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | src/assets 3 | public 4 | dist 5 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build/*.js 3 | src/assets 4 | public 5 | dist 6 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/.prettierrc.js: -------------------------------------------------------------------------------- 1 | // prettier-ignore 2 | // https://www.cnblogs.com/jiaoshou/p/12004077.html 3 | 4 | // 该配置文件会继承 editorConfig 的配置 5 | // 使用 prettier 需要安装 vscode 插件 Prettier-Code formatter 6 | module.exports = { 7 | //useEditorConfig: false, // 不使用 EditorConfig 的配置 8 | printWidth: 200, // 指定代码的最佳长度超过则换行 9 | semi: false, // 行尾不要分号 10 | singleQuote: true, // 使用单引号 11 | trailingComma: 'none', // 末尾不需要逗号 12 | tabWidth: 2, // 使用 2 个空格缩进 13 | useTabs: false, // 不使用缩进符，而使用空格 14 | quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号 15 | jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号 16 | bracketSpacing: true, // 大括号内的首尾需要空格 17 | jsxBracketSameLine: false, // jsx 标签的反尖括号需要换行 18 | arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号 19 | endOfLine: 'lf', // 换行符使用 lf 20 | } 21 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/README.md: -------------------------------------------------------------------------------- 1 | # 一、vue中使用sass 2 | 3 | ## 1. 安装sass-loader 4 | 5 | ```javascript 6 | npm install sass@1.37.5 -D 7 | npm install sass-loader@10.0.1 -D 8 | ``` 9 | 10 | 安装完成后，就可以在 `vue component` 中写 scss 代码了。 11 | 12 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./src", 4 | "paths": { 5 | "@/*": ["src/*"] 6 | } 7 | }, 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue_sass", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^2.6.11", 13 | "vue-router": "^3.5.3" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.5.0", 17 | "@vue/cli-plugin-eslint": "~4.5.0", 18 | "@vue/cli-service": "~4.5.0", 19 | "babel-eslint": "^10.1.0", 20 | "eslint": "^6.7.2", 21 | "eslint-plugin-vue": "^6.2.2", 22 | "sass": "^1.37.5", 23 | "sass-loader": "^10.0.1", 24 | "vue-template-compiler": "^2.6.11" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/essential", 33 | "eslint:recommended" 34 | ], 35 | "parserOptions": { 36 | "parser": "babel-eslint" 37 | }, 38 | "rules": {} 39 | }, 40 | "browserslist": [ 41 | "> 1%", 42 | "last 2 versions", 43 | "not dead" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_sass/public/favicon.ico -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_sass/src/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/components/CSSExtensions/NestedProperties.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | 20 | 30 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/components/CSSExtensions/NestedRules.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 25 | 26 | 35 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/components/SassScript/DataTypes.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 24 | 25 | 27 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/components/SassScript/Operations.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | 24 | 40 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/components/SassScript/Variables.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | 22 | 33 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | import './style/index.scss' 6 | 7 | Vue.config.productionTip = false 8 | 9 | new Vue({ 10 | render: (h) => h(App), 11 | router 12 | }).$mount('#app') 13 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | path: '/', 9 | redirect: '/dashboard', 10 | meta: { title: 'sass' } 11 | }, 12 | { 13 | path: '/dashboard', 14 | name: 'Dashboard', 15 | meta: { title: 'dashboard' }, 16 | component: () => import('@/views/Dashboard.vue') 17 | }, 18 | { 19 | path: '/css-extensions', 20 | name: 'CSSExtensions', 21 | meta: { title: 'css-extensions' }, 22 | component: () => import('@/views/CSSExtensions.vue') 23 | }, 24 | { 25 | path: '/sass-script', 26 | name: 'SassScript', 27 | meta: { title: 'sass-script' }, 28 | component: () => import('@/views/SassScript.vue') 29 | }, 30 | { 31 | path: '/roles-and-directives', 32 | name: 'RulesAndDirectives', 33 | meta: { title: 'roles-and-directives' }, 34 | component: () => import('@/views/RulesAndDirectives.vue') 35 | } 36 | ] 37 | 38 | const router = new VueRouter({ routes }) 39 | 40 | router.afterEach((to) => { 41 | document.title = to.meta.title + '-study' 42 | }) 43 | 44 | export default router 45 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/style/index.scss: -------------------------------------------------------------------------------- 1 | /* global scss file */ 2 | 3 | .box-line { 4 | border-bottom: 1px solid rgba(0, 0, 0, 0.3); 5 | } 6 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/views/CSSExtensions.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/views/Dashboard.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 26 | 27 | 60 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/views/RulesAndDirectives.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_sass/src/views/SassScript.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | 20 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/.env.development: -------------------------------------------------------------------------------- 1 | NODE_ENV = development -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/.env.staging: -------------------------------------------------------------------------------- 1 | NODE_ENV = staging -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/01_src_分析CLI/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 9 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/01_src_分析CLI/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/01_src_分析CLI/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/01_src_分析CLI/components/School.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/01_src_分析CLI/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 该文件是整个 CLI 项目的入口文件 3 | */ 4 | 5 | // 引入 Vue 6 | import Vue from 'vue' 7 | // 引入 App 组件, 它是所有组件的父组件 8 | import App from "./App.vue" 9 | 10 | // vue 的生产环境提示 11 | Vue.config.productionTip = false 12 | 13 | // 创建 vue 实例对象 --- vm 14 | // 之所以 template 不能用, 就是因为引入的 vue 文件是 vue.runtime.esm.js, 缺少模板解析器. 15 | // 引入 vue/dist/vue.js, 就可以使用 template 了 16 | /* new Vue({ 17 | el: '#app', 18 | template: `

Hello World

`, 19 | }) */ 20 | 21 | // import Vue from 'vue' 默认引入的是残缺版的 vue.js, 没有模板解析的功能, 22 | // 所以需要 render 渲染函数来将 App 组件渲染到容器中 23 | /* new Vue({ 24 | el: '#app', 25 | // render 函数的功能: 将 App 组件放入容器中 26 | // render: (h) => h(App), 27 | // render(createElement) { 28 | // return createElement('h1', 'Hello World'); 29 | // } 30 | render: createElement => createElement('h1', 'Hello World') 31 | }) */ 32 | 33 | /** 34 | * 总结关于不同版本的 Vue: 35 | * 1. vue.js 与 vue.runtime.xxx.js 的区别: 36 | * (1) vue.js 是完整版的 Vue, 包含: 核心功能 + 模板解析器。 37 | * (2) vue.runtime.xxx.js 是运行版的 Vue, 只包含: 核心功能, 没有模板解析器。 38 | * 39 | * 2. 因为 vue.runtime.xxx.js 没有模板解析器, 所以不能使用 template 配置项, 40 | * 需要使用 render 函数接收到的 createElement 函数去指定具体内容。 41 | */ 42 | 43 | const vm = new Vue({ 44 | el: '#app', 45 | render: h => h(App), 46 | }) -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/02_src_ref属性/App.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 55 | 56 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/02_src_ref属性/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/02_src_ref属性/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/02_src_ref属性/components/School.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/02_src_ref属性/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | const vm = new Vue({ render: h => h(App) }) 10 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/03_src_props配置/App.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 41 | 42 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/03_src_props配置/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/03_src_props配置/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/03_src_props配置/components/Student.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/03_src_props配置/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | const vm = new Vue({ render: h => h(App) }) 10 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/04_src_mixin混入/App.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 36 | 37 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/04_src_mixin混入/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/04_src_mixin混入/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/04_src_mixin混入/components/School.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | 25 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/04_src_mixin混入/components/Student.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 30 | 31 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/04_src_mixin混入/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | // 全局引入混入, 所有的 vc 和 vm 都会加入这些配置项 6 | // import { mixin, mixin2 } from './mixin.js' 7 | // Vue.mixin(mixin) 8 | // Vue.mixin(mixin2) 9 | 10 | // 关闭 Vue 生产提示 11 | Vue.config.productionTip = false 12 | 13 | const vm = new Vue({ render: h => h(App) }) 14 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/04_src_mixin混入/mixin.js: -------------------------------------------------------------------------------- 1 | const mixin = { 2 | methods: { 3 | showName(event) { 4 | alert('name = ' + this.name) 5 | }, 6 | }, 7 | mounted() { 8 | console.log('mounted') 9 | }, 10 | } 11 | 12 | const mixin2 = { 13 | data() { 14 | return { 15 | x: 100, 16 | y: 200, 17 | } 18 | }, 19 | } 20 | 21 | export { mixin, mixin2 } -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/05_src_插件/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/05_src_插件/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/05_src_插件/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/05_src_插件/components/School.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/05_src_插件/components/Student.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/05_src_插件/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | import plugins from './plugins' 7 | 8 | // 安装 Vue.js 插件。该方法需要在调用 new Vue() 之前被调用。 9 | Vue.use(plugins, { x: 1, y: 2 }) 10 | 11 | // 关闭 Vue 生产提示 12 | Vue.config.productionTip = false 13 | 14 | 15 | const vm = new Vue({ render: h => h(App) }) 16 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/05_src_插件/plugins.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // install 的参数是 Vue 的构造函数, 而且还能自己携带配置项 3 | install(Vue, options) { 4 | console.log('options:', options) 5 | // 全局过滤器: 字符串截取 6 | Vue.filter('sliceStr', (value, start = 0, end = value.length) => { 7 | console.log('sliceStr filter') 8 | return value.slice(start, end) 9 | }) 10 | // 全局自定义指令: 修改字体 11 | // element 是真实的 DOM 元素 12 | Vue.directive('font', (element, binding) => { 13 | console.dir(element) 14 | console.log(binding) 15 | element.style[binding.arg] = binding.value 16 | }) 17 | // 定义全局混入 18 | Vue.mixin({ 19 | mounted() { 20 | console.log('mounted') 21 | }, 22 | }) 23 | // Vue 原型对象上添加方法（vm 和 vc 就都能用了） 24 | Vue.prototype.$hello = () => alert('hello') 25 | 26 | } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/06_src_scoped样式/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/06_src_scoped样式/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/06_src_scoped样式/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/06_src_scoped样式/components/School.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 25 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/06_src_scoped样式/components/Student.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/06_src_scoped样式/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ render: h => h(App) }) 11 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/07_src_todoList案例/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/07_src_todoList案例/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/07_src_todoList案例/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/07_src_todoList案例/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 26 | 27 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/07_src_todoList案例/components/TodoListHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | 35 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/07_src_todoList案例/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ render: h => h(App) }) 11 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/08_浏览器本地存储/LocalStorage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Index 8 | 9 | 10 | 11 | 12 | 13 | 14 | 30 | 31 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/08_浏览器本地存储/SessionStorage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Index 8 | 9 | 10 | 11 | 12 | 13 | 14 | 30 | 31 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/09_src_todoList_浏览器本地存储/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/09_src_todoList_浏览器本地存储/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/09_src_todoList_浏览器本地存储/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/09_src_todoList_浏览器本地存储/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 26 | 27 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/09_src_todoList_浏览器本地存储/components/TodoListHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | 35 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/09_src_todoList_浏览器本地存储/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ render: h => h(App) }) 11 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/10_src_自定义事件/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/10_src_自定义事件/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/10_src_自定义事件/components/School.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 29 | 30 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/10_src_自定义事件/components/Student.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 29 | 30 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/10_src_自定义事件/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | const vm = new Vue({ render: (h) => h(App) }) 7 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/11_src_$attrs的使用/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | 25 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/11_src_$attrs的使用/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/11_src_$attrs的使用/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/11_src_$attrs的使用/components/School.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/11_src_$attrs的使用/components/Student.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/11_src_$attrs的使用/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | const vm = new Vue({ render: (h) => h(App) }) 7 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/12_src_todoList自定义事件/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/12_src_todoList自定义事件/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/12_src_todoList自定义事件/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/12_src_todoList自定义事件/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 26 | 27 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/12_src_todoList自定义事件/components/TodoListHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | 32 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/12_src_todoList自定义事件/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ render: h => h(App) }) 11 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/13_src_全局事件总线/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | 17 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/13_src_全局事件总线/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/13_src_全局事件总线/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/13_src_全局事件总线/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/13_src_全局事件总线/components/School.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 26 | 27 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/13_src_全局事件总线/components/Student.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | 28 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/13_src_全局事件总线/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | const vm = new Vue({ 10 | render: h => h(App), 11 | beforeCreate() { 12 | Vue.prototype.$bus = this // 安装全局事件总线 13 | }, 14 | }) 15 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/14_src_todoList全局事件总线/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/14_src_todoList全局事件总线/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/14_src_todoList全局事件总线/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/14_src_todoList全局事件总线/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/14_src_todoList全局事件总线/components/TodoListHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | 32 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/14_src_todoList全局事件总线/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ 11 | render: h => h(App), 12 | beforeCreate() { 13 | // 注册全局事件总线 14 | Vue.prototype.$bus = this 15 | }, 16 | }) 17 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/15_src_消息订阅与发布/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/15_src_消息订阅与发布/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/15_src_消息订阅与发布/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/15_src_消息订阅与发布/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/15_src_消息订阅与发布/components/School.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | 29 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/15_src_消息订阅与发布/components/Student.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | 25 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/15_src_消息订阅与发布/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | // 引入 pubsub-js 6 | import PubSub from 'pubsub-js' 7 | // PubSub 全局安装 8 | Vue.prototype.$PubSub = PubSub 9 | 10 | // 关闭 Vue 生产提示 11 | Vue.config.productionTip = false 12 | 13 | const vm = new Vue({ render: h => h(App) }) 14 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/16_src_todoList添加编辑功能/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/16_src_todoList添加编辑功能/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/16_src_todoList添加编辑功能/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/16_src_todoList添加编辑功能/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/16_src_todoList添加编辑功能/components/TodoListHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | 32 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/16_src_todoList添加编辑功能/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ 11 | render: h => h(App), 12 | beforeCreate() { 13 | // 注册全局事件总线 14 | Vue.prototype.$bus = this 15 | }, 16 | }) 17 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/17_src_vuecli配置代理请求跨域/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/17_src_vuecli配置代理请求跨域/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/17_src_vuecli配置代理请求跨域/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/17_src_vuecli配置代理请求跨域/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/17_src_vuecli配置代理请求跨域/http.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | const instance = axios.create({ 4 | baseURL: 'http://localhost:8080/api', 5 | }) 6 | 7 | // 响应拦截器 8 | instance.interceptors.response.use(req => { 9 | if (!req) { 10 | console.log('服务器无响应') 11 | return 12 | } 13 | // console.log('http status:', req.status) 14 | if (!req.data) { 15 | console.log('服务器没有返回数据') 16 | return 17 | } 18 | return req.data 19 | }, err => console.log(err)) 20 | 21 | export function request(type, url, data) { 22 | const configuration = { 23 | method: type, 24 | url, 25 | } 26 | if (type === 'GET' || type === 'DELETE') 27 | configuration.params = data 28 | else if (type === 'PUT' || type === 'POST') 29 | configuration.data = data 30 | else 31 | return console.error(`${type} 类型不正确`) 32 | // console.log(configuration) 33 | return instance(configuration) 34 | } 35 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/17_src_vuecli配置代理请求跨域/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | import { request } from './http.js' 7 | 8 | // 关闭 Vue 生产提示 9 | Vue.config.productionTip = false 10 | Vue.prototype.$http = request 11 | 12 | const vm = new Vue({ 13 | render: h => h(App), 14 | beforeCreate() { 15 | // 注册全局事件总线 16 | Vue.prototype.$bus = this 17 | }, 18 | }) 19 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/18_github列表展示案例_未完成/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | 15 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/18_github列表展示案例_未完成/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/18_github列表展示案例_未完成/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/18_github列表展示案例_未完成/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/18_github列表展示案例_未完成/components/UserSearch.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/18_github列表展示案例_未完成/components/UserSearchHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/18_github列表展示案例_未完成/components/UserSearchList.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/18_github列表展示案例_未完成/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | // 引入封装的 axios 网络请求工具 6 | import { request } from './network' 7 | 8 | // 关闭 Vue 生产提示 9 | Vue.config.productionTip = false 10 | Vue.prototype.$http = request 11 | 12 | const vm = new Vue({ 13 | render: h => h(App), 14 | beforeCreate() { 15 | // 注册全局事件总线 16 | Vue.prototype.$bus = this 17 | }, 18 | }) 19 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/18_github列表展示案例_未完成/network/index.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | const instance = axios.create({ 4 | baseURL: 'http://localhost:8080/api', 5 | }) 6 | 7 | // 响应拦截器 8 | instance.interceptors.response.use(req => { 9 | if (!req) { 10 | console.log('服务器无响应') 11 | return 12 | } 13 | // console.log('http status:', req.status) 14 | if (!req.data) { 15 | console.log('服务器没有返回数据') 16 | return 17 | } 18 | return req.data 19 | }, err => console.log(err)) 20 | 21 | export function request(type, url, data) { 22 | const configuration = { 23 | method: type, 24 | url, 25 | } 26 | if (type === 'GET' || type === 'DELETE') 27 | configuration.params = data 28 | else if (type === 'PUT' || type === 'POST') 29 | configuration.data = data 30 | else 31 | return console.error(`${type} 类型不正确`) 32 | // console.log(configuration) 33 | return instance(configuration) 34 | } 35 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/1_src_不使用插槽/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | 27 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/1_src_不使用插槽/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/1_src_不使用插槽/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/19_src_插槽/1_src_不使用插槽/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/1_src_不使用插槽/components/Category.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | 20 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/1_src_不使用插槽/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ 11 | render: h => h(App), 12 | beforeCreate() { 13 | // 注册全局事件总线 14 | Vue.prototype.$bus = this 15 | }, 16 | }) 17 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/2_src_默认插槽/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 36 | 37 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/2_src_默认插槽/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/2_src_默认插槽/assets/food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/19_src_插槽/2_src_默认插槽/assets/food.jpg -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/2_src_默认插槽/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/19_src_插槽/2_src_默认插槽/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/2_src_默认插槽/components/Category.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/2_src_默认插槽/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ 11 | render: h => h(App), 12 | beforeCreate() { 13 | // 注册全局事件总线 14 | Vue.prototype.$bus = this 15 | }, 16 | }) 17 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/3_src_具名插槽/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/3_src_具名插槽/assets/food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/19_src_插槽/3_src_具名插槽/assets/food.jpg -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/3_src_具名插槽/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/19_src_插槽/3_src_具名插槽/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/3_src_具名插槽/components/Category.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 18 | 19 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/3_src_具名插槽/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ 11 | render: h => h(App), 12 | beforeCreate() { 13 | // 注册全局事件总线 14 | Vue.prototype.$bus = this 15 | }, 16 | }) 17 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/4_src_作用域插槽/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/4_src_作用域插槽/assets/food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/19_src_插槽/4_src_作用域插槽/assets/food.jpg -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/4_src_作用域插槽/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/19_src_插槽/4_src_作用域插槽/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/4_src_作用域插槽/components/Category.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/19_src_插槽/4_src_作用域插槽/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ 11 | render: h => h(App), 12 | beforeCreate() { 13 | // 注册全局事件总线 14 | Vue.prototype.$bus = this 15 | }, 16 | }) 17 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/1_src_求和案例_纯vue版本/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 15 | 16 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/1_src_求和案例_纯vue版本/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/1_src_求和案例_纯vue版本/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/20_vuex/1_src_求和案例_纯vue版本/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/1_src_求和案例_纯vue版本/components/Count.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 34 | 35 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/1_src_求和案例_纯vue版本/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | 6 | // 关闭 Vue 生产提示 7 | Vue.config.productionTip = false 8 | 9 | 10 | const vm = new Vue({ 11 | render: h => h(App), 12 | beforeCreate() { 13 | // 注册全局事件总线 14 | Vue.prototype.$bus = this 15 | }, 16 | }) 17 | vm.$mount('#app') -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/2_src_求和案例_vuex版本/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 16 | 17 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/2_src_求和案例_vuex版本/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/2_src_求和案例_vuex版本/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/20_vuex/2_src_求和案例_vuex版本/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/2_src_求和案例_vuex版本/components/Count.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 39 | 40 | 45 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/2_src_求和案例_vuex版本/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | // 引入 store 6 | import store from './store' 7 | 8 | // 关闭 Vue 生产提示 9 | Vue.config.productionTip = false 10 | 11 | const vm = new Vue({ 12 | render: (h) => h(App), 13 | store, 14 | }) 15 | vm.$mount('#app') 16 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/2_src_求和案例_vuex版本/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | // Vue.use 安装 Vuex 插件后, 就可以在 vm 中添加 store 配置项了 5 | Vue.use(Vuex) 6 | 7 | // 准备 state —— 用于存储数据 8 | const state = { 9 | sum: 0, 10 | } 11 | 12 | // 准备 mutations —— 用于操作 state 中的数据 13 | const mutations = { 14 | // mutations 中的函数名一般用大写 15 | INCREMENT(state, n) { 16 | state.sum += n 17 | }, 18 | DECREMENT(state, n) { 19 | state.sum -= n 20 | }, 21 | } 22 | 23 | // 准备 actions —— 用于响应组件中的动作 24 | const actions = { 25 | sumIsOddThenAdd({ state, commit }, n) { 26 | if (state.sum % 2) { 27 | commit('INCREMENT', n) 28 | } 29 | }, 30 | incrementAwait({ commit }, n) { 31 | setTimeout(() => commit('INCREMENT', n), 1000) 32 | }, 33 | } 34 | 35 | // 创建 store 36 | const store = new Vuex.Store({ state, mutations, actions }) 37 | 38 | // 导出 store 39 | export default store 40 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/3_src_多组件共享数据/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/3_src_多组件共享数据/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/3_src_多组件共享数据/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/20_vuex/3_src_多组件共享数据/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/3_src_多组件共享数据/components/Person.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 39 | 40 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/3_src_多组件共享数据/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | // 引入 store 6 | import store from './store' 7 | 8 | // 关闭 Vue 生产提示 9 | Vue.config.productionTip = false 10 | 11 | const vm = new Vue({ 12 | render: (h) => h(App), 13 | store, 14 | }) 15 | vm.$mount('#app') 16 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/3_src_多组件共享数据/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | // Vue.use 安装 Vuex 插件后, 就可以在 vm 中添加 store 配置项了 5 | Vue.use(Vuex) 6 | 7 | // 准备 state —— 用于存储数据 8 | const state = { 9 | sum: 0, 10 | technology: 'vue.js', 11 | plugin: 'vuex', 12 | personList: JSON.parse(localStorage.getItem('personList')) || [], 13 | } 14 | 15 | // 准备 mutations —— 用于操作 state 中的数据 16 | // mutations 中的函数名一般用大写 17 | const mutations = { 18 | INCREMENT(state, n) { 19 | state.sum += n 20 | }, 21 | DECREMENT(state, n) { 22 | state.sum -= n 23 | }, 24 | // 添加 person 到 personList 数组 25 | ADD_PERSON({ personList }, person) { 26 | personList.push(person) 27 | localStorage.setItem('personList', JSON.stringify(personList)) 28 | } 29 | } 30 | 31 | // 准备 actions —— 用于响应组件中的动作 32 | const actions = { 33 | sumIsOddThenAdd({ state, commit }, n) { 34 | if (state.sum % 2) { 35 | commit('INCREMENT', n) 36 | } 37 | }, 38 | incrementAwait({ commit }, n) { 39 | setTimeout(() => commit('INCREMENT', n), 1000) 40 | }, 41 | } 42 | 43 | // 有点类似于 computed 计算属性 44 | const getters = { 45 | // 返回 sum 乘以 k 后的函数 46 | sumMultiplyBy10(state, k) { 47 | return (k) => state.sum * k 48 | }, 49 | } 50 | 51 | // 创建 store 52 | const store = new Vuex.Store({ state, mutations, actions, getters }) 53 | 54 | // 导出 store 55 | export default store 56 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/4_src_命名空间_多模块_数据共享/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | 17 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/4_src_命名空间_多模块_数据共享/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/4_src_命名空间_多模块_数据共享/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/20_vuex/4_src_命名空间_多模块_数据共享/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/4_src_命名空间_多模块_数据共享/components/Person.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 37 | 38 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/4_src_命名空间_多模块_数据共享/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | // 引入 store 6 | import store from './store' 7 | 8 | // 关闭 Vue 生产提示 9 | Vue.config.productionTip = false 10 | 11 | const vm = new Vue({ 12 | render: (h) => h(App), 13 | store, 14 | }) 15 | vm.$mount('#app') 16 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/4_src_命名空间_多模块_数据共享/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import countModule from './modules/count' 4 | import personModule from './modules/person' 5 | 6 | // Vue.use 安装 Vuex 插件后, 就可以在 vm 中添加 store 配置项了 7 | Vue.use(Vuex) 8 | 9 | // 创建 store 10 | const store = new Vuex.Store({ 11 | modules: { 12 | countModule, 13 | personModule, 14 | } 15 | }) 16 | 17 | console.log(store); 18 | 19 | // 导出 store 20 | export default store 21 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/4_src_命名空间_多模块_数据共享/store/modules/count.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // 添加命名空间 3 | // 就可以使用 ...mapState('countModule', ['sum', 'technology', 'plugin']) 这种模式了 4 | namespaced: true, 5 | state: { 6 | sum: 0, 7 | technology: 'vue.js', 8 | plugin: 'vuex', 9 | }, 10 | mutations: { 11 | INCREMENT(state, n) { 12 | state.sum += n 13 | }, 14 | DECREMENT(state, n) { 15 | state.sum -= n 16 | }, 17 | }, 18 | actions: { 19 | sumIsOddThenAdd({ state, commit }, n) { 20 | if (state.sum % 2) { 21 | commit('INCREMENT', n) 22 | } 23 | }, 24 | incrementAwait({ commit }, n) { 25 | setTimeout(() => commit('INCREMENT', n), 1000) 26 | }, 27 | }, 28 | getters: { 29 | // 返回 sum 乘以 k 后的函数 30 | sumMultiplyBy10(state, k) { 31 | return (k) => state.sum * k 32 | }, 33 | }, 34 | } -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/20_vuex/4_src_命名空间_多模块_数据共享/store/modules/person.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // 一定要写命名空间 3 | namespaced: true, 4 | state: { 5 | personList: JSON.parse(localStorage.getItem('personList')) || [], 6 | }, 7 | // 这里的参数是 state 8 | mutations: { 9 | // 添加 person 到 personList 数组 10 | ADD_PERSON({ personList }, person) { 11 | personList.push(person) 12 | } 13 | }, 14 | // 这里的参数是 context 15 | actions: { 16 | // 添加 person 到 personList 数组并保存到 localStorage 17 | addPersonThenSaveLocal({ commit, state }, person) { 18 | commit('ADD_PERSON', person) 19 | localStorage.setItem('personList', JSON.stringify(state.personList)) 20 | } 21 | }, 22 | getters: {} 23 | } -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 45 | 46 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/components/Banner.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/components/BaseContent.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 18 | 19 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | import router from './router' 6 | 7 | // 关闭 Vue 生产提示 8 | Vue.config.productionTip = false 9 | const vm = new Vue({ 10 | render: (h) => h(App), 11 | router 12 | }) 13 | vm.$mount('#app') 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/pages/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/1_src_vuerouter基本使用/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | // 解决重复点同一个路由报错问题 7 | // const originalPush = VueRouter.prototype.push 8 | // const originalReplace = VueRouter.prototype.replace 9 | // VueRouter.prototype.push = function push(location) { 10 | // return originalPush.call(this, location).catch((err) => err) 11 | // } 12 | // VueRouter.prototype.replace = function replace(location) { 13 | // return originalReplace.call(this, location).catch((err) => err) 14 | // } 15 | 16 | const routes = [ 17 | { 18 | path: '/', 19 | redirect: '/about', 20 | }, 21 | { 22 | path: '/about', 23 | name: 'About', 24 | component: () => import('../pages/About.vue'), 25 | }, 26 | { 27 | path: '/home', 28 | name: 'Home', 29 | component: () => import('../pages/Home.vue'), 30 | }, 31 | ] 32 | 33 | const router = new VueRouter({ 34 | routes, 35 | }) 36 | 37 | export default router 38 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 46 | 47 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/components/Banner.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/components/BaseContent.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | import router from './router' 6 | 7 | // 关闭 Vue 生产提示 8 | Vue.config.productionTip = false 9 | const vm = new Vue({ 10 | render: (h) => h(App), 11 | router 12 | }) 13 | vm.$mount('#app') 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/pages/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 29 | 30 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/pages/Message.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 31 | 32 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/pages/MessageDetails.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/pages/News.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/2_src_嵌套路由_命名路由_params和query的使用/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | // 解决重复点同一个路由报错问题 7 | // const originalPush = VueRouter.prototype.push 8 | // const originalReplace = VueRouter.prototype.replace 9 | // VueRouter.prototype.push = function push(location) { 10 | // return originalPush.call(this, location).catch((err) => err) 11 | // } 12 | // VueRouter.prototype.replace = function replace(location) { 13 | // return originalReplace.call(this, location).catch((err) => err) 14 | // } 15 | 16 | const routes = [ 17 | { 18 | path: '/', 19 | redirect: '/about', 20 | }, 21 | { 22 | path: '/about', 23 | name: 'About', 24 | component: () => import('../pages/About.vue'), 25 | }, 26 | { 27 | path: '/home', 28 | name: 'Home', 29 | component: () => import('../pages/Home.vue'), 30 | children: [ 31 | { 32 | path: 'news', 33 | name: 'News', 34 | component: () => import('../pages/News.vue'), 35 | }, 36 | { 37 | path: 'message', 38 | name: 'Message', 39 | component: () => import('../pages/Message.vue'), 40 | children: [ 41 | { 42 | path: ':id', 43 | name: 'MessageDetails', 44 | component: () => import('../pages/MessageDetails') 45 | } 46 | ], 47 | }, 48 | ], 49 | }, 50 | ] 51 | 52 | const router = new VueRouter({ 53 | routes, 54 | }) 55 | 56 | export default router 57 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 46 | 47 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/components/Banner.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/components/BaseContent.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | import router from './router' 6 | 7 | // 关闭 Vue 生产提示 8 | Vue.config.productionTip = false 9 | const vm = new Vue({ 10 | render: (h) => h(App), 11 | router 12 | }) 13 | vm.$mount('#app') 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/pages/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 29 | 30 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/pages/Message.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 31 | 32 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/pages/MessageDetails.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/3_src_路由传参_props属性/pages/News.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 46 | 47 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/components/Banner.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/components/BaseContent.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | import router from './router' 6 | 7 | // 关闭 Vue 生产提示 8 | Vue.config.productionTip = false 9 | const vm = new Vue({ 10 | render: (h) => h(App), 11 | router 12 | }) 13 | vm.$mount('#app') 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/pages/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 36 | 37 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/pages/Message.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 35 | 36 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/pages/MessageDetails.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/4_src_组件激活和失活的生命周期函数/pages/News.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 46 | 47 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/components/Banner.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/components/BaseContent.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | import router from './router' 6 | 7 | // 关闭 Vue 生产提示 8 | Vue.config.productionTip = false 9 | const vm = new Vue({ 10 | render: (h) => h(App), 11 | router 12 | }) 13 | vm.$mount('#app') 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/pages/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 33 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 36 | 37 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/pages/Message.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 35 | 36 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/pages/MessageDetails.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/pages/News.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/router/index.js: -------------------------------------------------------------------------------- 1 | import router from './router' 2 | import './navigation-guards' 3 | 4 | export default router 5 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/router/navigation-guards.js: -------------------------------------------------------------------------------- 1 | import router from './router' 2 | 3 | // 全局前置导航首位 4 | router.beforeEach((to, from, next) => { 5 | console.log('全局前置路由守卫'); 6 | next() 7 | }) 8 | 9 | // 全局后置导航首位来修改网站标题 10 | router.afterEach((to, from) => { 11 | console.log('全局后置路由守卫'); 12 | document.title = `${to.meta.title} - vue_test` 13 | }) 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/router/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import routes from './routes' 4 | 5 | Vue.use(VueRouter) 6 | 7 | // 解决重复点同一个路由报错问题 8 | // const originalPush = VueRouter.prototype.push 9 | // const originalReplace = VueRouter.prototype.replace 10 | // VueRouter.prototype.push = function push(location) { 11 | // return originalPush.call(this, location).catch((err) => err) 12 | // } 13 | // VueRouter.prototype.replace = function replace(location) { 14 | // return originalReplace.call(this, location).catch((err) => err) 15 | // } 16 | 17 | const router = new VueRouter({ 18 | routes, 19 | }) 20 | 21 | export default router 22 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/21_vue_router/5_src_全局导航守卫和组件内导航守卫/router/routes.js: -------------------------------------------------------------------------------- 1 | const routes = [ 2 | { 3 | path: '/', 4 | redirect: '/about', 5 | }, 6 | { 7 | path: '/about', 8 | name: 'About', 9 | meta: { title: '关于' }, 10 | component: () => import('../pages/About.vue'), 11 | }, 12 | { 13 | path: '/home', 14 | name: 'Home', 15 | meta: { title: '主页' }, 16 | component: () => import('../pages/Home.vue'), 17 | children: [ 18 | { 19 | path: 'news', 20 | name: 'News', 21 | meta: { title: '新闻' }, 22 | component: () => import('../pages/News.vue'), 23 | }, 24 | { 25 | path: 'message', 26 | name: 'Message', 27 | meta: { title: '消息' }, 28 | component: () => import('../pages/Message.vue'), 29 | children: [ 30 | { 31 | path: ':id', 32 | name: 'MessageDetails', 33 | meta: { title: '消息详情' }, 34 | component: () => import('../pages/MessageDetails'), 35 | // props 的第一种写法, 值为对象, 该对象中的所有 k-v 都会以 props 的形式传给 MessageDetails 组件 36 | // props: { a: 1, b: 'hello' }, 37 | 38 | // props 的第二种写法, 若值为 true, 就会把该路由组件收到的所有 params 参数, 以 props 的形式传给 Detail 组件 39 | // props: true, 40 | 41 | // props 的第三种写法, 值为函数 42 | // 连续解构赋值语句 43 | props: ({ params, query }) => ({ id: params.id, title: query.title }), 44 | }, 45 | ], 46 | }, 47 | ], 48 | }, 49 | ] 50 | 51 | export default routes 52 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue_test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vue-cli-service serve", 7 | "staging": "vue-cli-service serve --mode staging", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.24.0", 13 | "core-js": "^3.6.5", 14 | "nanoid": "^3.1.30", 15 | "pubsub-js": "^1.9.4", 16 | "vue": "^2.6.11", 17 | "vue-router": "^3.5.3", 18 | "vuex": "^3.6.2" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "~4.5.0", 22 | "@vue/cli-plugin-eslint": "~4.5.0", 23 | "@vue/cli-service": "~4.5.0", 24 | "babel-eslint": "^10.1.0", 25 | "eslint": "^6.7.2", 26 | "eslint-plugin-vue": "^6.2.2", 27 | "vue-template-compiler": "^2.6.11" 28 | }, 29 | "eslintConfig": { 30 | "root": true, 31 | "env": { 32 | "node": true 33 | }, 34 | "extends": [ 35 | "plugin:vue/essential", 36 | "eslint:recommended" 37 | ], 38 | "parserOptions": { 39 | "parser": "babel-eslint" 40 | }, 41 | "rules": {} 42 | }, 43 | "browserslist": [ 44 | "> 1%", 45 | "last 2 versions", 46 | "not dead" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/public/favicon.ico -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | <%= htmlWebpackPlugin.options.title %> 15 | 16 | 17 | 18 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 46 | 47 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/README.md: -------------------------------------------------------------------------------- 1 | # 总结TOdoList案例 2 | 3 | 一、组件化编码流程： 4 | 5 | ​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与 HTML 元素冲突。 6 | 7 | ​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 8 | 9 | ​ i. 一个组件在用：放在组件自身即可。 10 | 11 | ​ ii. 一些组件在用：放在他们共同的父组件上（**状态提升**）。 12 | 13 | 二、props适用于： 14 | 15 | ​ （1）父组件 ==> 子组件 通信。 16 | 17 | ​ （2）子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）。 18 | 19 | 三、使用 `v-model` 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！ 20 | 21 | 四、props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但是不推荐这样做。 -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RingoTangs/LearningNote/9f9c64ccb593a53e3199e844fac5c7166c192ef9/Vue/vue-2021/vue_test/src/assets/logo.png -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/components/Banner.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/components/BaseContent.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/main.js: -------------------------------------------------------------------------------- 1 | // 引入 Vue 2 | import Vue from 'vue' 3 | // 引入 App 组件 4 | import App from './App.vue' 5 | import router from './router' 6 | 7 | // 关闭 Vue 生产提示 8 | Vue.config.productionTip = false 9 | const vm = new Vue({ 10 | render: (h) => h(App), 11 | router, 12 | }) 13 | vm.$mount('#app') 14 | 15 | console.log('process.env.NODE_ENV:', process.env.NODE_ENV) 16 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/pages/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 33 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 36 | 37 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/pages/Message.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 35 | 36 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/pages/MessageDetails.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/pages/News.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/router/index.js: -------------------------------------------------------------------------------- 1 | import router from './router' 2 | import './navigation-guards' 3 | 4 | export default router 5 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/router/navigation-guards.js: -------------------------------------------------------------------------------- 1 | import router from './router' 2 | 3 | // 全局前置导航首位 4 | router.beforeEach((to, from, next) => { 5 | console.log('全局前置路由守卫'); 6 | next() 7 | }) 8 | 9 | // 全局后置导航首位来修改网站标题 10 | router.afterEach((to, from) => { 11 | console.log('全局后置路由守卫'); 12 | document.title = `${to.meta.title} - vue_test` 13 | }) 14 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/router/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import routes from './routes' 4 | 5 | Vue.use(VueRouter) 6 | 7 | // 解决重复点同一个路由报错问题 8 | // const originalPush = VueRouter.prototype.push 9 | // const originalReplace = VueRouter.prototype.replace 10 | // VueRouter.prototype.push = function push(location) { 11 | // return originalPush.call(this, location).catch((err) => err) 12 | // } 13 | // VueRouter.prototype.replace = function replace(location) { 14 | // return originalReplace.call(this, location).catch((err) => err) 15 | // } 16 | 17 | const router = new VueRouter({ 18 | routes, 19 | }) 20 | 21 | export default router 22 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/src/router/routes.js: -------------------------------------------------------------------------------- 1 | const routes = [ 2 | { 3 | path: '/', 4 | redirect: '/about', 5 | }, 6 | { 7 | path: '/about', 8 | name: 'About', 9 | meta: { title: '关于' }, 10 | component: () => import('../pages/About.vue'), 11 | }, 12 | { 13 | path: '/home', 14 | name: 'Home', 15 | meta: { title: '主页' }, 16 | component: () => import('../pages/Home.vue'), 17 | children: [ 18 | { 19 | path: 'news', 20 | name: 'News', 21 | meta: { title: '新闻' }, 22 | component: () => import('../pages/News.vue'), 23 | }, 24 | { 25 | path: 'message', 26 | name: 'Message', 27 | meta: { title: '消息' }, 28 | component: () => import('../pages/Message.vue'), 29 | children: [ 30 | { 31 | path: ':id', 32 | name: 'MessageDetails', 33 | meta: { title: '消息详情' }, 34 | component: () => import('../pages/MessageDetails'), 35 | // props 的第一种写法, 值为对象, 该对象中的所有 k-v 都会以 props 的形式传给 MessageDetails 组件 36 | // props: { a: 1, b: 'hello' }, 37 | 38 | // props 的第二种写法, 若值为 true, 就会把该路由组件收到的所有 params 参数, 以 props 的形式传给 Detail 组件 39 | // props: true, 40 | 41 | // props 的第三种写法, 值为函数 42 | // 连续解构赋值语句 43 | props: ({ params, query }) => ({ id: params.id, title: query.title }), 44 | }, 45 | ], 46 | }, 47 | ], 48 | }, 49 | ] 50 | 51 | export default routes 52 | -------------------------------------------------------------------------------- /Vue/vue-2021/vue_test/vue.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | 4 | function resolve(dir) { 5 | return path.join(__dirname, dir) 6 | } 7 | 8 | module.exports = { 9 | pages: { 10 | index: { 11 | // page 的入口 12 | entry: 'src/main.js', 13 | }, 14 | }, 15 | lintOnSave: false, // 关闭语法检查 16 | configureWebpack: { 17 | // 配置 webpack 路径解析别名 18 | resolve: { 19 | alias: { 20 | components: resolve('./src/components'), 21 | pages: resolve('./src/pages'), 22 | '@': resolve('/src'), 23 | }, 24 | }, 25 | }, 26 | // 开启代理服务器 27 | devServer: { 28 | proxy: { 29 | '/api': { 30 | target: 'http://localhost:8081', 31 | ws: true, // 支持 websocket 32 | // 用于控制请求头中的 host 值 33 | changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin 34 | pathRewrite: { 35 | // '^/api'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8081/api' 转接为 http://localhost:8081/ 36 | '^/api': '', 37 | }, 38 | }, 39 | }, 40 | }, 41 | } 42 | --------------------------------------------------------------------------------