Vue.js核心技术应用——任务二添加学生信息功能

学习目标掌握列表渲染掌握v-model使用掌握事件绑定及事件处理方法定义掌握常用数组函数push了解MVVM模型知识目标对具体任务的分析解读能力对分析后的操作实施能力对程序的查错纠错能力技能目标培养设计能力养成主动思考、自主学习的习惯提升发现问题、分析问题、解决问题的能力培养创新思维、发散思维培养良好的沟通交流、语言表达及团队合作能力素养目标

一、任务描述本任务主要实现对学生信息的添加，要求在添加学生信息区域中，可输入学生编号、姓名、专业，点击添加按钮后显示在下方数据区。每次添加完学生信息后清空文本框，方便下次录入。当信息为空时给出提示。

二、任务分析本任务是让学生掌握列表渲染、理解数据双向绑定原理、事件及处理方法、常用函数和用户交互。根据任务描述，需要进行如下分析：（1）使用v-for列表渲染数据；（2）为元素添加v-model属性；（3）绑定事件及事件处理方法；（4）添加交互验证。

三、相关知识（一）Vue实例配置选项详解1.methods定义方法在实际的开发中，经常需要用到函数，通过将一些需要复用的逻辑封装在函数里，多次调用这个函数来达到逻辑代码复用的目的。在vue中，函数被定义成为方法来使用，这些方法定义在methods选项中，然后在vue表达式中调用函数。2.watch监听状态与计算属性computed有类似效果的还有监听状态watch，它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。但watch和computed也有明显不同的地方：watch和computed各自处理的数据关系场景不同：? watch擅长处理的场景：一个数据影响多个数据；? computed擅长处理的场景：一个数据受多个数据影响。

三、相关知识（二）理解MVVM模型MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。MVC即Model-View-Controller的缩写，就是模型—视图—控制器，也就是说一个标准的Web应用程式是由这三部分组成的：View：用来把数据以某种方式呈现给用户Model：其实就是数据Controller：接收并处理来自用户的请求，并将Model返回给用户

三、相关知识（三）内置指令v-bindv-onv-model按键修饰符v-forkey属性

三、相关知识（四）常用函数1.push方法为了更好的检测数组变化，Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：push()、pop()、shift()、splice()等。其中，push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。

四、任务实施实施流程（一）添加功能（二）文本框数据初识为空（三）非空校验

四、任务实施（一）添加功能若编号、姓名、专业字段非空，点击添加按钮添加成功。

四、任务实施（一）添加功能首先，将学生信息各个字段添加v-model属性，实现数据的双向绑定，并为添加按钮绑定点击事件，点击后触发add方法。

四、任务实施（二）文本框数据初识为空在data属性中对id、name、major做数据初始化处理。

四、任务实施（二）文本框数据初识为空

四、任务实施（三）非空校验add方法中，当三个字段都不为空时，点击添加按钮添加成功，否则，弹出提示框提示“学生信息不能为空”。

四、任务实施（三）非空校验

五、任务评估（一）考核方法本任务采用线上+线下、教师评价、组间互评等“工程师+教师+学生+平台”多主体参与的过程性、多元化、个性化、综合化考核评价模式。从多角度全面考察，更加客观科学，也更好地调动学生自主学习、独立思考和勇于创新的积极性，并将小组团队考核带入个人考核，突出团队协作能力的培养。1.由网络教学平台全程记录学生的学习轨迹和得分详情，按照预先设置的权重，将线下评价与线上评价相结合，自动分析生成学生的综合成绩；2.答辩式。针对提前完成项目的学生可以随时可申请考核，提前通过对项目的详细分析和讲解，通过企业工程师、老师和同学提问的方式进行考核，由企业工程师和专业老师共同把关。

五、任务评估（二）相关知识评估1.如何定义方法？2.计算属性和监听的使用场景？3.如何理解MVVM模型？4.常用的内置指令有哪些？如何使用内置指令？5.如何使用列表渲染？6.常用函数push的使用场景？

五、任务评估（三）任务效果评估线场课堂学生信息管理系统-页面布局设计（由