组合火力的威力——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 样式重新造轮子的需求。

购买须知:
1、本课程为虚拟产品,一经购买,概不退款(讲师特别声明除外)
2、在使用过程中,遇到任何问题,请邮件联系:pr@sifou.com
3、划线价说明:商品展示的划横线价格为参考价,并非原价。该价格仅供您参考。

版权声明:讲者在本产品上发表的全部原创内容(包括但不限于文字、视频、图片等)著作权均归讲师本人所有。未经讲师授权许可,观众用户不得以任何载体或形式使用讲师的内容。

3.8 5条评价

编程两年半 · 2020-04-15

不理想很多问题没看到解决思路,页面中存在多个dropdown时打开另一个dropdown怎么关闭已被打开的?

悠然见南山 · 2018-07-26

通俗易懂

Alexee · 2017-11-26

适合新手,也算是给了个构造vue组件的思路

轮回韩 · 2017-07-03

讲得不好

fish · 2017-06-29