vue教程目录（适合java程序员） 作者：马育民 • 2020-12-05 10:58 • 阅读：11685 # 基础 1. [vue介绍](https://www.malaoshi.top/show_1IXAFZmUi4Y.html "vue介绍") 2. [vscode vue插件](https://www.malaoshi.top/show_1IXOWj8UQpo.html "vscode vue插件") 3. [vue教程-下载和安装（开发版、生产版本）](https://www.malaoshi.top/show_1IX2ZiIv7OYZ.html "vue教程-下载和安装（开发版、生产版本）") 2. [vue教程-第一个程序](https://www.malaoshi.top/show_1IXAOcEboUq.html "vue教程-第一个程序") 3. [vue教程-$mount() 替代 el](https://www.malaoshi.top/show_1IX2ZiuW3BrB.html "vue教程-$mount() 替代 el") # [模板语法](https://www.malaoshi.top/show_1IXAPWH1S0a.html "vue教程-模板语法") 1. [前端页面渲染](https://www.malaoshi.top/show_1IXIDSvQP7f.html "前端页面渲染") 2. [vue教程-插值表达式](https://www.malaoshi.top/show_1IXIOm0wjdy.html "vue教程-插值表达式") ### [vue指令](https://www.malaoshi.top/show_1IXIDkwsHX2.html "vue指令") 1. [vue教程-模板语法-v-cloak指令（解决闪动）](https://www.malaoshi.top/show_1IXAQNkjBWR.html "vue教程-模板语法-v-cloak指令（解决闪动）") 2. [vue教程-v-text指令](https://www.malaoshi.top/show_1IXIPze8BlF.html "vue教程-v-text指令") 3. [vue教程-v-html指令填充html代码](https://www.malaoshi.top/show_1IXIR5rlUkI.html "vue教程-v-html指令填充html代码") 4. [vue教程-数据绑定、数据响应式和双向数据绑定](https://www.malaoshi.top/show_1IXIV8Fjvgj.html "vue教程-数据绑定、数据响应式和双向数据绑定") 5. [MVVM](https://www.malaoshi.top/show_1IXIV7wkHKi.html "MVVM") 6. [vue2教程-检测属性值原理](https://www.malaoshi.top/show_1IX2fHYOMO3w.html "vue2教程-检测属性值原理") # ajax请求 1. [axios介绍](https://www.malaoshi.top/show_1IXIYz8be68.html "axios介绍") - [axios get请求](https://www.malaoshi.top/show_1IXIZteqkMr.html "axios get请求") - [axios post请求](https://www.malaoshi.top/show_1IXIZt4apDp.html "axios post请求") 2. [vue教程：使用axios发送ajax请求](https://www.malaoshi.top/show_1IXIb4sLSeX.html "vue教程：使用axios发送ajax请求") 3. [vue教程-v-for指令（循环）](https://www.malaoshi.top/show_1IXIyE8oBGB.html "vue教程-v-for指令（循环）") # 模板语法 ### 条件语句 1. [vue教程：v-if、v-else-if、v-else指令](https://www.malaoshi.top/show_1IXNbNzH1Uf.html "vue教程：v-if、v-else-if、v-else指令") 2. [vue教程：v-show指令](https://www.malaoshi.top/show_1IXNc4gNHXG.html "vue教程：v-show指令") 3. [v-if vs v-show](https://www.malaoshi.top/show_1IXNc4TuFTE.html "v-if vs v-show") ### 其他 1. [vue教程-v-bind指令绑定标签属性](https://www.malaoshi.top/show_1IXNd3sFf37.html "vue教程-v-bind指令绑定标签属性") # 事件 2. [vue教程：v-on指令监听事件](https://www.malaoshi.top/show_1IXNlEquyhv.html "vue教程：v-on指令监听事件") 3. [vue教程-事件修饰符介绍](https://www.malaoshi.top/show_1IX2bPz7jE94.html "vue教程-事件修饰符介绍") 4. [vue教程-事件修饰符-阻止默认事件 .prevent](https://www.malaoshi.top/show_1IX2bQ9zHm6t.html "vue教程-事件修饰符-阻止默认事件 .prevent") 5. [vue教程-事件修饰符-阻止事件冒泡 .stop](https://www.malaoshi.top/show_1IX2bTHzcm3t.html "vue教程-事件修饰符-阻止事件冒泡 .stop") 6. [vue教程-事件修饰符-同时阻止默认事件 .prevent和事件冒泡 .stop](https://www.malaoshi.top/show_1IX2cIXbUo6P.html "vue教程-事件修饰符-同时阻止默认事件 .prevent和事件冒泡 .stop") 6. [vue教程：键盘事件v-on:keyup、v-on:keydown、@keyup、@keydown](https://www.malaoshi.top/show_1IX2bZFRguWI.html "vue教程：键盘事件v-on:keyup、v-on:keydown、@keyup、@keydown") 7. [vue案例：失去焦点时校验电话号码（手机号）](https://www.malaoshi.top/show_1IX3E3EdLunl.html "vue案例：失去焦点时校验电话号码（手机号）") ### 综合案例 1. [vue教程：循环数组、显示数据、添加事件（传id）](https://www.malaoshi.top/show_1IX2neRnf1zR.html "vue教程：循环数组、显示数据、添加事件（传id）") # 表单控件 3. [vue教程-v-model指令（表单控件）](https://www.malaoshi.top/show_1IXJVOns5gP.html "vue教程-v-model指令（表单控件）") 2. [vue教程-select 控件显示值、设置默认值](https://www.malaoshi.top/show_1IX2nhExlY9U.html "vue教程-select 控件显示值、设置默认值") 3. [vue教程-ref属性、$refs，获取元素、组件](https://www.malaoshi.top/show_1IX2pWHIdY4R.html "vue教程-ref属性、$refs，获取元素、组件") # [vue 综合案例（非单页面）目录](https://www.malaoshi.top/show_1IX2oqac9ANL.html "vue 综合案例（非多页面）目录") # 计算属性和侦听器 1. [vue教程-计算属性（computed）](https://www.malaoshi.top/show_1IX6lgNBvrSP.html "vue教程-计算属性（computed）") 2. [vue教程-侦听属性（监听属性）、侦听器（监听器）（watch）](https://www.malaoshi.top/show_1IX6lguvpO5O.html "vue教程-侦听属性（监听属性）、侦听器（监听器）（watch）") 3. [vue教程-计算属性（computed） vs 侦听属性（watch）](https://www.malaoshi.top/show_1IX2eveZiMXw.html "vue教程-计算属性（computed） vs 侦听属性（watch）") 4. [vue教程-methods 和 计算属性（computed）的区别](https://www.malaoshi.top/show_1IX36bH6Bvum.html "vue教程-methods 和 计算属性（computed）的区别") # class 与 style 绑定 1. [vue2教程-class绑定（v-bind:class）](https://www.malaoshi.top/show_1IX2fBrXerdF.html "vue2教程-class绑定（v-bind:class）") # 生命周期 1. [vue教程-生命周期](https://www.malaoshi.top/show_1IX2g0ry2qly.html "vue教程-生命周期") 2. [vue教程-发送ajax请求，放在生命周期的哪个钩子函数](https://www.malaoshi.top/show_1IX3J2ACDq9f.html "vue教程-发送ajax请求，放在生命周期的哪个钩子函数") # 组件 1. [vue教程：组件](https://www.malaoshi.top/show_1IXNoCaqRza.html "vue教程：组件") 2. [vue教程：全局组件（非单文件）](https://www.malaoshi.top/show_1IX2gxTGkahq.html "vue教程：全局组件（非单文件）") 3. [vue教程：组件命名](https://www.malaoshi.top/show_1IX2gxUNH3Pw.html "vue教程：组件命名") 4. [vue教程：为什么组件中 data 必须是函数](https://www.malaoshi.top/show_1IX3FtYnSP14.html "vue教程：为什么组件中 data 必须是函数") ### 给组件传值 1. [vue教程：全局组件（非单文件）-给组件传值（静态传值）](https://www.malaoshi.top/show_1IX6m2U6qx9P.html "vue教程：全局组件（非单文件）-给组件传值（静态传值）") 2. [vue教程：全局组件（非单文件）-给组件传值（动态传值）](https://www.malaoshi.top/show_1IX6m2aOXn7c.html "vue教程：全局组件（非单文件）-给组件传值（动态传值）") 3. [vue教程：全局组件（非单文件）-给组件传值（动态传值）-传数组](https://www.malaoshi.top/show_1IX6m2jSvXdm.html "vue教程：全局组件（非单文件）-给组件传值（动态传值）-传数组") ### 父子组件 5. [vue教程：父子组件（组件嵌套）](https://www.malaoshi.top/show_1IXQ1k5Q5qB.html "vue教程：父子组件（组件嵌套）") ### [vue教程：局部组件](https://www.malaoshi.top/show_1IXQ2KUo7Y5.html "vue教程：局部组件") # 单文件组件 1. [vue教程：单文件组件](https://www.malaoshi.top/show_1IXOW8x0vTo.html "vue教程：单文件组件") 2. [vue教程：单文件组件案例](https://www.malaoshi.top/show_1IXOXNuWRpT.html "vue教程：单文件组件案例") # [node.js 目录](https://www.malaoshi.top/show_1IXOVzOnBJ7.html "node.js 目录") # 工程化-vue cli 脚手架 1. [npm设置淘宝镜像](https://www.malaoshi.top/show_1IX2LbvJSWcd.html "npm设置淘宝镜像") 2. [vue教程：CLI脚手架介绍、安装、创建工程](https://www.malaoshi.top/show_1IXOXPJQLzW.html "vue教程：CLI脚手架介绍、安装、创建工程") - [vue-cli安装后，版本号始终是2.9.6](https://www.malaoshi.top/show_1IX44mjoSuaj.html "vue-cli安装后，版本号始终是2.9.6") - [Vue、Vue-cli、Vue-router、Vuex 版本对应关系](https://www.malaoshi.top/show_1IX2jl6fYAHk.html "Vue、Vue-cli、Vue-router、Vuex 版本对应关系") 3. [vue教程：CLI脚手架-命令方式创建第一个工程（manually select features方式）](https://www.malaoshi.top/show_1IX2oorR2ttF.html "vue教程：CLI脚手架-命令方式创建第一个工程（manually select features方式）") - [vue教程：CLI脚手架-命令方式创建第一个工程（Default方式）](https://www.malaoshi.top/show_1IX2hO0v9hzy.html "vue教程：CLI脚手架-命令方式创建第一个工程（Default方式）") - [vue教程：CLI脚手架修改默认包管理器为yarn或npm](https://www.malaoshi.top/show_1IX2hLP0Czsc.html "vue教程：CLI脚手架修改默认包管理器为yarn或npm") 4. [vue教程：CLI脚手架-web页面方式创建工程](https://www.malaoshi.top/show_1IX2hLU09Bzl.html "vue教程：CLI脚手架-web页面方式创建工程") 5. [vue教程：vue cli创建工程的目录说明](https://www.malaoshi.top/show_1IXOt7d8xsf.html "vue教程：vue cli创建工程的目录说明") 6. [vue教程：CLI脚手架-命令方式启动服务](https://www.malaoshi.top/show_1IX2hO52tT19.html "vue教程：CLI脚手架-命令方式启动服务") 7. [vue教程：npm命令和package.json](https://www.malaoshi.top/show_1IXOtismpAg.html "vue教程：npm命令和package.json") 8. [vue教程：编译发布（build）](https://www.malaoshi.top/show_1IX3GD4VS6re.html "vue教程：编译发布（build）") ### 文件解释 1. [vue教程：index.html说明](https://www.malaoshi.top/show_1IX2hWIPlSCp.html "vue教程：index.html说明") 2. [vue教程：main.js说明](https://www.malaoshi.top/show_1IX2hVuChiyA.html "vue教程：main.js说明") - [vue教程：import Vue from vue 的解释](https://www.malaoshi.top/show_1IX2hsjjOK4J.html "vue教程：import Vue from vue 的解释") - [vue教程：render: h => h(App) 的解释](https://www.malaoshi.top/show_1IX2htDuX1JO.html "vue教程：render: h => h(App) 的解释") 3. [vue教程：App.vue说明](https://www.malaoshi.top/show_1IX2hWRYXlr6.html "vue教程：App.vue说明") 4. [vue教程：vue.config.js文件说明](https://www.malaoshi.top/show_1IX2iFKa569O.html "vue教程：vue.config.js文件说明") - [vue教程：关闭语法检查（vue.config.js）](https://www.malaoshi.top/show_1IX2iG4MoOjv.html "vue教程：关闭语法检查（vue.config.js）") - [vue教程：修改端口号](https://www.malaoshi.top/show_1IXOtw0R1k5.html "vue教程：修改端口号") ### 组件 1. [vue教程：脚手架-创建第一个组件](https://www.malaoshi.top/show_1IX2ixl8sSlR.html "vue教程：脚手架-创建第一个组件") - [vue教程：组件名不能与html标签同名](https://www.malaoshi.top/show_1IX2jHvbvGKy.html "vue教程：组件名不能与html标签同名") ### 组件传递数据（props） 1. [vue教程-父组件向子组件传递数据（传递静态props）](https://www.malaoshi.top/show_1IX2j0Or9Px0.html "vue教程-父组件向子组件传递数据（传递静态props）") - [vue教程-组件的属性名不能是key](https://www.malaoshi.top/show_1IX2jI0tG9R8.html "vue教程-组件的属性名不能是key") 2. [vue教程-父组件向子组件传递数据（传递动态props）](https://www.malaoshi.top/show_1IX2j0Ua46hC.html "vue教程-父组件向子组件传递数据（传递动态props）") 3. [vue教程-props 检查类型、指定默认值、指定是否必填](https://www.malaoshi.top/show_1IX2jCE0DkwN.html "vue教程-props 检查类型、指定默认值、指定是否必填") 4. [vue教程：样式中 scoped 的作用](https://www.malaoshi.top/show_1IX2jLjjYOlm.html "vue教程：样式中 scoped 的作用") 5. [vue教程-props单向数据流](https://www.malaoshi.top/show_1IX454sepoY7.html "vue教程-props单向数据流") 6. [vue教程-父组件向子组件传递数据，子组件修改数据](https://www.malaoshi.top/show_1IX2jF1n0Wg7.html "vue教程-父组件向子组件传递数据，子组件修改数据") 7. [vue教程-子组件操作父组件的数据（通过自定义事件实现，$emit）](https://www.malaoshi.top/show_1IX2jZqwdACv.html "vue教程-子组件操作父组件的数据（通过自定义事件实现，$emit）") 8. [vue教程-兄弟组件传递数据，通过全局事件总线（EventBus）实现](https://www.malaoshi.top/show_1IX2jeujusKb.html "vue教程-兄弟组件传递数据，通过全局事件总线（EventBus）实现") # axios ### 基础 1. [axios介绍](https://www.malaoshi.top/show_1IXIYz8be68.html "axios介绍") 1. [vue教程-脚手架工程安装axios](https://www.malaoshi.top/show_1IX6ebqBo6Y0.html "vue教程-脚手架工程安装axios") 2. [vue教程-vue脚手架工程使用axios](https://www.malaoshi.top/show_1IX6ecQEzWhz.html "vue教程-vue脚手架工程使用axios") 2. [axios 对象 配置参数、params和data参数区别](https://www.malaoshi.top/show_1IX2uLW97N16.html "axios 对象 配置参数、params和data参数区别") 3. [axios 请求方法的别名](https://www.malaoshi.top/show_1IXIZqAaeJm.html "axios 请求方法的别名") - [axios get请求](https://www.malaoshi.top/show_1IXIZteqkMr.html "axios get请求") - [axios post请求](https://www.malaoshi.top/show_1IXIZt4apDp.html "axios post请求") - [axios post请求-FormData上传文件](https://www.malaoshi.top/show_1IX432ffakyd.html "axios post请求-FormData上传文件") - [vue 安装、使用 qs 处理参数](https://www.malaoshi.top/show_1IX2oYK9zXOe.html "vue 安装、使用 qs 处理参数") 6. [axios全局配置](https://www.malaoshi.top/show_1IXIantsrcJ.html "axios全局配置") 7. [axios 拦截器](https://www.malaoshi.top/show_1IX2orj6jkQh.html "axios 拦截器") ### 跨域 1. [axios跨域发请求携带cookie](https://www.malaoshi.top/show_1IX2mKFAXjFz.html "axios跨域发请求携带cookie") 2. [axios跨域发请求携带X-Requested-With，后端判断是否ajax请求](https://www.malaoshi.top/show_1IX46ZsMmg8T.html "axios跨域发请求携带X-Requested-With，后端判断是否ajax请求") # 插槽 1. [vue教程：插槽slot](https://www.malaoshi.top/show_1IX3I97RLfef.html "vue教程：插槽slot") 2. [vue教程：具名插槽slot（2.6以前废弃写法）](https://www.malaoshi.top/show_1IX3I9llD00D.html "vue教程：具名插槽slot（2.6以前废弃写法）") 3. [vue教程：作用域插槽](https://www.malaoshi.top/show_1IX3ID0v3Wp8.html "vue教程：作用域插槽") # 其他 2. [解决Cannot download win32-x64-83_binding.node](https://www.malaoshi.top/show_1IX2LjeyFaaJ.html "解决Cannot download win32-x64-83_binding.node") ### 常见错误 1. [vue教程：修改文件名大小写后报错：Already included file name 'xxx' differs from file name 'xxx'](https://www.malaoshi.top/show_1IX2iwMVCwXB.html "vue教程：修改文件名大小写后报错：Already included file name 'xxx' differs from file name 'xxx'") 2. [vue 报错 NavigationDuplicated：Avoided redundant navigation to current location](https://www.malaoshi.top/show_1IX3GinBUAJF.html "vue 报错 NavigationDuplicated：Avoided redundant navigation to current location") # 路由 1. [单页面应用（spa） VS 多页面应用](https://www.malaoshi.top/show_1IXO9u9rt2l.html "单页面应用（spa） VS 多页面应用") 2. [vue教程：路由和Vue Router](https://www.malaoshi.top/show_1IXOA0Cj5Bt.html "vue教程：路由和Vue Router") 3. [vue教程：安装Vue Router](https://www.malaoshi.top/show_1IX2jk1ZyKJe.html "vue教程：安装Vue Router") 4. [vue教程：路由案例（router-link标签、path跳转）](https://www.malaoshi.top/show_1IX2jxdPIZzD.html "vue教程：路由案例（router-link标签、path跳转）") 5. [vue教程：路由案例-重定向](https://www.malaoshi.top/show_1IX2k5WhLn7a.html "vue教程：路由案例-重定向") 6. [vue教程：嵌套路由（多级菜单）-（router-link标签、根据path跳转）](https://www.malaoshi.top/show_1IX2kUrXObgk.html "vue教程：嵌套路由（多级菜单）-（router-link标签、path跳转）") 7. [vue教程：命名路由-（router-link标签、根据路由名字跳转）](https://www.malaoshi.top/show_1IX2lEGHxOXT.html "vue教程：命名路由-（router-link标签、根据路由名字跳转）") ### 路由传参 1. [vue教程：路由传参-query方式](https://www.malaoshi.top/show_1IX2ks3CyD03.html "vue教程：路由传参-query方式") 2. [vue教程：路由传参-params方式](https://www.malaoshi.top/show_1IX2lQZLgy4o.html "vue教程：路由传参-params方式") ### 编程式导航 和 传参 1. [vue教程：路由-编程式导航（this.$router.push）](https://www.malaoshi.top/show_1IX2lbYBe7Mj.html "vue教程：路由-编程式导航（this.$router.push）") 2. [vue教程：路由-编程式导航传参-query方式](https://www.malaoshi.top/show_1IX2lw8sCOv0.html "vue教程：路由-编程式导航传参-query方式") 3. [vue教程：路由-编程式导航传参-params方式](https://www.malaoshi.top/show_1IX2lvRddDWh.html "vue教程：路由-编程式导航传参-params方式") 4. [vue教程：使用编程式导航，重复点击路由错误](https://www.malaoshi.top/show_1IX3Gismbx1M.html "vue教程：使用编程式导航，重复点击路由错误") # 使用Element组件库 7. [vue教程：使用Element组件库](https://www.malaoshi.top/show_1IXOuGlL4yG.html "vue教程：使用Element组件库") ### vue 管理后台 1. [vue-admin-template 目录](https://www.malaoshi.top/show_1IX2LobgPU2c.html "vue-admin-template 目录") # 扩展 1. [ECMAScript 和 JavaScript 的关系](https://www.malaoshi.top/show_1IXV31LU1et.html "ECMAScript 和 JavaScript 的关系") 2. [ES6 与 ECMAScript2015、ES2015的关系](https://www.malaoshi.top/show_1IXV3Hze96J.html "ES6 与 ECMAScript2015、ES2015的关系") 3. [babel介绍](https://www.malaoshi.top/show_1IXV7zfQmbv.html "babel介绍") 4. [ES6 模块化：javascript（js） import和export](https://www.malaoshi.top/show_1IXVBLF2Idx.html "ES6 模块化：javascript（js） import和export") 5. [webpack](https://www.malaoshi.top/show_1IXVNgv1c6d.html "webpack") 6. [vue教程：CLI脚手架修改默认包管理器为yarn或npm](https://www.malaoshi.top/show_1IX2hLP0Czsc.html "vue教程：CLI脚手架修改默认包管理器为yarn或npm") 7. [vue教程：.env环境变量配置文件（.env.development、.env.production）](https://www.malaoshi.top/show_1IX2pcgk2U8N.html "vue教程：.env环境变量配置文件（.env.development、.env.production）") 8. [vue的常用属性](https://www.malaoshi.top/show_1IX36bEIR2Mg.html "vue的常用属性") 9. [vue：动态设置div宽度、高度（动态获取屏幕可用宽度）](https://malaoshi.top/show_1IX6o8RBmWSQ.html "vue：动态设置div宽度、高度（动态获取屏幕可用宽度）") 10. [vue：.vue文件分离css、js代码](https://malaoshi.top/show_1IX6o5EvZjjP.html "vue：.vue文件分离css、js代码") 11. [vue：import 导入js文件](https://malaoshi.top/show_1IX6oADhWd4I.html vue：import 导入js文件") ### 其他指令 4. [vue教程-v-pre指令填充原始信息](https://www.malaoshi.top/show_1IXIRDBDDao.html "vue教程-v-pre指令填充原始信息") 原文出处：http://malaoshi.top/show_1IXAeUl5egm.html