您正在学习的是试看内容,报名后可学习全部内容 报名课程
人气值 6.7k

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