《JavaScript程序设计案例教程》教案 第12章 Vue.docx

PAGE2

PAGE2

PAGE11

PAGE11

课题

Vue

课时

6课时（270min）

教学目标

知识目标：

（1） 掌握安装和在文档中引入Vue的方法

（2）掌握创建Vue实例的方法并了解其生命周期

（3）掌握Vue数据绑定的方法

（4）掌握Vue计算属性和侦听器的应用

（5）了解Vue模板渲染语法

能力目标：

（1）理解Vue的基本语法，包括创建Vue对象实例、使用模板语法和指令等

（2）掌握Vue实例的数据和方法管理，能够在Vue初始化时正确传入数据和定义方法

（3）学会使用计算属性和侦听器来处理Vue中的数据变化

（4）能够将Vue的各种知识和技术综合运用到实际项目中

素质目标：

（1） 关注科技前沿新技术，激发为国争光的热情

（2）培养执着专注、精益求精、追求卓越的工匠精神

教学重难点

教学重点：Vue的引入方法、创建Vue实例及其中数据和方法的管理、数据绑定的多种方式、计算属性与侦听器的运用以及模板渲染技术

教学难点：理解Vue实例的生命周期及钩子函数的运用，掌握计算属性和侦听器的区别及复杂场景下的选择，综合运用Vue技术实现复杂的页面效果

教学方法

问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请同学们上网查阅Vue的基本介绍，了解Vue是什么类型的框架，它在网页开发中有哪些主要优势，然后在APP上进行分享。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

问题导入

【教师】提出以下问题：

当我们需要更新网页上的某些数据时，不得不通过复杂的DOM操作来实现，而且代码繁琐易错。那么有没有一种更高效、便捷的方式来进行网页开发呢？

【学生】思考、举手回答

传授新知

【教师】通过学生的回答，引入新知，讲解Vue入门知识，Vue实例，数据绑定，计算属性和侦听器，以及模板渲染的相关知识

12.1Vue入门

Vue是一个简单易学的JavaScript框架，本节将对Vue的概念、下载、安装，及其应用进行简单介绍，让大家了解使用Vue开发和直接使用原生JavaScript开发的区别。

12.1.1什么是Vue

?【教师】扫码播放“什么是Vue”微课，帮助学生了解Vue的基本概念

?【教师】利用多媒体展示“MVVM模式”图片（详见教材），并进行讲解

Vue是一个聚焦于视图层的MVVM框架。视图层是指Web前端开发中和网页展示相关的部分。MVVM全称为ModelViewViewModel，也称为双向绑定，Model为数据层，View为视图层，ViewModel为数据视图中间层，它主要用于串联Model和View，如图所示。

?提示

MVVM本质上是MVC的改进版，主要目的是分离视图（View）和模型（Model）。

ViewModel是Vue框架的核心，本质上是一个Vue实例。Vue实例是作用于某一个HTML元素的，该元素可以是body元素，也可以是指定了id属性的其他元素。那么双向绑定是如何实现的呢？由图12-1可以看出，从View侧来看，View和ViewModel之间进行了数据绑定，当ViewModel接收到数据的变化时，会通知View进行视图更新；而当View触发了输入等事件，又会通知ViewModel层。从Model侧来看，ViewModel和Model之间是相互关联的，当ViewModel接收到输入事件时，将通知Model更新数据；而Model的数据发生变化时，也会通知ViewModel。

下面通过一个实例来看一下Vue.js是如何实现MVVM模式的。

【课堂练习】

?【教师】利用多媒体展示【例12-1】，并进行讲解，帮助学生掌握Vue.js是如何实现MVVM模式的

使用Vue.js实现MVVM模式。（实例位置：example/ch12/12-1.html）。

……（详见教材）

?【学生】聆听、思考、理解

在例12-1中，input和button元素表示View层，变量data表示Model层，对象vm表示ViewModel层。当View层的input输入内容改变时，Model层的变量data通过ViewModel层的vm进行修改；当Model层的data变量改变时，ViewModel层的vm将会更新View层的input，这样就实现了一个简单的MVVM效果。

……（详见教材）

?提示

Vue一共有1.0、2.0和3.0三个大版本，每个大版本中又包括许多小版本。3.0是Vue的最新版本，目前还不是特别稳定。因此本书讲解使用的是Vue的稳定版本2