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为空。

四、任务实施实施流程（一）关键字搜索功能（二）格式化时间功能

四、任务实施（一）关键字搜索功能搜索使用模糊匹配，输入关键字后自动过滤并显示，