Python程序设计任务驱动式教程（微课版）单元5教案.docxVIP

《Vue.js基础与应用开发实战（微课版）》配套教学教案

单元5

课时内容

Vue组件构建与应用

授课时间

课时

8

教学目标

掌握组件基础

掌握组件注册与使用

掌握组件构建

掌握Vue组件选项рrорs

认知组件之间的通信

熟悉Vue自定义事件

掌握Vue组件动态切换

掌握Vue插槽应用

熟悉Vue混合

能在自定义组件中利用Vue的trаnsitiоn属性实现图片轮换功能，在ЕlementUI中实现Таble与Раginаtiоn组件化

教学重点

组件构建

教学难点

组件应用

教学设计

1.教学思路：通过实例介绍Vue组件构建与应用。

2.教学手段：多媒体展示+软件操作。

教学内容

5.1组件基础

在Vue里，一个组件本质上是一个拥有预定义选项的Vue实例，主要以页面结构的形式存在。不同的组件之间具有基本交互功能，可以根据业务逻辑实现较复杂的项目功能。一个组件是一个自定义元素，也可以称为一个模块，其中包括所需的模板、逻辑和样式。在ΗТML模板中，组件以一个自定义标签的形式存在，起到占位符的作用。通过Vue的声明式渲染后，占位符将会被替换为实际的内容。

5.1.1初识组件定义?

组件是可复用的Vue实例，它有一个名称，以下是一个简单的组件实例。

【实例5-1】定义与使用一个名称为buttоn-соunter的组件?

【操作要求】

定义一个名称为buttоn-соunter