vue教程目录（适合java程序员）-马育民老师

# 基础

1. [vue介绍](/show_1IXAFZmUi4Y.html "vue介绍")

2. [vscode vue插件](/show_1IXOWj8UQpo.html "vscode vue插件")

3. [vue教程-下载和安装（开发版、生产版本）](/show_1IX2ZiIv7OYZ.html "vue教程-下载和安装（开发版、生产版本）")

2. [vue教程-第一个程序](/show_1IXAOcEboUq.html "vue教程-第一个程序")

3. [vue教程-$mount() 替代 el](/show_1IX2ZiuW3BrB.html "vue教程-$mount() 替代 el")

# [模板语法](/show_1IXAPWH1S0a.html "vue教程-模板语法")

1. [前端页面渲染](/show_1IXIDSvQP7f.html "前端页面渲染")

2. [vue教程-插值表达式](/show_1IXIOm0wjdy.html "vue教程-插值表达式")

### [vue指令](/show_1IXIDkwsHX2.html "vue指令")

1. [vue教程-模板语法-v-cloak指令（解决闪动）](/show_1IXAQNkjBWR.html "vue教程-模板语法-v-cloak指令（解决闪动）")

2. [vue教程-v-text指令](/show_1IXIPze8BlF.html "vue教程-v-text指令")

3. [vue教程-v-html指令填充html代码](/show_1IXIR5rlUkI.html "vue教程-v-html指令填充html代码")

4. [vue教程-数据绑定、数据响应式和双向数据绑定](/show_1IXIV8Fjvgj.html "vue教程-数据绑定、数据响应式和双向数据绑定")

5. [MVVM](/show_1IXIV7wkHKi.html "MVVM")

6. [vue2教程-检测属性值原理](/show_1IX2fHYOMO3w.html "vue2教程-检测属性值原理")

### vue原理与实现

1. [vue原理与实现](/show_1IX6b9aC6NF9.html "vue原理与实现")

2. [vue原理与实现-输入框](/show_1IX6b9ahXFVB.html "vue原理与实现-输入框")

# 模板语法

### 条件语句

1. [vue教程：v-if、v-else-if、v-else指令](/show_1IXNbNzH1Uf.html "vue教程：v-if、v-else-if、v-else指令")

2. [vue教程：v-show指令](/show_1IXNc4gNHXG.html "vue教程：v-show指令")

3. [v-if vs v-show](/show_1IXNc4TuFTE.html "v-if vs v-show")

### 循环语句

1. [vue教程-v-for指令（循环）](/show_1IXIyE8oBGB.html "vue教程-v-for指令（循环）")

2. [vue教程：案例-v-for和v-if、v-else-if、v-else联合使用](/show_1IX8U31QE44H.html "vue教程：案例-v-for和v-if、v-else-if、v-else联合使用")

##### ajax请求

1. [axios介绍](/show_1IXIYz8be68.html "axios介绍")

- [axios get请求](/show_1IXIZteqkMr.html "axios get请求")

- [axios post请求](/show_1IXIZt4apDp.html "axios post请求")

2. [vue教程：使用axios发送ajax请求](/show_1IXIb4sLSeX.html "vue教程：使用axios发送ajax请求")

### 其他

1. [vue教程-v-bind指令绑定标签属性](/show_1IXNd3sFf37.html "vue教程-v-bind指令绑定标签属性")

# 事件

2. [vue教程：v-on指令监听事件](/show_1IXNlEquyhv.html "vue教程：v-on指令监听事件")

[vue教程：v-on指令监听事件-在方法中访问属性、修改属性](/show_1IX8U8jmQ7jW.html "vue教程：v-on指令监听事件-在方法中访问属性、修改属性")

[vue教程：案例-点击按钮实现切换div](/show_1IX8U4mJWvtc.html "vue教程：案例-点击按钮实现切换div")

3. [vue教程-事件修饰符介绍](/show_1IX2bPz7jE94.html "vue教程-事件修饰符介绍")

4. [vue教程-事件修饰符-阻止默认事件 .prevent](/show_1IX2bQ9zHm6t.html "vue教程-事件修饰符-阻止默认事件 .prevent")

6. [vue教程：综合案例-点击超链接实现切换div（超链接改样式）（事件对象、阻止默认行为）](/show_1IX8UPaFgkfm.html "vue教程：综合案例-点击超链接实现切换div（超链接改样式）（事件对象、阻止默认行为）")

