Vuejs基础与应用开发实战（微课版） 单元5教案.pdfVIP

《Vue.js基础与应用开发实战(微课版)》配

套教学教案

单元5

课时内Vue组件构建与应用授课时间课时8

•掌握组件基础

•掌握组件注册与使用

•掌握组件构建

•掌握Vue组件选项props

•认知组件之间的通信

教学目标•熟悉Vue自定义事件

•掌握Vue组件动态切换

•掌握Vue插槽应用

•熟悉Vue混合

•能在自定义组件中利用Vue的transition属性实现图片轮换功能，在Element

UI中实现Table与Pagination组件化

教学重点组件构建

教学难点组件应用

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

教学设计

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

教学内

5.1组件基础

在Vue里，一个组件本质上是一个拥有预定义选项的Vue实例，主要以页面结构的形式存在。不同的组

件之间具有基本交互功能，可以根据业务逻辑实现较复杂的项目功能。一个组件是一个自定义元素，也可以称

为一个模块，其中包括所需的模板、逻辑和样式。在HTML模板中，组件以一个自定义标签的形式存在，起到

占位符的作用。通过Vue的声明式渲染后，占位符将会被替换为实际的内。

5.1.1初识组件定义

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

【实例5-1】定义与使用一个名称为button-counter的组件

【操作要求】

定义一个名称为button-counter的组件，该组件的主要功能是记录与输出单击按钮的次数。

【实现过程】

使用HTML编辑器Dreameaver创建网页0501.html,实现要求的功能。

(1)定义一个名为button-counter的组件

代码如下：

〃Vponent。方法表示注册组件的API,参数〈button-counter〉为组件名称

II组件名称与页面中的标签名称(button-counter〉对应

II组件名称还可以使用驼峰法命名，这里也可命名为buttoncounter

Vponent(button-counter,{

II组件中的数据必须是一个函数，通过返回值来返回初始数据

data:function(){

return{

count:0

)

).

II表示组件的模板

template:buttonv-on:click=count++”单击了{{count)}次〈/button

})

(2)在HTML代码中把组件button-counter作为自定义元素使用

代码如下：

divid=app

button-counter/button-ODunter

/div

(3)通过neVue创建Vue根实例

代码如下：

varvm=neVue({

el:(#app

})

(4)浏览网页0501.html

网页0