《Vue.js前端框架技术与实战》教学大纲与实训大纲

Vue.js 前端框架技术与实战教学大纲与实训大纲 1 Vue.js 前端框架技术与实战 教学大纲与实训大纲 学分4 学时64 48 时理论/16 时上机 一、课程的性质、地位与任务 Vue.js 前端框架技术与实战课程是计算机科学与技术、信息管理与信息系统、软件工程、 网络工程、数字媒体技术、物联网工程等专业的一门专业（必修/选修）课程，也是其他计算机相 关专业的普及型课程，通过对 Vue.js 的特性和开发环境配置的了解和 Vue.js 基础语法、指令、组 件、过渡与动画、Vuex、Vue Router 以及周边生态系统的学习和研究，让学生理解和掌握 Vue.js 这一渐进式框架的核心概念（组件化、模块化），通过项目实践培养学生开发和设计复杂的单页面 应用的基本技能和素质要求，适应目前 Web 前端工程师的岗位需要。 二、课程的教学目标与基本要求 本课程教学基本要求是让学生理解 Vue.js 渐进式框架的核心概念，熟练掌握 Vue.js 前端项目 开发基本流程、开发环境部署与配置、单页面应用项目目录结构定义等基础知识。掌握 Vue.js 基 础语法、指令、组件开发、过渡与动画等关键概念；掌握使用 Vue Router 实现单页面内导航与路 由设置，结合 Vuex 解决大中型 Web 前端项目数据共享问题，初步熟悉 Vue3.0 新特性,能够使用 Vue 3.0 新特性解决简易的 web 前端项目，通过比较法来加深对 Vue3.0 新特性的理解。 本课程的教学目标是让学生运用 HTML5、CSS3、JavaScript 熟悉地理解和掌握 Vue.js 核心概 念和基础语法，掌握 Vue 指令、组件、过渡与动画等语法与使用方法。熟练地使得 Vue Router 来 构建单页面导航并渲染路由组件。在中小型项目中使用 Vuex 解决多组件状态数据共享的问题。让 学生使用 Vue CLI 脚手架来搭建 Vue2.6 和 Vue3.0 项目，通过项目实训，培养学生具有开发含状态 数据共享和路由导航功能于一体的中小型 Web 单页面的能力。 三、课程内容（重点△，难点★） 第1 章 Vue.js 概述 1.1 了解Vue.js 简介 1.2 △学会Vue.js 生产环境配置 1.2.1 Vue.js 引入方法 1.2.2 安装Vue Devtools 1.3 △掌握VUE 页面基本结构 1.3.1 template 标记 1.3.2 script 标记 1.3.3 style 标记 1.4 熟悉Vue.js 开发工具（会熟练使用一种主流开发工具） 1.4.1 掌握Visual Studio Code【推荐】 1.4.2 Sublime Text 1.4.3 WebStorm Vue.js 前端框架技术与实战教学大纲与实训大纲 2 1.4.4 掌握HBuilder X【推荐】 第2 章 Vue.js 基础 2.1 理解MVC 与MVVM 模式 2.1.1 MVC 模式 2.1.2 MVVM 模式 2.2 △掌握数据绑定与插值 2.2.1 文本绑定 2.2.2 HTML 代码绑定 2.2.3 属性绑定 2.2.4 JavaScript 表达式绑定 2.3 △掌握计算属性与方法 2.3.1 计算属性基础应用 2.3.2 △计算属性缓存与方法比较 2.3.3 计算属性的setter 和getter 2.4 ★掌握侦听属性WATCH 2.4.1 ★watch 属性基本用法 2.4.2 ★watch 属性高级用法 2.5 ★理解生命周期钩子函数 2.5.1 生命周期钩子函数作用 2.5.2 生命周期钩子函数应用 2.6 学会使用控制台CONSOLE 对象 2.6.1 △显示信息的命令 2.6.2 占位符 2.6.3 分组显示console.group 2.6.4 △查看对象的信息console.dir 2.6.5 显示某个节点的内容console.dirxml 2.6.6 判断变量是否为真console.assert 2.6.7 追踪函数的调用轨迹console.trace 2.6.8 计时功能 2.6.9 性能分析 2.6.10 表格形式输出数组和对象console.table 2.7 掌握数据与方法 2.7.1 △数据对象的定义与使用 2.7.2 △Vue 实例属性与方法 2.8 ★掌握Vue 中数组变动更新检测 2.8.1 ★变异方法 2.8.2 ★非变异方法 2.9 理解并掌握Vue 中过滤器 Vue.js 前端框架技术与实战教学大纲与实训大纲 3 第3 章 Vue.js 指令 3．1 △掌握Vue.js 内置指令 3.1.1 △条件渲染 3.1.2 △用 key 管理可复用的元素 3.1.3 △根据条件展示元素 v-show 3.1.4 △列表渲染 v-for 指令 3.1.5 △绑定属性 v-bind 指令 3.1.6 △事件处理 v-on 指令 3.1.7 事件修饰符 3.1.8 按键修饰符 3.1.9 △v-model 表单输入绑定 3.1.10 表单元素值绑定 3.1.11 v-model 与修饰符 3.1.12 v-text 与 v-html 指令 3.1.13 △v-cloak、v-once、 v-pre 指令 3.2 △★掌握Vue.js 自定义指令 3.2.1 △自定义指令注册 3.2.2 对象字面量 3.2.3 ★动态指令参数 3.2.4 自定义指令实际应用 第4 章 Vue.js 基础案例实战 4.1 掌握简易图书管理 4.1.1 简易图书管理项目需求 4.1.2 简易图书管理项目实现 4.2 掌握我的待办事项MyToDos 4.2.1 我的待办事项项目需求 4.2.2 我的待办事项项目实现 第5 章 Vue.js 组件开发 5.1 掌握组件基础 5.1.1 组件命名 5.1.2 组件注册 5.2 ★掌握组件间通信 5.2.1 ★父组件向子组件传值 5.2.2 ★子组件向父组件传值 5.2.3 ★兄弟组件之间通信 5.2.4 ★父链与子组件索引 5.3 掌握单文件组件 5.4 ★掌握插槽 5.4.1 ★匿名插槽 5.4.2 ★具名插槽 Vue.js 前端框架技术与实战教学大纲与实训大纲 4 5.4.3 ★作用域插槽 5.4.4 ★动态插槽名 第6 章 Vue.js 过渡与动画 6.1 △掌握单元素/组件的过渡 6.1.1 △过渡的类名 6.1.2 △CSS 过渡 6.1.3 △CSS 动画 6.1.4 自定义过渡的类名 6.1.5 同时使用过渡和动画 6.1.6 显性的过渡持续时间 6.1.7 JavaScript 钩子 6.2 掌握初始渲染的过渡 6.3 △掌握多个元素的过渡 6.4 △掌握多个组件的过渡 6.5 掌握列表过渡 6.5.1 ★列表的进入/离开过渡 6.5.2 ★列表的排序过渡 6.5.3 列