5. [vue教程-事件修饰符-阻止事件冒泡 .stop](/show_1IX2bTHzcm3t.html "vue教程-事件修饰符-阻止事件冒泡 .stop")

6. [vue教程-事件修饰符-同时阻止默认事件 .prevent和事件冒泡 .stop](/show_1IX2cIXbUo6P.html "vue教程-事件修饰符-同时阻止默认事件 .prevent和事件冒泡 .stop")

7. [vue教程-事件修饰符-只触发一次.once](/show_1IX8UUbZmg3G.html "vue教程-事件修饰符-只触发一次.once")

8. [vue教程：键盘事件v-on:keyup、v-on:keydown、@keyup、@keydown](/show_1IX2bZFRguWI.html "vue教程：键盘事件v-on:keyup、v-on:keydown、@keyup、@keydown")

9. [vue案例：失去焦点时校验电话号码（手机号）](/show_1IX3E3EdLunl.html "vue案例：失去焦点时校验电话号码（手机号）")

### 综合案例

1. [vue教程：循环数组、显示数据、添加事件（传id）](/show_1IX2neRnf1zR.html "vue教程：循环数组、显示数据、添加事件（传id）")

# 表单控件

3. [vue教程-v-model指令（表单控件）](/show_1IXJVOns5gP.html "vue教程-v-model指令（表单控件）")

2. [vue教程-select 控件显示值、设置默认值](/show_1IX2nhExlY9U.html "vue教程-select 控件显示值、设置默认值")

3. [vue教程：案例-实现注册页面](/show_1IX8US2X6Ncn.html "vue教程：案例-实现注册页面")

4. [vue教程-ref属性、$refs，获取元素、组件](/show_1IX2pWHIdY4R.html "vue教程-ref属性、$refs，获取元素、组件")

# [vue 综合案例（非单页面）目录](/show_1IX2oqac9ANL.html "vue 综合案例（非多页面）目录")

# 计算属性和侦听器

1. [vue教程-计算属性（computed）](/show_1IX6lgNBvrSP.html "vue教程-计算属性（computed）")

2. [vue教程-侦听属性（监听属性）、侦听器（监听器）（watch）](/show_1IX6lguvpO5O.html "vue教程-侦听属性（监听属性）、侦听器（监听器）（watch）")

3. [vue教程-计算属性（computed） vs 侦听属性（watch）](/show_1IX2eveZiMXw.html "vue教程-计算属性（computed） vs 侦听属性（watch）")

4. [vue教程-methods 和 计算属性（computed）的区别](/show_1IX36bH6Bvum.html "vue教程-methods 和 计算属性（computed）的区别")

# class 与 style 绑定

1. [vue2教程-class绑定（v-bind:class）](/show_1IX2fBrXerdF.html "vue2教程-class绑定（v-bind:class）")

# 生命周期

1. [vue教程-生命周期](/show_1IX2g0ry2qly.html "vue教程-生命周期")

2. [vue教程-发送ajax请求，放在生命周期的哪个钩子函数](/show_1IX3J2ACDq9f.html "vue教程-发送ajax请求，放在生命周期的哪个钩子函数")

# 组件

1. [vue教程：组件](/show_1IXNoCaqRza.html "vue教程：组件")

2. [vue教程：全局组件（非单文件）](/show_1IX2gxTGkahq.html "vue教程：全局组件（非单文件）")

3. [vue教程：组件命名](/show_1IX2gxUNH3Pw.html "vue教程：组件命名")

4. [vue教程：为什么组件中 data 必须是函数](/show_1IX3FtYnSP14.html "vue教程：为什么组件中 data 必须是函数")

### 给组件传值

1. [vue教程：全局组件（非单文件）-给组件传值（静态传值）](/show_1IX6m2U6qx9P.html "vue教程：全局组件（非单文件）-给组件传值（静态传值）")

2. [vue教程：全局组件（非单文件）-给组件传值（动态传值）](/show_1IX6m2aOXn7c.html "vue教程：全局组件（非单文件）-给组件传值（动态传值）")

3. [vue教程：全局组件（非单文件）-给组件传值（动态传值）-传数组](/show_1IX6m2jSvXdm.html "vue教程：全局组件（非单文件）-给组件传值（动态传值）-传数组")

### 父子组件

5. [vue教程：父子组件（组件嵌套）](/show_1IXQ1k5Q5qB.html "vue教程：父子组件（组件嵌套）")

