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

《《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx》由会员分享，可在线阅读，更多相关《《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Vuejs前端框架技术与实战教学大纲与实训大纲学分:4学时：64 （48时理论/16时上机）一、课程的性质、地位与任务Vue. js前端框架技术与实战课程是计算机科学与技术、信息管理与信息系统、软件工程、 网络工程、数字媒体技术、物联网工程等专业的一门专业（必修/选修）课程，也是其他计算机相 关专业的普及型课程，通过对Vue. js的特性和开发环境配置的了解和Vue.js基础语法、指令、组 件、过渡与动画、Vuex. Vue Router以及周边生态系统的学习和研究，让学生理解和掌握Vue. js 这一渐进式框架的核心概念（组件化、模块化），通过项目实践培养学生开发和设计复杂的单页面 应用的基

2、本技能和素质要求，适应目前Web前端工程师的岗位需要。二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Vue. js渐进式框架的核心概念，熟练掌握Vue. js前端项目 开发基本流程、开发环境部署与配置、单页面应用项目目录结构定义等基础知识。掌握Vue. js基 础语法、指令、组件开发、过渡与动画等关键概念；掌握使用Vue Router实现单页面内导航与路 由设置，结合Vuex解决大中型Web前端项目数据共享问题，初步熟悉Vue3.0新特性，能够使用Vue 3. 0新特性解决简易的web前端项目，通过比较法来加深对Vue3. 0新特性的理解。本课程的教学目标是让学生运用HTML5、C

3、SS3、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引入方法2. 2. 2 安装

4、 Vue Devtools1.3 掌握VUE页面基本结构1. 3. 1 template 标t己2. 3. 2 script 标记3. 3. 3 style 标记1.4 熟悉Vue.js开发工具（会熟练使用一种主流开发工具）1. 4. 1 掌握 Visual Studio Code【推荐】1. 4. 2 Sublime Text2. 4. 3 WebStorm51.组件间通信(1)学会定义Vue组件，并学会注册组件。(2)学会使用 CSS 定义 div button input 及img标记的样式。(3)学会使用事件总线来实现任意组件间 相互通信，能够使用$emil ()和$on ()来发送和

5、接 收消息。(4)学会定义Vue实例和配置相关选项， 会定义相关方法。学会定义HTML5表单。22.插槽综合实训一 页面布局换肤(1)学会全局定义Vue组件，并完成组件 的设计。(2)学会使用 CSS 定义 div、button. h3 及slot等标记的样式。(3)利用props属性实现父组件向子组件 传值。(4)学会定义具名插槽来展示传递信息， 利用动态插槽名的变更实现内容和样式的更新 传递。(5)学会定义Vue实例和配置相关选项， 会定义相关方法实现相关功能。61.多组件过渡(1)学会定义Vue实例，并完成相关选项的 配置。(2)学会使用CSS定义超链接等标记的样 式，学会使用过渡类名，

