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

课题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入门1

Vue是一个简单易学的JavaScript框架，本节将对Vue的概念、下载、安装，及其应用进行简单介

绍，让大家了解使用Vue开发和直接使用原生JavaScript开发的区别。

12.1.1什么是Vue

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

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

Vue是一个聚焦于视图层的MVVM框架。视图层是指Web前端开发中和网页展示相关的部分。

MVVM全称为ModelViewViewModel，也称为双向绑定，Model为数据层，View为视图层，ViewModel

为数据视图中间层，它主要用于串联Model和View，如图所示。