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

《Vue.js前端框架技术与实战》教学大纲与实训大纲 PAGE 4 PAGE 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 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中过滤器 第3章 Vue.js指令 3．1 △掌握Vue.js内置指令 3.1.1 △条件渲染 3.1.2 △用ke