组合火力的威力——Vue Dropdown 组件开发示例

Vue.js 自问世以来，就以其简洁、优雅和强大征服了无数的开发者，虽然其 API 极其简洁，但却并不简单。
其中，Vue 实例数据的类型（广义）就包括 data 数据、props 数据和计算属性；对于数据变化的追踪，可以通过模板中声明式的数据绑定实现自动追踪，也可以根据需要创建 watcher；此外，其事件绑定支持原生事件的绑定和自定义事件的绑定，并且可以通过各种修饰符简化事件响应代码的开发。
这些看似简单的特性通过组合，可以发挥极大的威力。
本次讲座通过一个 Dropdown 组件开发的演练，展示 Vue 框架在类绑定语法、数据、响应、事件、组件内容、父子组件间通信以及生命周期钩子等方面多种组合火力的威力，解决了如下组件开发中遭遇的问题：

1. 下拉列表如何打开、关闭，如何同时绑定由布尔数据控制的开关类和采用字符串传递的位置类？
2. 选择下拉选项时关闭下拉列表，事件绑定在哪里，下拉选项自身的事件如何绑定？
3. 如何区分根级及子级下拉菜单进行位置合法性校验，并将非法属性值改为默认值？
4. 点击外部时关闭下拉列表，事件绑定在哪里，组件销毁后，如何解除事件绑定？
5. 多级下拉菜单，子级关闭，关闭状态如何“冒泡”？
6. 多级下拉菜单，如何阻止子级的切换按钮点击事件冒泡？
7. 多级下拉菜单，父级关闭，子级如何“联动”关闭？
8. 多级下拉菜单，选择下拉选项时不关闭，则选择兄弟选项时，如何关闭次级菜单？

直播时长：
　　60分钟左右
面向人群：

1. 有一定 Vue 开发基础，熟悉其声明式模板语法，了解实例数据、计算属性、watcher……概念和使用方法，了解事件绑定方法及常用修饰符。
2. 了解 Vue 组件开发，了解组件 props 选项、父子组件间通信方式、通过 slot 进行内容分发。
3. 对于开发通用 UI 组件感兴趣，或者工作中有基于现有 UI 样式重新造轮子的需求。