### [vue教程：局部组件](/show_1IXQ2KUo7Y5.html "vue教程：局部组件")

# 单文件组件

1. [vue教程：单文件组件](/show_1IXOW8x0vTo.html "vue教程：单文件组件")

2. [vue教程：单文件组件案例](/show_1IXOXNuWRpT.html "vue教程：单文件组件案例")

# [node.js 目录](/show_1IXOVzOnBJ7.html "node.js 目录")

# 工程化-vue cli 脚手架

1. [npm设置淘宝镜像](/show_1IX2LbvJSWcd.html "npm设置淘宝镜像")

2. [vue教程：CLI脚手架介绍、安装、创建工程](/show_1IXOXPJQLzW.html "vue教程：CLI脚手架介绍、安装、创建工程")

- [vue-cli安装后，版本号始终是2.9.6](/show_1IX44mjoSuaj.html "vue-cli安装后，版本号始终是2.9.6")

- [Vue、Vue-cli、Vue-router、Vuex 版本对应关系](/show_1IX2jl6fYAHk.html "Vue、Vue-cli、Vue-router、Vuex 版本对应关系")

3. [vue教程：CLI脚手架-命令方式创建第一个工程（manually select features方式）](/show_1IX2oorR2ttF.html "vue教程：CLI脚手架-命令方式创建第一个工程（manually select features方式）")

- [vue教程：CLI脚手架-命令方式创建第一个工程（Default方式）](/show_1IX2hO0v9hzy.html "vue教程：CLI脚手架-命令方式创建第一个工程（Default方式）")

- [vue教程：CLI脚手架修改默认包管理器为yarn或npm](/show_1IX2hLP0Czsc.html "vue教程：CLI脚手架修改默认包管理器为yarn或npm")

4. [vue教程：CLI脚手架-web页面方式创建工程](/show_1IX2hLU09Bzl.html "vue教程：CLI脚手架-web页面方式创建工程")

5. [vue教程：vue cli创建工程的目录说明](/show_1IXOt7d8xsf.html "vue教程：vue cli创建工程的目录说明")

6. [vue教程：CLI脚手架-命令方式启动服务](/show_1IX2hO52tT19.html "vue教程：CLI脚手架-命令方式启动服务")

7. [vue教程：npm命令和package.json](/show_1IXOtismpAg.html "vue教程：npm命令和package.json")

8. [vue教程：编译发布（build）](/show_1IX3GD4VS6re.html "vue教程：编译发布（build）")

### 文件解释

1. [vue教程：index.html说明](/show_1IX2hWIPlSCp.html "vue教程：index.html说明")

2. [vue教程：main.js说明](/show_1IX2hVuChiyA.html "vue教程：main.js说明")

- [vue教程：import Vue from vue 的解释](/show_1IX2hsjjOK4J.html "vue教程：import Vue from vue 的解释")
 
 - [vue教程：render: h => h(App) 的解释](/show_1IX2htDuX1JO.html "vue教程：render: h => h(App) 的解释")

3. [vue教程：App.vue说明](/show_1IX2hWRYXlr6.html "vue教程：App.vue说明")

4. [vue教程：vue.config.js文件说明](/show_1IX2iFKa569O.html "vue教程：vue.config.js文件说明")

- [vue教程：关闭语法检查（vue.config.js）](/show_1IX2iG4MoOjv.html "vue教程：关闭语法检查（vue.config.js）")

- [vue教程：修改端口号](/show_1IXOtw0R1k5.html "vue教程：修改端口号")

### 组件

1. [vue教程：脚手架-第一个组件-将商品列表改为单文件组件](/show_1IX8aRTc5AYO.html "vue教程：脚手架-第一个组件-将商品列表改为单文件组件")
 - [vue教程：组件名不能与html标签同名](/show_1IX2jHvbvGKy.html "vue教程：组件名不能与html标签同名")
 
2. [vue教程：脚手架-商品列表组件-给组件传值（静态传值）](/show_1IX8aS3Jl3bL.html "vue教程：脚手架-商品列表组件-给组件传值（静态传值）")

3. [vue教程：脚手架-商品列表组件-给组件传值（动态传值）](/show_1IX8aSLqsPwj.html "vue教程：脚手架-商品列表组件-给组件传值（动态传值）")

