单元3 组件基础_教学设计.pdfVIP

《Vue.js前端开发基础及项目化应用》

教学设计

课程名称：Vue.js前端开发基础及项目化应用

授课年级：2021级

授课学期：2023学年第一学期

教师姓名：某某老

2023年09月09日

课题计划

单元3组件基础6学时

名称学时

组件是Vue最强大的功能之一。组件是Vue应用程序的基本结构单

元，它可以扩展HTML元素，封装可重用的代码，提高代码的可复用性，

内容

使项目变得更易维护和管理。本单元将介绍组件的定义和注册，以及组件

分析

间数据传递、组件事件和动态组件的实现，并结合“自定义页面图标样式”

项目对组件基础知识进行巩固。

教学目1.理解组件的概念

标及基2.掌握组件定义方法和注册方法

本要求3.能够实现组件间数据传递

教学1.掌握组件定义方法和注册方法

重点2.能够实现组件间数据传递

教学

能够实现组件间数据传递

难点

教学

教学采用教师使用PPT讲解和案例示范相结合的方式

方式

第一课时

（组件的构成、组件定义、组件注册）

一、创设情境，引入Vue组件概念

1.教师通过应用场景描述，引出组件化开发思想

当一个网站的导航菜单会在多个页面中出现，若将导航菜单封装成组

件，则可在网站的不同页面中重复使用该组件，要有效提高开发效率。因

此，将一个网页应用拆分为多个小的功能块（组件），每个功能块负责实

教现对应的功能，并被以组件形式封装起来，在不同页面可重复使用，从而

学使得页面的管理和维护变得更加容易。

2.明确学习目标。

过

了解组件化开发思想

程了解Vue组件构成及其工作原理

掌握组件的定义方法

掌握组件的局部注册和全局注册方法

二、进行重点知识的讲解

1.教师根据课件，介绍Vue组件的构成，并使用代码进行演示。

（1）Vue应用程序由一个或多个组件构成。

（2）Vue组件的构成。

Template、Script和Style

（3）组件实现网页布局的工作过程。

（4）Template的用法。

2.教师根据课件，讲解Vue组件的使用流程。

（1）组件定义：利用JavaScript创建组件对象。

（2）组件注册：按照使用范围，对组件进行全局或局部注册，并给它起一

个组件注册名。

（3）组件调用：以组件注册名为元素名，在HTML页面中调用该组件。

3.教师根据课件，介绍组件的定义方法，并使用代码进行演示。

（1）组件的声明语法：

（2）使用案例讲解组件定义的具体过程。

4.教师根据课件，介绍组件的注册方法，并使用代码进行演示。

（1）全局注册语法

Vue应用实例.component(组件注册名,组件对象)

（2）使用案例讲解全局注册的具体过程。

（3）局部注册语法

components:{注册名:组件对象}

（4）使用案例讲解局部注册的具体过程。