# vue2x

**Repository Path**: envythink/vue2x

## Basic Information

- **Project Name**: vue2x
- **Description**: vue2.x系列从入门到进阶学习记录。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2x介绍
vue2.x系列从入门到进阶学习记录。所有项目代码存在html目录中。

# 基础学习目录结构说明
### 第三章、计算属性
- 1、[计算属性](https://gitee.com/envythink/vue2x/blob/master/html/3%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7/1%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.html)
- 2、[修改默认计算属性](https://gitee.com/envythink/vue2x/blob/master/html/3%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7/2%E3%80%81%E4%BF%AE%E6%94%B9%E9%BB%98%E8%AE%A4%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7.html)
- 3、[计算属性依赖其他实例](https://gitee.com/envythink/vue2x/blob/master/html/3%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7/3%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E4%BE%9D%E8%B5%96%E5%85%B6%E4%BB%96%E5%AE%9E%E4%BE%8B.html)
- 4、[计算属性和methods对比](https://gitee.com/envythink/vue2x/blob/master/html/3%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7/4%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%92%8Cmethods%E5%AF%B9%E6%AF%94.html)
- 5、[计算属性更新购物车](https://gitee.com/envythink/vue2x/blob/master/html/3%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7/5%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E6%9B%B4%E6%96%B0%E8%B4%AD%E7%89%A9%E8%BD%A6.html)
### 第四章、V-bind指令
- 1、[绑定class___对象语法](https://gitee.com/envythink/vue2x/blob/master/html/4%E3%80%81V-bind%E6%8C%87%E4%BB%A4/1%E3%80%81%E7%BB%91%E5%AE%9Aclass___%E5%AF%B9%E8%B1%A1%E8%AF%AD%E6%B3%95.html)
- 2、[绑定class___数组语法](https://gitee.com/envythink/vue2x/blob/master/html/4%E3%80%81V-bind%E6%8C%87%E4%BB%A4/2%E3%80%81%E7%BB%91%E5%AE%9Aclass___%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95.html)
- 3、[绑定class___在组件上使用](https://gitee.com/envythink/vue2x/blob/master/html/4%E3%80%81V-bind%E6%8C%87%E4%BB%A4/3%E3%80%81%E7%BB%91%E5%AE%9Aclass___%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8.html)
- 4、[绑定内联样式style](https://gitee.com/envythink/vue2x/blob/master/html/4%E3%80%81V-bind%E6%8C%87%E4%BB%A4/4%E3%80%81%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8Fstyle.html)
### 第五章、指令介绍
- 1、[v-cloak](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/1%E3%80%81v-cloak.html)
- 2、[v-once](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/2%E3%80%81v-once.html)
- 3、[v-if](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/3%E3%80%81v-if.html)
- 4、[v-show](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/4%E3%80%81v-show.html)
- 5、[v-for](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/5%E3%80%81v-for.html)
- 6、[v-for数组更新](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/6%E3%80%81v-for%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0.html)
- 7、[v-for过滤与排序](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/7%E3%80%81v-for%E8%BF%87%E6%BB%A4%E4%B8%8E%E6%8E%92%E5%BA%8F.html)
- 8、[方法与事件及修饰符](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/8%E3%80%81%E6%96%B9%E6%B3%95%E4%B8%8E%E4%BA%8B%E4%BB%B6%E5%8F%8A%E4%BF%AE%E9%A5%B0%E7%AC%A6.html)
- 9、[购物车实战](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/9%E3%80%81%E8%B4%AD%E7%89%A9%E8%BD%A6%E5%AE%9E%E6%88%98.html)
- 10、[购物车升级](https://gitee.com/envythink/vue2x/blob/master/html/5%E3%80%81%E6%8C%87%E4%BB%A4%E4%BB%8B%E7%BB%8D/10%E3%80%81%E8%B4%AD%E7%89%A9%E8%BD%A6%E5%8D%87%E7%BA%A7.html)
### 第六章、表单与v-model
- 1、[基本用法_单选框](https://gitee.com/envythink/vue2x/blob/master/html/6%E3%80%81%E8%A1%A8%E5%8D%95%E4%B8%8Ev-model/1%E3%80%81%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95_%E5%8D%95%E9%80%89%E6%A1%86.html)
- 2、[基本用法_复选框](https://gitee.com/envythink/vue2x/blob/master/html/6%E3%80%81%E8%A1%A8%E5%8D%95%E4%B8%8Ev-model/2%E3%80%81%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95_%E5%A4%8D%E9%80%89%E6%A1%86.html)
- 3、[基本用法_下拉框](https://gitee.com/envythink/vue2x/blob/master/html/6%E3%80%81%E8%A1%A8%E5%8D%95%E4%B8%8Ev-model/3%E3%80%81%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95_%E4%B8%8B%E6%8B%89%E6%A1%86.html)
- 4、[绑定值](https://gitee.com/envythink/vue2x/blob/master/html/6%E3%80%81%E8%A1%A8%E5%8D%95%E4%B8%8Ev-model/4%E3%80%81%E7%BB%91%E5%AE%9A%E5%80%BC.html)
- 5、[修饰符](https://gitee.com/envythink/vue2x/blob/master/html/6%E3%80%81%E8%A1%A8%E5%8D%95%E4%B8%8Ev-model/5%E3%80%81%E4%BF%AE%E9%A5%B0%E7%AC%A6.html)
### 第七章、组件详解
- 1、[入门](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/1%E3%80%81%E5%85%A5%E9%97%A8.html)
- 2、[is挂载组件](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/2%E3%80%81is%E6%8C%82%E8%BD%BD%E7%BB%84%E4%BB%B6.html)
- 3、[使用props传递数据__基本使用](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/3%E3%80%81%E4%BD%BF%E7%94%A8props%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE__%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html)
- 4、[使用props传递数据__单向数据流](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/4%E3%80%81%E4%BD%BF%E7%94%A8props%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE__%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81.html)
- 5、[使用props传递数据__数据验证](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/5%E3%80%81%E4%BD%BF%E7%94%A8props%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE__%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81.html)
- 6、[组件通信__自定义事件](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/6%E3%80%81%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1__%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.html)
- 7、[组件通信__自定义事件使用v-model](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/7%E3%80%81%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1__%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%E4%BD%BF%E7%94%A8v-model.html)
- 8、[组件通信__非父子组件之间通信](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/8%E3%80%81%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1__%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E9%80%9A%E4%BF%A1.html)
- 9、[使用slot分发内容__入门](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/9%E3%80%81%E4%BD%BF%E7%94%A8slot%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9__%E5%85%A5%E9%97%A8.html)
- 10、[使用slot分发内容__slot的用法](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/10%E3%80%81%E4%BD%BF%E7%94%A8slot%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9__slot%E7%9A%84%E7%94%A8%E6%B3%95.html)
- 11、[使用slot分发内容__作用域插槽](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/11%E3%80%81%E4%BD%BF%E7%94%A8slot%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9__%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD.html)
- 12、[使用slot分发内容__访问slot](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/12%E3%80%81%E4%BD%BF%E7%94%A8slot%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9__%E8%AE%BF%E9%97%AEslot.html)
- 13、[组件高级用法__递归组件](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/13%E3%80%81%E7%BB%84%E4%BB%B6%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95__%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6.html)
- 14、[组件高级用法__内联模板](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/14%E3%80%81%E7%BB%84%E4%BB%B6%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95__%E5%86%85%E8%81%94%E6%A8%A1%E6%9D%BF.html)
- 15、[组件高级用法__动态组件](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/15%E3%80%81%E7%BB%84%E4%BB%B6%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95__%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6.html)
- 16、[组件高级用法__异步组件](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/16%E3%80%81%E7%BB%84%E4%BB%B6%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95__%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6.html)
- 17、[其他__nextTick](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/17%E3%80%81%E5%85%B6%E4%BB%96__nextTick.html)
- 18、[其他__X-Template](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/18%E3%80%81%E5%85%B6%E4%BB%96__X-Template.html)
- 19、[其他__手动挂载实例](https://gitee.com/envythink/vue2x/blob/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/19%E3%80%81%E5%85%B6%E4%BB%96__%E6%89%8B%E5%8A%A8%E6%8C%82%E8%BD%BD%E5%AE%9E%E4%BE%8B.html)
### 第八章、自定义指令
- 1、[基本用法](https://gitee.com/envythink/vue2x/blob/master/html/8%E3%80%81%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4/1%E3%80%81%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95.html)
- 2、[开发一个可从外部关闭的下拉菜单](https://gitee.com/envythink/vue2x/tree/master/html/8%E3%80%81%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4/%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E5%8F%AF%E4%BB%8E%E5%A4%96%E9%83%A8%E5%85%B3%E9%97%AD%E7%9A%84%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95)
- 3、[开发一个实时时间转换指令v-time](https://gitee.com/envythink/vue2x/tree/master/html/8%E3%80%81%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4/%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E5%AE%9E%E6%97%B6%E6%97%B6%E9%97%B4%E8%BD%AC%E6%8D%A2%E6%8C%87%E4%BB%A4v-time)
### 第九章、Render函数
- 2、[什么是Render函数](https://gitee.com/envythink/vue2x/blob/master/html/9%E3%80%81Render%E5%87%BD%E6%95%B0/2%E3%80%81%E4%BB%80%E4%B9%88%E6%98%AFRender%E5%87%BD%E6%95%B0.html)
- 3、[createElement用法](https://gitee.com/envythink/vue2x/blob/master/html/9%E3%80%81Render%E5%87%BD%E6%95%B0/3%E3%80%81createElement%E7%94%A8%E6%B3%95.html)
- 4、[约束](https://gitee.com/envythink/vue2x/blob/master/html/9%E3%80%81Render%E5%87%BD%E6%95%B0/4%E3%80%81%E7%BA%A6%E6%9D%9F.html)
- 5、[使用JavaScript代替模板功能](https://gitee.com/envythink/vue2x/blob/master/html/9%E3%80%81Render%E5%87%BD%E6%95%B0/5%E3%80%81%E4%BD%BF%E7%94%A8JavaScript%E4%BB%A3%E6%9B%BF%E6%A8%A1%E6%9D%BF%E5%8A%9F%E8%83%BD.html)
- 6、[函数化组件](https://gitee.com/envythink/vue2x/blob/master/html/9%E3%80%81Render%E5%87%BD%E6%95%B0/6%E3%80%81%E5%87%BD%E6%95%B0%E5%8C%96%E7%BB%84%E4%BB%B6.html)
- 7、[JSX](https://gitee.com/envythink/vue2x/blob/master/html/9%E3%80%81Render%E5%87%BD%E6%95%B0/7%E3%80%81JSX.html)
### 第十章、webpack
- 1、[webpack简介](https://gitee.com/envythink/vue2x/blob/master/html/10%E3%80%81webpack/1%E3%80%81webpack%E7%AE%80%E4%BB%8B.html)
- 2、[demo](https://gitee.com/envythink/vue2x/tree/master/html/10%E3%80%81webpack/demo)
### 第十一章、Plugin
- 1、[插件简说](https://gitee.com/envythink/vue2x/blob/master/html/11%E3%80%81Plugin/1%E3%80%81%E6%8F%92%E4%BB%B6%E7%AE%80%E8%AF%B4.html)
- 2、[demo](https://gitee.com/envythink/vue2x/tree/master/html/11%E3%80%81Plugin/demo)

# 实战练习目录结构说明
- 1、[简易购物车]()
- 2、[数字输入框组件](https://gitee.com/envythink/vue2x/tree/master/html/7%E3%80%81%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3/%E7%BB%84%E4%BB%B6%E5%AE%9E%E6%88%98___%E6%95%B0%E5%AD%97%E8%BE%93%E5%85%A5%E6%A1%86)
- 3、[简易购物车]()
- 4、[开发一个可从外部关闭的下拉菜单](https://gitee.com/envythink/vue2x/tree/master/html/8%E3%80%81%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4/%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E5%8F%AF%E4%BB%8E%E5%A4%96%E9%83%A8%E5%85%B3%E9%97%AD%E7%9A%84%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95)
- 5、[开发一个实时时间转换指令v-time](https://gitee.com/envythink/vue2x/tree/master/html/8%E3%80%81%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4/%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%E5%AE%9E%E6%97%B6%E6%97%B6%E9%97%B4%E8%BD%AC%E6%8D%A2%E6%8C%87%E4%BB%A4v-time)
- 6、[调查问卷WebApp]()
- 7、[使用Render函数开发可排序的表格组件]()
- 8、[留言列表]()
- 9、[中央事件总线插件vue-bus]()