6、并完成多组件过渡样式 定义。(3)学会trsnaition组件及动态组件实现 多个组件切换显示。22.列表过渡实训一 列表添加、删除及重 新排序(1)学会定义Vue实例，并完成相关选项的 配置。(2)学会使用CSS3定义按钮、列表及列表项 的样式效果。(3)学会使用lodash. js来定义列表项弹跳 式动画(洗牌(_. shuffle(arrayName)效果。(4)学会使用transition-group组件来实 现列表的进入/离开的过渡、排序过渡的效果。71. webpack打包资源(1)学会使用Vue创建工程项目。(2) 学 会编写 index, html、main, js、 webp

7、ack, config, js 等文件。(3)学会使用DOM操作创建、添加新元素。(4)学会导入CSS样式文件、图像文件到 JavaScript 文件中。(5)学会使用webpack编译和打包工程文 件，并能在调试状态下运行项目。22. Vue-cli可视化创 建项目实训一创建 webpack-ex-2 项目(1)学会使用Vue UI启动图形化界面创建 工程项目。(2)学会使用Vue UI创建与管理Vue项目 (创建、预设、配置等)。81. Vue+Vue Router+webpack 组 合实训(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router

8、插件。(3)学会使用Vue Router设置导航、定义路 由、定义路由组件、定义路由管理器实例。(4)参照天猫中”服饰主会场”中部分页面 效果。使用Vue+Vue Router+ Webpack完成项目 实训。22. VueRouter+webpack(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router 插件。(3)学会使用Vue Router设置导航、定义路 由及嵌套路由、定义路由组件、定义路由管理器 实例。9LVuex项目实训一计数器counter(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入Vuexo(3)学会使用

9、 Vuex 的 state getters mutations、actions等核心概念解决工程应用 中状态共享问题。(4)学会使用计算属性和辅助函数获取 Vuex状态。(5)学会在组件中使用this. $store. state 获取状态，使用this. $store. commit触发 mutation 及使用 this. $store. dispatch 分发 actiono(6)学会编写action和mutation函数，并 习惯使用action去触发mutation。22.Vuex项目实战综合运用Vuex的五大核心概念，使用多module 来分割store,同时使用命名空间来区分使用

10、不 同模块的action。以“IT管理学院信息管理系 统”为例，简易实现教师和学生的管理。(1)教师端。主要功能是输入教师信息，并 添加到教师列表中，然后可能给指定ID的教师增 加薪酬，并将增加薪酬的教师信息添加背景颜色 来标识一下。 学生端。主要功能是给学生增加成绩， 每次递增5分，最高成绩为100分，成绩范围： 30 95。101. Vant官方示例合 集实训一使用Vant 搭建应用(1)学会从GitHub上下载相关项目资源 (https:/github. com/youzan/vant-demo), 并能够按照README, md提示的步骤进行项目部 署。(2)熟悉 Vant-Demo

11、(vant-demo-master) 项目中vant/base子项目所采用的技术栈(Vue、 Vue Cli Vue Router Vant)。(3)学会使用Vue Router定义路由、定义路 由组件、定义路由管理器实例。(4)熟悉使用Vue+Vue Router+Vant构建项 目，了解项目文件构成结构。0 (课 外实 践)2. Vue+Element 表 格组件实训一带搜 索功能的表格数据 分页显示(1)学会使用CDN或本地引入Vue和 Element UI。(2)熟悉Element UI组件库中组件的分类， 重点掌握输入框组件(el-input),表格组件 (el-table el-t

12、able-column) 行/列组件 (el-row、el-col)和按钮(el-button)等组件的 使用方法。(3)掌握分页组件(el-pagination)的 layout、backgrounds page-size、pager-count total、small等属性的含义与设置方法。11l.Vue. js高级应用 实训一友联通讯录自己动手，完成“友联通讯录”的所有功能 实训练习。并尝试对友联通讯录主页面 addressBook. vue文件进行修改，使用Element UI中Pagination分页组件实现通讯录按设定的 “行/页”格式显示。0 (课 外实 践)2. Vue. js

13、高级应用 实训一通用登录/注 册管理系统熟悉Vue前后端分离项目的开发流程，自己 动手，完成“通用登录/注册管理系统”的所有 功能实训练习。(1)在数据库login中增加一个数据表 books,设置 bookno (字符，13 位)、bookname (字 符，50 位)、pubpress (字符，30 位)、bookdate (日 期,如 “2020-09-21)、price (浮点)、count (整 数，库存)等字段。(2)参照user表，编写图书操作的CRUD 的sqlMap. js和bookApi. js,并在左侧导航中增 加相应的图书操作的菜单和编写相对应的Vue组 件。121.

14、Vue3. 0提供/注 入实训一父组件操 控子组件中div样 式(1)掌握使用Vue CLI创建Vue 3.0简易工 程项目的方法。(2)掌握Vue 3.0中的提供/注入 provideO/inject ()函数的使用方法。(3)学会定义setup。函数和创建ref响应 式对象。2(4)学会使用provide。函数提供普通数据 共享和ref响应式数据共享。(5)学会按需导入项目中所需要的函数。(1)学会使用Vue CLI创建集成Vuex和Vue Router功能的Vue 3. 0工程项目。会使用手动 或自动方式进行项目初始选项的设置。(2)熟悉默认初始创建项目的文件结构，并 会与Vue2. x

15、项目文件结构进行比较，总结Vue 3.0项目文件结构的特点。2. Vue 3. 0 中 Vuex 和Vue Router实训 一简易图书选购(3)学会使用Vue Router定义路由、定义路 由 组件。 会使用 createRouter 、 createWebllistory两个API创建路由管理器 router 和 history 对象。(4)学会使用createStore创建store对象。 根据状态数据的操作需要编写相关的 mutations 和 actionso(5)学会在组件中导入useStore API函数， 并在setup ()函数内触发相关的mutations或分 发actio

16、ns。学会导入useRouter API函数，并 在setup。函数中使用路由器来切换路由。(6)完成项目的开发任务。六、课内实训(一)本课程实训的目的与要求通过本课程的课堂学习和实训，使学生加深理解Vue. js核心概念和基本语法，掌握内部指令和自 定义指令、组件定义与通讯和过渡与动画等基础知识。能够熟练地运用Vue Router和Vuex组件技术解 决实际工程中单页面导航和组件渲染及多组件状态数据共享。通过项目实训，让学生使用Vue CLI脚手 架来搭建Vue2.6和Vue3.0项目，通过项目实训，培养学生具有开发含状态数据共享和路由导航功肯汗 一体的中小型Web单页面的能力。基本要求：1

17、 .熟练掌握Vue. js前端框架技术主流开发工具和环境部署方法。2 .掌握Vue项目的组件化和模块化构建技术的核心思想与方法。3 .深入学习Vue Router和Vuex组件技术，解决实际项目中路由导航和状态数据共享问题。4 .学会使用Vue CLI构建Vue 2. 6和Vue 3.0项目。(二)本课程实训的项目和主要内容序 号项目名称学 时主要内容类型11-1.内置指令 v-model实训-下拉 列表框绑定0 (课 外 实 践)(1)学会定义Vue根实例对象及el和data选项。(2)学会引入Vue,完成Vue视图的定义。(3)学会使用v-model指令绑ze select儿系。设计性21

18、-2.模板中v-bind指 令实训Vue实例中 选项的配置学会引入Vue、定义Vue实例及配置el、template和 data的选项。(3)学会在template模板中使用data中的数据，并在模 板中绑定classo设计性32T.侦听属性的综合 实训一动态观察学生 信息采集。2(1)学会引入Vue. js及定义Vue实例对象、配置el和 data等选项。(2)学会配置methods和watch等选项，并完成函数的定 义。(3)学会使用v-model v-bind、v-on等指令来完成表单 绑定、属性绑定和事件绑定。设计性42-2.计算属性、方法、 过滤器的综合实训一 邮购商品业务(1)学会

19、定义Vue实例对象、配置el和data、methods、 computed等选项。(2)学会引入 Vue. js,使用 v-model、v-on、v-for 等指令 来完成表单绑定、事件绑定、遍历商品。(3)学会定义filters和methods属性。设计性53-1.内置指令实训一 人员添加并输出2(1)学会引入Vue,定义Vue实例对象及配置el data和 methods等选项。(2)学会使用 v-on、v-model v-bind 及 v-for 等内部 指令。设计性63-2.自定义指令实训 一自定义字符装饰(1)学会引入Vue,同时定义2个Vue实例对象，分别解决 不同的应用需求，并配

20、置el data和directives等选项。 (2)学会使用自定义指令的注册方法。会用全局注册和局 部注册的方式定义相关的指令。(3)学会使用v-bind指令绑定style,给div设置相应的 样式。设计性74-l.Vue. js基础案例 实训一简易图书管理0 (课 外 实 践)使用HTML5表单元素，设计图书信息添加界面完成 图书添加、图书搜索、图书删除。图书信息包含：图书 ID、图书名称、出版社、作者、插入日期等字段。综合性84-2. Vue. js基础案例 实训-我的待办事项使用HTML5表单完成界面设计。按“添加”按钮将 待办事项添加到展示项目中。在复选框中打上勾号“标记一下完成的待

21、办事项，单击“X”符号册U除该事项。完成状态显示栏设置。剩余项目数/项目数、全部、 待完成、已完成、清除完成等功能。综合性95T.组件间通信实训 一友谊聊吧2(1)学会定义Vue组件，并学会注册组件。(2)学会使用事件总线来实现任意组件间相互通信，能 够使用$emit ()和$on ()来发送和接收消息。(3)学会定义Vue实例和配置相关选项，会定义相关方 法。学会定义HTML5表单。设计 性105-2.插槽综合实训一 页面布局换肤(1)学会全局定义Vue组件，并完成组件的设计。(2)利用props属性实现父组件向子组件传值。(3)学会定义具名插槽来展示传递信息，利用动态插槽名 的变更实现内容

22、和样式的更新传递。设计 性116-1.多组件过渡实训 一京东一智能生活- 部分菜单仿真设计2(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS定义超链接等标记的样式，学会使用过 渡类名，并完成多组件过渡样式定义。(3)学会trsnaition组件及动态组件实现多个组件切换 显示。设计性126-2.列表过渡实训一 列表添加、删除及重 新排序(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS3定义按钮、列表及列表项的样式效果。(3)学会使用lodash. js来定义列表项弹跳式动画(洗牌 (_. shuffle(arrayName)效果。(4)学会使用trans

23、ition-group组件来实现列表的进入/ 离开的过渡、排序过渡的效果。设计性137-1. webpack 打包资 源2(1)学会使用Vue创建工程项目。(2)学会编写 index. html main. js webpack, config. js 等文件。(3)学会使用DOM操作创建、添加新元素。学会导入CSS 样式文件、图像文件到JavaScript文件中。(4)学会使用webpack编译和打包工程文件，并能在调试 状态下运行项目。设计性147-2. Vue-cli 可视化 创建项目实训一创建 webpack-ex-2 项目(1)学会使用Vue UI启动图形化界面创建工程项目。(2)学

24、会使用Vue UI创建与管理Vue项目(创建、预设、 配置等)。验证性/ 操作性158-1.Vue+VueRouter+webpack 组合2(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router插件。(3)学会使用Vue Router设置导航、定义路由、定义路 由组件、定义路由管理器实例。(4)参照天猫中”服饰主会场”中部分页面效果。使用 Vue+Vue Router+ Webpack 完成项目实训。设计性168-2.VueRouter+webpack 项目(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-route

25、r插件。(3)学会使用Vue Router设置导航、定义路由及嵌套路 由、定义路由组件、定义路由管理器实例。(4)参照“百度推广”首页导航(. baidu. com/ebaidu/home)。 使用 Vue+Vue Router+ Webpack完成项目实训。设计性179- LVuex项目实训一 计数器counter2(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入Vuexo(3)学会使用 Vuex 的 state、getters、mutations、 actions等核心概念解决工程应用中状态共享问题。(4)学会使用计算属性和辅助函数获取Vuex状态。(5)学会在

26、组件中使用this. $store. state获取状态，使用 this. $store. commit 触发 mutation 及使用this. $store. dispatch 分发 actiono(6)学会编写action和mutation函数，并习惯使用 action 去触发 mutation。设计性189-2. Vuex项目实战Vuex-IT管理学院 信息管理系统综合运用Vuex的五大核心概念，使用多module来分割 store ,同时使用命名空间来区分使用不同模块的 action。以“IT管理学院信息管理系统”为例，简易实 现教师和学生的管理。 教师端。主要功能是输入教师信息，并

27、添加到 教师列表中，然后可能给指定ID的教师增加薪 酬，并将增加薪酬的教师信息添加背景颜色来 标识一下。 学生端。主要功能是给学生增加成绩，每次递 增5分，最高成绩为100分，成绩范围：30 95o综合性1910-1. Vant官方示例 合集实训一使用Vant 搭建应用0 (课 外 实践)(1)学会从Gitllub上下载相关项目资源(https: /github. com/youzan/vant-demo), 并能够按 照README, md提示的步骤进行项目部署。(2)熟悉 Vant-Demo ( vant-demo-master )项目中 vant/base子项目所采用的技术栈(Vue、V

28、ue Cli Vue Router、 Vant)。(3)学会使用Vue Router定义路由、定义路由组件、定 义路由管理器实例。(4)熟悉使用Vue+Vue Router+Vant构建项目，了解项目 文件构成结构。验证性2010-2. Vue+Element 表 格组件实训一带搜索 功能的表格数据分页 显示(1)学会使用CDN或本地引入Vue和Element UI。(2)熟悉Element UI组件库中组件的分类，重点掌握输 入框组件(el-input) 表格组件(el-table、 el-table-column) 行/列组件(el-row、el-col)和按钮 (el-button)等组

29、件的使用方法。(3)掌握分页组件(el-pagination)的 layout、 backgrounds page-size、 pager-count total、 small 等属性的含义与设置方法。设计 性2111-1. Vue. js 高级应 用实训一友联通讯录0 (课 外 实 践)自己动手，完成“友联通讯录”的所有功能实训练习。 并尝试对友联通讯录主页面addressBook. vue文件进行 修改，使用Element UI中Pagination分页组件实现通 讯录按设定的“行/页”格式显示。综合性2211-2. Vue. js 高级应 用实训一通用登录/ 注册管理系统熟悉Vue前后端

30、分离项目的开发流程，自己动手， 完成“通用登录/注册管理系统”的所有功能实训练习。 (1)在数据库login中增加一个数据表books,设置 bookno (字符，13 位)、bookname (字符，50 位)、 pubpress (字符，30 位)、bookdate (日期，如“2020-09-21)、price(浮点)、count(整数，库存)等 字段。(2)参照user表，编写图书操作的CRUD的sqlMap. js和 bookApi. js,并在左侧导航中增加相应的图书操作的菜 单和编写相对应的Vue组件。综合性2312-1.Vue3.0提供/注 入实训一父组件操控 子组件中div样

31、式2(1)掌握使用Vue CLI创建Vue 3. 0简易工程项目的方法。 (2)掌握Vue 3. 0中的提供/注入provideO/inject ()函 数的使用方法。(3)学会定义setup ()函数和创建ref响应式对象。(4)学会使用provide ()函数提供普通数据共享和ref响 应式数据共享。(5)学会按需导入项目中所需要的函数。综合性2412-22. Vue 3.0 中 Vuex 和 Vue Router 实训一简易图书选购(1)学会使用Vue CLI创建集成Vuex和Vue Router功能 的Vue 3.0工程项目。会使用手动或自动方式进行项目 初始选项的设置。(2)熟悉默认

32、初始创建项目的文件结构，并会与Vue2. x 项目文件结构进行比较，总结Vue 3.0项目文件结构的综合性特点。学会使用Vue Router定义路由、定义路由组件。会 使用 createRouter createWebHistory 两个 API 创建 路由管理器router和history对象。(4)学会使用createStore创建store对象。根据状态数 据的操作需要编写相关的mutations和actionso(5)学会在组件中导入useStore API函数，并在setup。 函数内触发相关的mutations或分发actions。学会导入 useRouter API函数，并在se

33、tup()函数中使用路由器来 切换路由。(6)完成项目的开发任务。(三)实验说明课程总学分4实验学时数16实验项目数24考核方式日常考核团 操作技能考核口 卷面考核口 提交实验结果回 面试口适用专业与年级：计算机科学与技术、软件工程、信息管理与信息系统、网络工程、数字媒体技术、物 联网工程等相关专业1-3年级七、课程实施计划序 号教学 方式教学内容作业要 求教学目标1课堂 讲课第1章Vue. js概述1. 1 了解 Vue. js 简介1.2 学会Vue. js生产环境配置1.3 掌握VUE页面基本结构1. 4熟悉Vue. js开发工具第2章Vue.js基础2. 1理解MVC与MWM模式2.

34、1. 1 MVC 模式2. 1.2 MVVM 模式2.2 掌握数据绑定与插值2. 2.1文本绑定2. 2.2 HTML代码绑定2. 2. 3属性绑定2. 2. 4 JavaScript 表iA式绑7E练习1掌握常用的Vue.js开发工具。学会配置Vue. js生产环境。掌握Vue.js页面的基本组成。学会编写最基本的Vue. js页面。理解MVC、MVVM模式的工作机制。掌握多种类型数据绑定的方法。2课堂 讲课第2章Vue.js基础2.3 掌握计算属性与方法2. 3. 1计算属性基础应用3. 3.2 计算属性缓存与方法比较4. 3. 3 计算属性的setter和getter2.4 掌握侦听属性

35、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. 3 console, group ()分组显示2.6.4 查看对象的信息 console, dir ()【选学】显示某个节点的内容 console, dirxml ()【选学】2. 6.6判断变量是

36、否为真 console, assert ()【选学】2. 6. 7追踪函数的调用轨迹 console, trace ()【选学】2.68计时功能【选学】性能分析【选学】表格形式输出数组 和对象 console, table ()理解生命周期钩子函数在使用上的差异 性。3课堂 讲课第2章Vue.js基础2.7掌握数据与方法2. 7.1 数据对象的定义与使用2. 7.2 Vue实例属性与方法2.8 掌握Vue中数组变动更新检测2. 8.1 变异方法2.8.2 非变异方法2.9理解并掌握Vue中过滤器学会定义及使用数据对象掌握数据实例的相关方法掌握数据中数组对象的变异与非变异方法学会定义与使用过滤器

37、4上机 实训实训2-1、实训2-2练习25课堂 讲课3. 1 掌握Vue.js内置指令3. 1. 1 条件渲染3.1.2 用key管理可复用的元 素3.1.3 根据条件展示元素 v-show3.1.4 1. 4 列表渲染v-for指令理解Vue. js指令的定义与分类。掌握条件渲染指令的使用与注意事项。掌握列表渲染指令v-for的多种定义方 法6课堂 讲课第3章Vue. js指令3. 1.5 绑定属性v-bind指令3. 1.6 事件处理v-on指令3. 1.7事件修饰符3. 1.8按键修饰符v-for指令及v-bind:key属性配合使用 的方法。掌握数据绑定的多种方式。掌握事件处理指令及事

38、件修饰符的使用 方法。掌握HBuilder X【推荐】第2章Vue.js基础2. 1理解MVC与MWM模式2. 1. 1 MVC 模式2. 1. 2 MVVM 模式2.2 掌握数据绑定与插值2. 2.1文本绑定2. 2.2 HTML代码绑定2. 2. 3属性绑定3. 2. 4 JavaScript表达式绑定3.3 掌握计算属性与方法2. 3.1计算属性基础应用3. 3.2 计算属性缓存与方法比较4. 3. 3 计算属性的setter和getter3.4 掌握侦听属性WATCH2. 4. 1 watch属性基本用法3. 4. 2 watch属性高级用法3.5 理解生命周期钩子函数2. 5.1生命

39、周期钩子函数作用3. 5.2生命周期钩子函数应用3.6 学会使用控制台CONSOLE对象2. 6. 1 显示信息的命令占位符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 数据对象

40、的定义与使用3. 7.2 Vue实例属性与方法2.8 掌握Vue中数组变动更新检测2. 8.1 变异方法3. 8.2 非变异方法2.9理解并掌握Vue中过滤器7课堂 讲课第3章Vue.js指令3. 1.9 Av-model表单输入绑定表单元素值绑定3. 1. 11 v-model 与修饰符3. 1. 12 v-text 与 v-html 指令3.1.13 v-cloak 、 v-once 、v-pre指令掌握 v-model v-text v-html 等内置 指令的作用与使用方法。掌握 V-cloak、v-once v-pre 等其它 内置指令的作用与使用方法。8课堂 讲课第3章Vue. j

41、s指令3. 2 掌握Vue. js自定义指令3. 2.1 自定义指令注册3. 2.2对象字面量3. 2.3 动态指令参数3. 2.4自定义指令实际应用掌握Vue自定义指令定义与注册的方法。9上机 实训实训3-1、实训3-2练习310课堂 讲课第4章Vue.js基础案例实战4.1 简易图书管理1 .1.1简易图书管理项目需求4 . 1.2简易图书管理项目实现4.2 我的待办事项MyToDos4 . 2. 1我的待办事项项目需求5 .2.2我的待办事项项目实现课外实 训 4-1、 4-2掌握Vue简易项目基本组成。学会在项目中引入Vue.js。掌握常用 v-for v-bind v-on v-mo

42、del v-show等指令的使用方法。掌握Vue过滤器的定义方法。11课堂 讲课第5章Vue. js组件开发5.1掌握组件基础5. 1.1组件命名5. 1.2组件注册5.2 掌握组件间通信5. 2.1 父组件向子组件传值5. 2.2 子组件向父组件传值熟悉组件的命名规范。掌握全局、局部注册组件的方法。 掌握组件间常用的通信方法。12上机 实训第5章Vue.js组件开发5. 2.3 兄弟组件之间通信5. 2.4 父链与子组件索引5.3掌握单文件组件掌握兄弟组件间通信方法。学会使用父链this. $parent和子组件索 引this. $refs来使用组件的数据 理解单文件组件的构成。13课堂 讲

43、课第5章Vue.js组件开发5.4 掌握插槽5. 4.1 匿名插槽5.4.2 具名插槽5. 4.3 作用域插槽5. 4. 4 动态插槽名掌握插槽的分类和定义方法。14上机 实训实训5-1、实训5-2练习515课堂 讲课第6章Vue. js过渡与动画6.1 掌握单元素/组件的过渡1. 1.1 过渡的类名6. 1.2 ZCSS 过渡7. 1.3 ZkCSS 动画8. 1.4自定义过渡的类名9. 1.5同时使用过渡和动画10. .6显性的过渡持续时间11. 1. 7 JavaScript 钩子6. 2掌握初始渲染的过渡熟悉过渡类名的含义和命名规范。 掌握单元素/单组件的过渡方法。掌握初始渲染过渡的方

44、法。16课堂 讲课第6章Vue.js过渡与动画6.3 掌握多个元素的过渡6.4 掌握多个组件的过渡6. 5掌握列表过渡6. 5.1 列表的进入/离开过渡6. 5.2 列表的排序过渡6. 5.3列表的交错过渡掌握列表进入/离开、排序和交错过渡的 实现方法。学会编写带有Vue. js过渡和动画效果的 页面。17上机 实训实训6-1、实训6-2练习618课堂 讲课第7章Vue项目开发环境与辅助工具部署7.1 理解部署node, js7. 1. 1 Node, js 简介7. 1.2 Node, js 部署7.1.3 Node, js 模块系统7.1.4 Node, js创建第一个应用7. 2掌握No

45、de包管理器npm7. 2. 1 npm 简介7. 2.2 npm常用命令7.3 掌握Node, js环境配置熟悉Vue项目基本开发环境和常用的辅 助工具。掌握常用NPM包管理器命令。19课堂 讲课第7章Vue项目开发环境与辅助工具部署7. 4掌握webpack打包工具7. 4. 1 webpack 简介7. 4. 2 webpack使用与基本配置7. 4. 3 webpack配置加载器 loaders7. 4. 4 webpack 配置插件7. 4. 5 webpack配置开发服务器7. 5 掌握 VUE CLI7. 5. 1 Vue CLI 安装7. 5. 2 AVue CLI 创建 Vue 项目7. 5.3 AVue CLI可视化创建Vue项 目学会webpack安装和配置。学会Vue CLI安装与项目创建。20上机 实训实训7T、实训7-1练习721课堂 讲课第8章前端路由Vue Router8. 1 掌握 Vue Router 概述8. 1. 1 Vue Router安装与使用