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

《Vue.js前端框架技术与实战》教学大纲与实训大纲PAGE4PAGE1《Vue.js前端框架技术与实战》教学大纲与实训大纲学分：4学时：64(48时理论/16时上机)一、课程的性质、地位与任务《Vue.js前端框架技术与实战》课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体技术、物联网工程等专业的一门专业（必修/选修）课程，也是其他计算机相关专业的普及型课程，通过对Vue.js的特性和开发环境配置的了解和Vue.js基础语法、指令、组件、过渡与动画、Vuex、VueRouter以及周边生态系统的学习和研究，让学生理解和掌握Vue.js这一渐进式框架的核心概念（组件化、模块化），通过项目实践培养学生开发和设计复杂的单页面应用的基本技能和素质要求，适应目前Web前端工程师的岗位需要。二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Vue.js渐进式框架的核心概念，熟练掌握Vue.js前端项目开发基本流程、开发环境部署与配置、单页面应用项目目录结构定义等基础知识。掌握Vue.js基础语法、指令、组件开发、过渡与动画等关键概念；掌握使用VueRouter实现单页面内导航与路由设置，结合Vuex解决大中型Web前端项目数据共享问题，初步熟悉Vue3.0新特性,能够使用Vue3.0新特性解决简易的web前端项目，通过比较法来加深对Vue3.0新特性的理解。本课程的教学目标是让学生运用HTML5、CSS3、JavaScript熟悉地理解和掌握Vue.js核心概念和基础语法，掌握Vue指令、组件、过渡与动画等语法与使用方法。熟练地使得VueRouter来构建单页面导航并渲染路由组件。在中小型项目中使用Vuex解决多组件状态数据共享的问题。让学生使用VueCLI脚手架来搭建Vue2.6和Vue3.0项目，通过项目实训，培养学生具有开发含状态数据共享和路由导航功能于一体的中小型Web单页面的能力。三、课程内容（重点△，难点★）△△2.1.1MVC模式△△△★★★★△△△△★★★△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.11v-model与修饰符 3.1.12v-text与v-html指令 3.1.13△v-cloak、v-once、v-pre指令 △★△★★★★★★★★★★★△△△△△△★★△△△△△★★△△△△△△★△△△△△★△△△△★△★△★△△★★★△★△△△△△△★★△★课时内容课时6五、课程说明课程英文名称Vue.jsFrontEndFrameTechnologyandActualCombat主要先修课程计算机导论、计算机网络、Web前端开发基础(HTML、CSS、JavaScript)适用专业类别软件工程、计算机科学与技术、信息管理与信息系统、网络工程等相关专业主要教材Vue.js前端框架技术与实战课程性质通识基础□学科基础□专业选修√集中实践环节□《Vue.js前端框架技术与实战》课程是软件工程、计算机科学与技术、信息管理与信息系统等专业的一门专业课程，通过对Vue.js渐进式框架的学习和研究，让学生理解和掌握Vue.js核心概念（组件化、模块化）和基础语法与开发环境配置方法，熟练掌握Vue.js项目开发流程，通过项目实训，培养学生开发和设计复杂单页面应用的基本工程能力。1.内置指令v-model实训--下拉列表框绑定(1)学会定义Vue根实例对象，并初步掌握常用选项el和data的相关数据属性的定义。(2)学会引入Vue,完成Vue视图的定义。(3)学会使用v-model指令绑定select元素，通过下拉列表框选择相应的选项。(4)学会启用浏览器调试，辅助项目调试。2.模板中v-bind指令实训--Vue实例中选项的配置(1)学会引入Vue,完成项目初始化工作。(2)学会定义Vue实例对象，学会配置el、template和data的选项。(3)学会在template模板中使用data中的数据（{{dataOptions}}），并在模板中定义嵌套的div,用于显示专业描述，绑定class为“divStyle”。(4)学会使用CSS定义相关div的样式。1.侦听属性的综合实训--动态观察学生信息采集。(1)学会引入Vue.js,在Vue视图中定义表单。(2)学会定义Vue实例对象，会配置el和data等选项。(3)学会配置methods和watch等选项，并完成函数的定义。(4)学会使用v-model、v-bind、v-on等指令来完成表单绑定、属性绑定和事件绑定。(5)学会使用CSS定义fieldset、input等标记的样式。2.计算属性、方法、过滤器的综合(1)学会定义Vue实例对象，会配置el和data、methods、computed等选项。(2)学会引入Vue.js,并完成Vue视图中的表单的定义。(3)学会使用v-model、v-on、v-for等指令来完成表单绑定、事件绑定、遍历商品。(4)学会使用CSS定义table、tr、fieldset、input等标记的样式。(5)学会定义filters和methods属性。1.内置指令实训--人员添加并输出(1)学会引入Vue,完成简易表单设计。(2)学会定义Vue实例对象，会配置el、data和methods等选项。(3)学会使用v-on、v-model、v-bind及v-for等内部指令。2.自定义指令实训--自定义字符装饰(1)学会引入Vue,完成HTML文档基本结构的定义。(2)学会在一个文件中同时定义2个Vue实例对象，分别解决不同的应用需求，并配置el、data和directives等选项。(3)学会使用自定义指令的注册方法。会用全局注册和局部注册的方式定义相关的指令。(4)学会使用v-bind指令绑定style,给div设置相应的样式。1.Vue.js基础案例实训--简易图书管理(1)图书添加功能。使用HTML5表单元素，设计图书信息添加界面。图书信息包含：图书ID、图书名称、出版社、作者、插入日期等字段。将合法数据添加到数组中，并通过表格输出。(2)图书搜索功能。在输入关键字文本框中输入相关信息，可以在图书中进行模糊查询，并通过表格展示查询到的图书信息。(3)图书删除功能。在表格最右侧的“操作”栏目中，当单击“删除”时，可以将此条图书信息删除，同时表格内容同步更新。“编辑”按钮的功能暂不要求设计。2.Vue.js基础案例(1)使用HTML5表单完成界面设计。表单实现输入待办事项后按“添加”按钮，可以将待办事项添加到展示项目中。(2)待办事项处理。对已经完成的待办事项打上勾号“√”标记一下，同时也可以通过“×”标记删除该事项。如图4-5所示。待办项目使用复选框进行展示，并在每个待办项目后面添加一个“×”号,用于删除该事项。(3)状态显示栏设置：剩余项目数/项目数、全部、待完成、已完成、清除完成等功能。1.组件间通信（1）学会定义Vue组件，并学会注册组件。（2）学会使用CSS定义div、button、input及img标记的样式。（3）学会使用事件总线来实现任意组件间相互通信，能够使用$emit()和$on()来发送和接收消息。（4）学会定义Vue实例和配置相关选项，会定义相关方法。学会定义HTML5表单。2.插槽综合实训--页面布局换肤（1）学会全局定义Vue组件，并完成组件的设计。（2）学会使用CSS定义div、button、h3及slot等标记的样式。（3）利用props属性实现父组件向子组件传值。（4）学会定义具名插槽来展示传递信息，利用动态插槽名的变更实现内容和样式的更新传递。（5）学会定义Vue实例和配置相关选项，会定义相关方法实现相关功能。1.多组件过渡(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS定义超链接等标记的样式，学会使用过渡类名，并完成多组件过渡样式定义。(3)学会trsnaition组件及动态组件实现多个组件切换显示。2.列表过渡实训--列表添加、删除及重新排序(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS3定义按钮、列表及列表项的样式效果。(3)学会使用lodash.js来定义列表项弹跳式动画（洗牌（_.shuffle(arrayName)）效果。(4)学会使用transition-group组件来实现列表的进入/离开的过渡、排序过渡的效果。1.webpack打包资源学会使用Vue创建工程项目。学会编写index.html、main.js、webpack.config.js等文件。学会使用DOM操作创建、添加新元素。学会导入CSS样式文件、图像文件到JavaScript文件中。学会使用webpack编译和打包工程文件，并能在调试状态下运行项目。2.Vue-cli可视化创建项目实训--创建webpack-ex-2项目（1）学会使用VueUI启动图形化界面创建工程项目。（2）学会使用VueUI创建与管理Vue项目（创建、预设、配置等）。1.Vue+VueRouter+webpack组合实训(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router插件。(3)学会使用VueRouter设置导航、定义路由、定义路由组件、定义路由管理器实例。(4)参照天猫中“服饰主会场”中部分页面效果。使用Vue+VueRouter+Webpack完成项目实训。2.VueRouter+webpack(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router插件。(3)学会使用VueRouter设置导航、定义路由及嵌套路由、定义路由组件、定义路由管理器实例。1.Vuex项目实训--计数器counter(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入Vuex。(3)学会使用Vuex的state、getters、mutations、actions等核心概念解决工程应用中状态共享问题。(4)学会使用计算属性和辅助函数获取Vuex状态。(5)学会在组件中使用this.$store.state获取状态，使用this.$mit触发mutation及使用this.$store.dispatch分发action。(6)学会编写action和mutation函数，并习惯使用action去触发mutation。2.Vuex项目实战综合运用Vuex的五大核心概念，使用多module来分割store，同时使用命名空间来区分使用不同模块的action。以“IT管理学院信息管理系统”为例，简易实现教师和学生的管理。教师端。主要功能是输入教师信息，并添加到教师列表中，然后可能给指定ID的教师增加薪酬，并将增加薪酬的教师信息添加背景颜色来标识一下。学生端。主要功能是给学生增加成绩，每次递增5分，最高成绩为100分，成绩范围：30～95。1.Vant官方示例合集实训--使用Vant搭建应用(1)学会从GitHub上下载相关项目资源（/youzan/vant-demo），并能够按照README.md提示的步骤进行项目部署。(2)熟悉Vant-Demo（vant-demo-master）项目中vant/base子项目所采用的技术栈（Vue、VueCli、VueRouter、Vant）。(3)学会使用VueRouter定义路由、定义路由组件、定义路由管理器实例。(4)熟悉使用Vue+VueRouter+Vant构建项目，了解项目文件构成结构。2.Vue+Element表格组件实训--带搜索功能的表格数据分页显示(1)学会使用CDN或本地引入Vue和ElementUI。(2)熟悉ElementUI组件库中组件的分类，重点掌握输入框组件（el-input）、表格组件(el-table、el-table-column)、行/列组件(el-row、el-col)和按钮(el-button)等组件的使用方法。(3)掌握分页组件(el-pagination)的layout、background、size、pager-count、total、small等属性的含义与设置方法。1.Vue.js高级应用实训--友联通讯录自己动手，完成“友联通讯录”的所有功能实训练习。并尝试对友联通讯录主页面addressBook.vue文件进行修改，使用ElementUI中Pagination分页组件实现通讯录按设定的“行/页”格式显示。2.Vue.js高级应用实训--通用登录/注册管理系统熟悉Vue前后端分离项目的开发流程，自己动手，完成“通用登录/注册管理系统”的所有功能实训练习。在数据库login中增加一个数据表books，设置bookno（字符，13位）、bookname(字符，50位)、pubpress(字符，30位)、bookdate(日期，如“2020-09-21”)、price(浮点)、count(整数，库存)等字段。参照user表，编写图书操作的CRUD的sqlMap.js和bookApi.js,并在左侧导航中增加相应的图书操作的菜单和编写相对应的Vue组件。1.Vue3.0提供/注入实训--父组件操控子组件中div样式(1)掌握使用VueCLI创建Vue3.0简易工程项目的方法。(2)掌握Vue3.0中的提供/注入provide()/inject()函数的使用方法。(3)学会定义setup()函数和创建ref响应式对象。(4)学会使用provide()函数提供普通数据共享和ref响应式数据共享。(5)学会按需导入项目中所需要的函数。2.Vue3.0中Vuex和VueRouter实训--简易图书选购(1)学会使用VueCLI创建集成Vuex和VueRouter功能的Vue3.0工程项目。会使用手动或自动方式进行项目初始选项的设置。(2)熟悉默认初始创建项目的文件结构，并会与Vue2.x项目文件结构进行比较，总结Vue3.0项目文件结构的特点。(3)学会使用VueRouter定义路由、定义路由组件。会使用createRouter、createWebHistory两个API创建路由管理器router和history对象。(4)学会使用createStore创建store对象。根据状态数据的操作需要编写相关的mutations和actions。(5)学会在组件中导入useStoreAPI函数，并在setup()函数内触发相关的mutations或分发actions。学会导入useRouterAPI函数，并在setup()函数中使用路由器来切换路由。(6)完成项目的开发任务。六、课内实训（一）本课程实训的目的与要求通过本课程的课堂学习和实训，使学生加深理解Vue.js核心概念和基本语法，掌握内部指令和自定义指令、组件定义与通讯和过渡与动画等基础知识。能够熟练地运用VueRouter和Vuex组件技术解决实际工程中单页面导航和组件渲染及多组件状态数据共享。通过项目实训，让学生使用VueCLI脚手架来搭建Vue2.6和Vue3.0项目，通过项目实训，培养学生具有开发含状态数据共享和路由导航功能于一体的中小型Web单页面的能力。基本要求：1.熟练掌握Vue.js前端框架技术主流开发工具和环境部署方法。2.掌握Vue项目的组件化和模块化构建技术的核心思想与方法。2.深入学习VueRouter和Vuex组件技术，解决实际项目中路由导航和状态数据共享问题。4.学会使用VueCLI构建Vue2.6和Vue3.0项目。（二）本课程实训的项目和主要内容序号项目名称学时主要内容类型11-1.内置指令v-model实训--下拉列表框绑定0(课外实践)(1)学会定义Vue根实例对象及el和data选项。(2)学会引入Vue,完成Vue视图的定义。(3)学会使用v-model指令绑定select元素。设计性21-2.模板中v-bind指令实训--Vue实例中选项的配置(1)学会引入Vue、定义Vue实例及配置el、template和data的选项。(3)学会在template模板中使用data中的数据，并在模板中绑定class。设计性32-1.侦听属性的综合实训--动态观察学生信息采集。2(1)学会引入Vue.js及定义Vue实例对象、配置el和data等选项。(2)学会配置methods和watch等选项，并完成函数的定义。(3)学会使用v-model、v-bind、v-on等指令来完成表单绑定、属性绑定和事件绑定。设计性42-2.计算属性、方法、过滤器的综合实训--邮购商品业务(1)学会定义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实例对象，分别解决不同的应用需求，并配置el、data和directives等选项。(2)学会使用自定义指令的注册方法。会用全局注册和局部注册的方式定义相关的指令。(3)学会使用v-bind指令绑定style,给div设置相应的样式。设计性74-1.Vue.js基础案例实训--简易图书管理0(课外实践)使用HTML5表单元素，设计图书信息添加界面完成图书添加、图书搜索、图书删除。图书信息包含：图书ID、图书名称、出版社、作者、插入日期等字段。综合性84-2.Vue.js基础案例实训--我的待办事项使用HTML5表单完成界面设计。按“添加”按钮将待办事项添加到展示项目中。在复选框中打上勾号“√”标记一下完成的待办事项，单击“×”符号删除该事项。完成状态显示栏设置。剩余项目数/项目数、全部、待完成、已完成、清除完成等功能。综合性95-1.组件间通信实训--友谊聊吧2（1）学会定义Vue组件，并学会注册组件。（2）学会使用事件总线来实现任意组件间相互通信，能够使用$emit()和$on()来发送和接收消息。（3）学会定义Vue实例和配置相关选项，会定义相关方法。学会定义HTML5表单。设计性105-2.插槽综合实训--页面布局换肤(1)学会全局定义Vue组件，并完成组件的设计。(2)利用props属性实现父组件向子组件传值。(3)学会定义具名插槽来展示传递信息，利用动态插槽名的变更实现内容和样式的更新传递。设计性116-1.多组件过渡实训--京东--智能生活-部分菜单仿真设计2(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS定义超链接等标记的样式，学会使用过渡类名，并完成多组件过渡样式定义。(3)学会trsnaition组件及动态组件实现多个组件切换显示。设计性126-2.列表过渡实训--列表添加、删除及重新排序(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS3定义按钮、列表及列表项的样式效果。(3)学会使用lodash.js来定义列表项弹跳式动画（洗牌（_.shuffle(arrayName)）效果。(4)学会使用transition-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)学会使用VueUI启动图形化界面创建工程项目。(2)学会使用VueUI创建与管理Vue项目（创建、预设、配置等）。验证性/操作性158-1.Vue+VueRouter+webpack组合2(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router插件。(3)学会使用VueRouter设置导航、定义路由、定义路由组件、定义路由管理器实例。(4)参照天猫中“服饰主会场”中部分页面效果。使用Vue+VueRouter+Webpack完成项目实训。设计性168-2.VueRouter+webpack项目(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router插件。(3)学会使用VueRouter设置导航、定义路由及嵌套路由、定义路由组件、定义路由管理器实例。(4)参照“百度推广”首页导航（/ebaidu/home）。使用Vue+VueRouter+Webpack完成项目实训。设计性179-1.Vuex项目实训--计数器counter2(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入Vuex。(3)学会使用Vuex的state、getters、mutations、actions等核心概念解决工程应用中状态共享问题。(4)学会使用计算属性和辅助函数获取Vuex状态。(5)学会在组件中使用this.$store.state获取状态，使用this.$mit触发mutation及使用this.$store.dispatch分发action。(6)学会编写action和mutation函数，并习惯使用action去触发mutation。设计性189-2.Vuex项目实战--Vuex-IT管理学院信息管理系统综合运用Vuex的五大核心概念，使用多module来分割store，同时使用命名空间来区分使用不同模块的action。以“IT管理学院信息管理系统”为例，简易实现教师和学生的管理。教师端。主要功能是输入教师信息，并添加到教师列表中，然后可能给指定ID的教师增加薪酬，并将增加薪酬的教师信息添加背景颜色来标识一下。学生端。主要功能是给学生增加成绩，每次递增5分，最高成绩为100分，成绩范围：30～95。综合性1910-1.Vant官方示例合集实训--使用Vant搭建应用0(课外实践)(1)学会从GitHub上下载相关项目资源（/youzan/vant-demo），并能够按照README.md提示的步骤进行项目部署。(2)熟悉Vant-Demo（vant-demo-master）项目中vant/base子项目所采用的技术栈（Vue、VueCli、VueRouter、Vant）。(3)学会使用VueRouter定义路由、定义路由组件、定义路由管理器实例。(4)熟悉使用Vue+VueRouter+Vant构建项目，了解项目文件构成结构。验证性2010-2.Vue+Element表格组件实训--带搜索功能的表格数据分页显示(1)学会使用CDN或本地引入Vue和ElementUI。(2)熟悉ElementUI组件库中组件的分类，重点掌握输入框组件（el-input）、表格组件(el-table、el-table-column)、行/列组件(el-row、el-col)和按钮(el-button)等组件的使用方法。(3)掌握分页组件(el-pagination)的layout、background、size、pager-count、total、small等属性的含义与设置方法。设计性2111-1.Vue.js高级应用实训--友联通讯录0(课外实践)自己动手，完成“友联通讯录”的所有功能实训练习。并尝试对友联通讯录主页面addressBook.vue文件进行修改，使用ElementUI中Pagination分页组件实现通讯录按设定的“行/页”格式显示。综合性2211-2.Vue.js高级应用实训--通用登录/注册管理系统熟悉Vue前后端分离项目的开发流程，自己动手，完成“通用登录/注册管理系统”的所有功能实训练习。(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样式2(1)掌握使用VueCLI创建Vue3.0简易工程项目的方法。(2)掌握Vue3.0中的提供/注入provide()/inject()函数的使用方法。(3)学会定义setup()函数和创建ref响应式对象。(4)学会使用provide()函数提供普通数据共享和ref响应式数据共享。(5)学会按需导入项目中所需要的函数。综合性2412-22.Vue3.0中Vuex和VueRouter实训--简易图书选购(1)学会使用VueCLI创建集成Vuex和VueRouter功能的Vue3.0工程项目。会使用手动或自动方式进行项目初始选项的设置。(2)熟悉默认初始创建项目的文件结构，并会与Vue2.x项目文件结构进行比较，总结Vue3.0项目文件结构的特点。(3)学会使用VueRouter定义路由、定义路由组件。会使用createRouter、createWebHistory两个API创建路由管理器router和history对象。(4)学会使用createStore创建store对象。根据状态数据的操作需要编写相关的mutations和actions。(5)学会在组件中导入useStoreAPI函数，并在setup()函数内触发相关的mutations或分发actions。学会导入useRouterAPI函数，并在setup()函数中使用路由器来切换路由。(6)完成项目的开发任务。综合性（三）实验说明课程总学分4实验学时数16实验项目数24考核方式日常考核√操作技能考核□卷面考核□提交实验结果√面试□适用专业与年级：计算机科学与技术、软件工程、信息管理与信息系统、网络工程、数字媒体技术、物联网工程等相关专业1-3年级七、课程实施计划序号教学方式教学内容作业要求教学目标1课堂讲课△△2.1.1MVC模式△练习1掌握常用的Vue.js开发工具。学会配置Vue.js生产环境。掌握Vue.js页面的基本组成。学会编写最基本的Vue.js页面。理解MVC、MVVM模式的工作机制。掌握多种类型数据绑定的方法。2课堂讲课△△★★★★△△掌握计算属性与方法在使用上的区别。学会使用侦听属性处理数据变化的相关事务。学会基本的控制台输出语句【根据学时和教学要求自选确定教学内容】理解生命周期钩子函数在使用上的差异性。3课堂讲课△△★★★学会定义及使用数据对象掌握数据实例的相关方法掌握数据中数组对象的变异与非变异方法学会定义与使用过滤器4上机实训实训2-1、实训2-2练习25课堂讲课△3.1.1△条件渲染 3.1.2△用key管理可复用的元素3.1.3△根据条件展示元素v-show 3.1.4△列表渲染v-for指令理解Vue.js指令的定义与分类。掌握条件渲染指令的使用与注意事项。掌握列表渲染指令v-for的多种定义方法6课堂讲课3.1.5△绑定属性v-bind指令 3.1.6△事件处理v-on指令 3.1.7事件修饰符 3.1.8按键修饰符v-for指令及v-bind:key属性配合使用的方法。掌握数据绑定的多种方式。掌握事件处理指令及事件修饰符的使用方法。7课堂讲课3.1.9△v-model表单输入绑定 3.1.10表单元素值绑定 3.1.11v-model与修饰符 3.1.12v-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课堂讲课△★△★掌握Vue自定义指令定义与注册的方法。9上机实训实训3-1、实训3-210课堂讲课课外实训4-1、4-2掌握Vue简易项目基本组成。学会在项目中引入Vue.js。掌握常用v-for、v-bind、v-on、v-model、v-show等指令的使用方法。掌握Vue过滤器的定义方法。11课堂讲课★★★熟悉组件的命名规范。掌握全局、局部注册组件的方法。掌握组件间常用的通信方法。12上机实训★★掌握兄弟组件间通信方法。学会使用父链this.$parent和子组件索引this.$refs来使用组件的数据理解单文件组件的构成。13课堂讲课★★★★★掌握插槽的分类和定义方法。14上机实训实训5-1、实训5-2练习515课堂讲课△△△△熟悉过渡类名的含