4. [vue教程：脚手架-商品列表组件-给组件传值（动态传值）-传数组](/show_1IX8aSRCiaOy.html "vue教程：脚手架-商品列表组件-给组件传值（动态传值）-传数组")

5. [vue教程：脚手架-创建第一个组件](/show_1IX2ixl8sSlR.html "vue教程：脚手架-创建第一个组件")

### 组件传递数据（props）

1. [vue教程-父组件向子组件传递数据（传递静态props）](/show_1IX2j0Or9Px0.html "vue教程-父组件向子组件传递数据（传递静态props）")

- [vue教程-组件的属性名不能是key](/show_1IX2jI0tG9R8.html "vue教程-组件的属性名不能是key")

2. [vue教程-父组件向子组件传递数据（传递动态props）](/show_1IX2j0Ua46hC.html "vue教程-父组件向子组件传递数据（传递动态props）")

3. [vue教程-props 检查类型、指定默认值、指定是否必填](/show_1IX2jCE0DkwN.html "vue教程-props 检查类型、指定默认值、指定是否必填")

4. [vue教程：样式中 scoped 的作用](/show_1IX2jLjjYOlm.html "vue教程：样式中 scoped 的作用")

5. [vue教程-props单向数据流](/show_1IX454sepoY7.html "vue教程-props单向数据流")

6. [vue教程-父组件向子组件传递数据，子组件修改数据](/show_1IX2jF1n0Wg7.html "vue教程-父组件向子组件传递数据，子组件修改数据")

7. [vue教程-子组件操作父组件的数据（通过自定义事件实现，$emit）](/show_1IX2jZqwdACv.html "vue教程-子组件操作父组件的数据（通过自定义事件实现，$emit）")

8. [vue教程-兄弟组件传递数据，通过全局事件总线（EventBus）实现](/show_1IX2jeujusKb.html "vue教程-兄弟组件传递数据，通过全局事件总线（EventBus）实现")

# axios

### 基础

1. [axios介绍](/show_1IXIYz8be68.html "axios介绍")

1. [vue教程-脚手架工程安装axios](/show_1IX6ebqBo6Y0.html "vue教程-脚手架工程安装axios")

2. [vue教程-vue脚手架工程使用axios](/show_1IX6ecQEzWhz.html "vue教程-vue脚手架工程使用axios")

- [vue教程-vue脚手架工程使用axios-挂载到vue对象下](/show_1IX6ecQEzWhz.html "vue教程-vue脚手架工程使用axios-挂载到vue对象下")

2. [axios 对象 配置参数、params和data参数区别](/show_1IX2uLW97N16.html "axios 对象 配置参数、params和data参数区别")

3. [axios 请求方法的别名](/show_1IXIZqAaeJm.html "axios 请求方法的别名")

- [axios get请求](/show_1IXIZteqkMr.html "axios get请求")

- [axios post请求](/show_1IXIZt4apDp.html "axios post请求")

- [axios post请求-FormData上传文件](/show_1IX432ffakyd.html "axios post请求-FormData上传文件")

- [vue 安装、使用 qs 处理参数](/show_1IX2oYK9zXOe.html "vue 安装、使用 qs 处理参数")

6. [axios全局配置](/show_1IXIantsrcJ.html "axios全局配置")

7. [axios 拦截器](/show_1IX2orj6jkQh.html "axios 拦截器")

### 跨域

1. [axios跨域发请求携带cookie](/show_1IX2mKFAXjFz.html "axios跨域发请求携带cookie")

2. [axios跨域发请求携带X-Requested-With，后端判断是否ajax请求](/show_1IX46ZsMmg8T.html "axios跨域发请求携带X-Requested-With，后端判断是否ajax请求")

# 插槽

1. [vue教程：插槽slot](/show_1IX3I97RLfef.html "vue教程：插槽slot")

2. [vue教程：具名插槽slot（2.6以前废弃写法）](/show_1IX3I9llD00D.html "vue教程：具名插槽slot（2.6以前废弃写法）")

3. [vue教程：作用域插槽](/show_1IX3ID0v3Wp8.html "vue教程：作用域插槽")

# 其他

2. [解决Cannot download win32-x64-83_binding.node](/show_1IX2LjeyFaaJ.html "解决Cannot download win32-x64-83_binding.node")

### 常见错误

1. [vue教程：修改文件名大小写后报错：Already included file name 'xxx' differs from file name 'xxx'](/show_1IX2iwMVCwXB.html "vue教程：修改文件名大小写后报错：Already included file name 'xxx' differs from file name 'xxx'")

