《Vue.js综合项目实践》课件-任务四 关键字搜索与日期格式转换功能

Vue.js核心技术应用——任务四关键字搜索与日期格式转换功能学习目标掌握列表渲染掌握事件绑定及事件处理方法定义掌握过滤器的使用掌握常用函数indexOf用法掌握常用函数forEach用法掌握常用函数padstart用法知识目标对具体任务的分析解读能力对分析后的操作实施能力对程序的查错纠错能力技能目标培养设计能力养成主动思考、自主学习的习惯提升发现问题、分析问题、解决问题的能力培养创新思维、发散思维培养良好的沟通交流、语言表达及团队合作能力素养目标一、任务描述本任务主要实现对关键字搜索与日期格式转换功能。导航区域包含信息显示、根据姓名自动搜索过滤显示的功能。若没有搜索到匹配数据，则提示“对不起，没有数据”。登记时间默认以系统时间为准自动添加，日期格式为“年-月-日时:分:秒”使用过滤功能实现。当月、日、时、分、秒为1位数时自动在左侧填充0。二、任务分析本任务是让学生掌握列表渲染中遍历动态数组、常用函数和用户交互。根据任务描述，需要进行如下分析：（1）使用v-model实现数据双向绑定；（2）使用v-for列表渲染实现遍历动态数组；（3）使用forEach方法循环遍历；（4）使用indexOf方法查找匹配数据；（5）添加交互验证。三、相关知识（一）过滤器过滤器，在官方文档中，是这样说明的：可被用于一些常见的文本格式化。通俗解释过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘HelloWorld’，那么可用过滤器给值‘Hello’后面添加上‘World’；或者把时间节点改为时间戳等等都可以使用过滤器。过滤器分为全局过滤器和局部过滤器。可以作用在两个地方：双花括号插值，如{{'ok'|Filter}}和v-bind表达式，如{{'ok'|Filter}}。三、相关知识（一）过滤器1.局部过滤器局部过滤器顾名思义只作用于局部，即所定义的vue实例。过滤函数定义在vm实例的filters配置中。2.全局过滤器相比于局部过滤器只作用于所属vue实例，全局过滤器可以作用于多个vue实例。全局过滤器单独定义，通过Vue.filter(”过滤器名称”,处理函数)方法定义，其中有两个参数，参数1为过滤器的名称，参数2为处理函数。三、相关知识（一）过滤器3.过滤器总结局部过滤器与全局的过滤器定义和使用方法一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例对象内，超出即不可用。在使用过程中，还有一些注意事项： 当局部过滤器与全局过滤器名称相同时，就近原则来调用，即局部过滤器优先于全局过滤器被调用； 一个表达式可以使用多个过滤器； 过滤器之间需要用管道符“|”隔开，其执行顺序从左往右。 过滤器可以串联，如{{message|filterA|filterB}}，filterA被定义为接收单个参数的过滤器函数，表达式message的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB，将filterA的结果传递到filterB中。 多个参数传值，过滤器是JavaScript函数，因此可以接收参数，如{{message|filterA('arg1',arg2)}}，这里，filterA被定义为接收三个参数的过滤器函数。其中message的值作为第一个参数，普通字符串‘arg1’作为第二个参数，表达式arg2的值作为第三个参数。三、相关知识（二）常用函数1.forEach方法forEach()是前端开发中操作数组的一种方法，主要功能是遍历数组，其实就是for循环的升级版，该语句需要有一个回调函数作为参数。其中回调函数的形参依次为：1、value：遍历数组的内容；2、index：对应数组的索引，3、array：数组自身。2.indexOf方法indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回-1，反之，找到返回位置下标。三、相关知识（二）常用函数3.splice方法Vue中使用splice()方法来添加、删除、替换数组内某一个或者几个值。语法格式为splice(index,len,[item])，其中index为数组开始下标，len为要替换、删除的长度，item为要替换的值，删除操作的话item为空。四、任务实施实施流程（一）关键字搜索功能（二）格式化时间功能四、任务实施（一）关键字搜索功能搜索使用模糊匹配，输入关键字后自动过滤并显示，若没有搜索到则给出提示信息。四、任务实施（一）关键字搜索功能首先，我们为搜索框添加v-model属性实现数据绑定并初始化keywords。然后添加search方法，将原来静态对象数组改为动态对象数组。四、任务实施（一）关键字搜索功能在搜索框中输入姓名关键字，自动搜索匹配数据显示。由于关键字是变化的，因此，初始化的对象数组将无法满足动态变化。这就需要根据关键字重新渲染新的对象数组。四、任务实施（一）关键字搜索功能添加search方法，获取到关键字后在数组中遍历，如果在名称中遍历到关键字，则将该对象加入到新数组中，最后返回新数组并显示在页面中。四、任务实施（二）格式化时间功能将默认时间按照给定格式显示。当月、日、时、分、秒不足2位时，在左侧填充0，以达到美观。四、任务实施（二）格式化时间功能首先，定义全局过滤器，命名为dataFormat。获取当前时间，提取出年月日时分秒后重新组合成字符串返回。四、任务实施（二）格式化时间功能为登记时间添加管道符，实现日期格式的过滤。四、任务实施（二）格式化时间功能对月、日、时、分、秒使用padStart函数进行处理，实现不足2位左侧补0效果。五、任务评估（一）考核方法本任务采用线上+线下、教师评价、组间互评等“工程师+教师+学生+平台”多主体参与的过程性、多元化、个性化、综合化考核评价模式。从多角度全面考察，更加客观科学，也更好地调动学生自主学习、独立思考和勇于创新的积极性，并将小组团队考核带入个人考核，突出团队协作能力的培养。1.由网络教学平台全程记录学生的学习轨迹和得分详情，按照预先设置的权重，将线下评价与线上评价相结合，自动分析生成学生的综合成绩；2.答辩式。针对提前完成项目的学生可以随时可申请考核，提前通过对项目的详细分析和讲解，通过企业工程师、老师和同学提问的方式进行考核，由企业工程师和专业老师共同把关。五、任务评估（二）相关知识评估1.过滤器的使用场景？2.全局过滤器和局部过滤器区别？3.如何使用常用函数forEach？4.如何使用常用函数indexOf？5.如何使用常用函数padStart？五、任