2. [vue 报错 NavigationDuplicated：Avoided redundant navigation to current location](/show_1IX3GinBUAJF.html "vue 报错 NavigationDuplicated：Avoided redundant navigation to current location")

# 路由

1. [单页面应用（spa） VS 多页面应用](/show_1IXO9u9rt2l.html "单页面应用（spa） VS 多页面应用")

2. [vue教程：路由和Vue Router](/show_1IXOA0Cj5Bt.html "vue教程：路由和Vue Router")

3. [vue教程：安装Vue Router](/show_1IX2jk1ZyKJe.html "vue教程：安装Vue Router")

4. [vue教程：路由案例（router-link标签、path跳转）](/show_1IX2jxdPIZzD.html "vue教程：路由案例（router-link标签、path跳转）")

5. [vue教程：路由案例-重定向](/show_1IX2k5WhLn7a.html "vue教程：路由案例-重定向")

6. [vue教程：嵌套路由（多级菜单）-（router-link标签、根据path跳转）](/show_1IX2kUrXObgk.html "vue教程：嵌套路由（多级菜单）-（router-link标签、path跳转）")

7. [vue教程：命名路由-（router-link标签、根据路由名字跳转）](/show_1IX2lEGHxOXT.html "vue教程：命名路由-（router-link标签、根据路由名字跳转）")

### 路由传参

1. [vue教程：路由传参-query方式](/show_1IX2ks3CyD03.html "vue教程：路由传参-query方式")

2. [vue教程：路由传参-params方式](/show_1IX2lQZLgy4o.html "vue教程：路由传参-params方式")

### 编程式导航 和 传参

1. [vue教程：路由-编程式导航（this.$router.push）](/show_1IX2lbYBe7Mj.html "vue教程：路由-编程式导航（this.$router.push）")

2. [vue教程：路由-编程式导航传参-query方式](/show_1IX2lw8sCOv0.html "vue教程：路由-编程式导航传参-query方式")

3. [vue教程：路由-编程式导航传参-params方式](/show_1IX2lvRddDWh.html "vue教程：路由-编程式导航传参-params方式")

4. [vue教程：使用编程式导航，重复点击路由错误](/show_1IX3Gismbx1M.html "vue教程：使用编程式导航，重复点击路由错误")

# 使用Element组件库

7. [vue教程：使用Element组件库](/show_1IXOuGlL4yG.html "vue教程：使用Element组件库")

### vue 管理后台

1. [vue-admin-template 目录](/show_1IX2LobgPU2c.html "vue-admin-template 目录")

# 扩展

1. [ECMAScript 和 JavaScript 的关系](/show_1IXV31LU1et.html "ECMAScript 和 JavaScript 的关系")

2. [ES6 与 ECMAScript2015、ES2015的关系](/show_1IXV3Hze96J.html "ES6 与 ECMAScript2015、ES2015的关系")

3. [babel介绍](/show_1IXV7zfQmbv.html "babel介绍")

4. [ES6 模块化：javascript（js） import和export](/show_1IXVBLF2Idx.html "ES6 模块化：javascript（js） import和export")

5. [webpack](/show_1IXVNgv1c6d.html "webpack")

6. [vue教程：CLI脚手架修改默认包管理器为yarn或npm](/show_1IX2hLP0Czsc.html "vue教程：CLI脚手架修改默认包管理器为yarn或npm")

7. [vue教程：.env环境变量配置文件（.env.development、.env.production）](/show_1IX2pcgk2U8N.html "vue教程：.env环境变量配置文件（.env.development、.env.production）")

8. [vue的常用属性](/show_1IX36bEIR2Mg.html "vue的常用属性")

9. [vue：动态设置div宽度、高度（动态获取屏幕可用宽度）](/show_1IX6o8RBmWSQ.html "vue：动态设置div宽度、高度（动态获取屏幕可用宽度）")

10. [vue：.vue文件分离css、js代码](/show_1IX6o5EvZjjP.html "vue：.vue文件分离css、js代码")

11. [vue：import 导入js文件](/show_1IX6oADhWd4I.html vue：import 导入js文件")

### 其他指令

4. [vue教程-v-pre指令填充原始信息](/show_1IXIRDBDDao.html "vue教程-v-pre指令填充原始信息")

原文出处：http://malaoshi.top/show_1IXAeUl5egm.html