《Vue.js綜合項目實踐》課件-任務(wù)四 關(guān)鍵字搜索與日期格式轉(zhuǎn)換功能

Vue.js核心技術(shù)應(yīng)用——任務(wù)四關(guān)鍵字搜索與日期格式轉(zhuǎn)換功能學(xué)習(xí)目標(biāo)掌握列表渲染掌握事件綁定及事件處理方法定義掌握過濾器的使用掌握常用函數(shù)indexOf用法掌握常用函數(shù)forEach用法掌握常用函數(shù)padstart用法知識目標(biāo)對具體任務(wù)的分析解讀能力對分析后的操作實施能力對程序的查錯糾錯能力技能目標(biāo)培養(yǎng)設(shè)計能力養(yǎng)成主動思考、自主學(xué)習(xí)的習(xí)慣提升發(fā)現(xiàn)問題、分析問題、解決問題的能力培養(yǎng)創(chuàng)新思維、發(fā)散思維培養(yǎng)良好的溝通交流、語言表達(dá)及團(tuán)隊合作能力素養(yǎng)目標(biāo)一、任務(wù)描述本任務(wù)主要實現(xiàn)對關(guān)鍵字搜索與日期格式轉(zhuǎn)換功能。導(dǎo)航區(qū)域包含信息顯示、根據(jù)姓名自動搜索過濾顯示的功能。若沒有搜索到匹配數(shù)據(jù)，則提示“對不起，沒有數(shù)據(jù)”。登記時間默認(rèn)以系統(tǒng)時間為準(zhǔn)自動添加，日期格式為“年-月-日時:分:秒”使用過濾功能實現(xiàn)。當(dāng)月、日、時、分、秒為1位數(shù)時自動在左側(cè)填充0。二、任務(wù)分析本任務(wù)是讓學(xué)生掌握列表渲染中遍歷動態(tài)數(shù)組、常用函數(shù)和用戶交互。根據(jù)任務(wù)描述，需要進(jìn)行如下分析：（1）使用v-model實現(xiàn)數(shù)據(jù)雙向綁定；（2）使用v-for列表渲染實現(xiàn)遍歷動態(tài)數(shù)組；（3）使用forEach方法循環(huán)遍歷；（4）使用indexOf方法查找匹配數(shù)據(jù)；（5）添加交互驗證。三、相關(guān)知識（一）過濾器過濾器，在官方文檔中，是這樣說明的：可被用于一些常見的文本格式化。通俗解釋過濾就是一個數(shù)據(jù)經(jīng)過了這個過濾之后出來另一樣?xùn)|西，可以是從中取得你想要的，或者給那個數(shù)據(jù)添加點什么裝飾，那么過濾器則是過濾的工具。例如，從['abc','abd','ade']數(shù)組中取得包含‘a(chǎn)b’的值，那么可通過過濾器篩選出來‘a(chǎn)bc’和‘a(chǎn)bd’；把‘Hello’變成‘HelloWorld’，那么可用過濾器給值‘Hello’后面添加上‘World’；或者把時間節(jié)點改為時間戳等等都可以使用過濾器。過濾器分為全局過濾器和局部過濾器。可以作用在兩個地方：雙花括號插值，如{{'ok'|Filter}}和v-bind表達(dá)式，如{{'ok'|Filter}}。三、相關(guān)知識（一）過濾器1.局部過濾器局部過濾器顧名思義只作用于局部，即所定義的vue實例。過濾函數(shù)定義在vm實例的filters配置中。2.全局過濾器相比于局部過濾器只作用于所屬vue實例，全局過濾器可以作用于多個vue實例。全局過濾器單獨定義，通過Vue.filter(”過濾器名稱”,處理函數(shù))方法定義，其中有兩個參數(shù)，參數(shù)1為過濾器的名稱，參數(shù)2為處理函數(shù)。三、相關(guān)知識（一）過濾器3.過濾器總結(jié)局部過濾器與全局的過濾器定義和使用方法一樣。唯一的區(qū)別在于局部過濾器是定義在vue的實例中。其作用的區(qū)域也是vue實例對象內(nèi)，超出即不可用。在使用過程中，還有一些注意事項： 當(dāng)局部過濾器與全局過濾器名稱相同時，就近原則來調(diào)用，即局部過濾器優(yōu)先于全局過濾器被調(diào)用； 一個表達(dá)式可以使用多個過濾器； 過濾器之間需要用管道符“|”隔開，其執(zhí)行順序從左往右。 過濾器可以串聯(lián)，如{{message|filterA|filterB}}，filterA被定義為接收單個參數(shù)的過濾器函數(shù)，表達(dá)式message的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個參數(shù)的過濾器函數(shù)filterB，將filterA的結(jié)果傳遞到filterB中。 多個參數(shù)傳值，過濾器是JavaScript函數(shù)，因此可以接收參數(shù)，如{{message|filterA('arg1',arg2)}}，這里，filterA被定義為接收三個參數(shù)的過濾器函數(shù)。其中message的值作為第一個參數(shù)，普通字符串‘a(chǎn)rg1’作為第二個參數(shù)，表達(dá)式arg2的值作為第三個參數(shù)。三、相關(guān)知識（二）常用函數(shù)1.forEach方法forEach()是前端開發(fā)中操作數(shù)組的一種方法，主要功能是遍歷數(shù)組，其實就是for循環(huán)的升級版，該語句需要有一個回調(diào)函數(shù)作為參數(shù)。其中回調(diào)函數(shù)的形參依次為：1、value：遍歷數(shù)組的內(nèi)容；2、index：對應(yīng)數(shù)組的索引，3、array：數(shù)組自身。2.indexOf方法indexOf()方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。如果沒有找到匹配的字符串則返回-1，反之，找到返回位置下標(biāo)。三、相關(guān)知識（二）常用函數(shù)3.splice方法Vue中使用splice()方法來添加、刪除、替換數(shù)組內(nèi)某一個或者幾個值。語法格式為splice(index,len,[item])，其中index為數(shù)組開始下標(biāo)，len為要替換、刪除的長度，item為要替換的值，刪除操作的話item為空。四、任務(wù)實施實施流程（一）關(guān)鍵字搜索功能（二）格式化時間功能四、任務(wù)實施（一）關(guān)鍵字搜索功能搜索使用模糊匹配，輸入關(guān)鍵字后自動過濾并顯示，若沒有搜索到則給出提示信息。四、任務(wù)實施（一）關(guān)鍵字搜索功能首先，我們?yōu)樗阉骺蛱砑觱-model屬性實現(xiàn)數(shù)據(jù)綁定并初始化keywords。然后添加search方法，將原來靜態(tài)對象數(shù)組改為動態(tài)對象數(shù)組。四、任務(wù)實施（一）關(guān)鍵字搜索功能在搜索框中輸入姓名關(guān)鍵字，自動搜索匹配數(shù)據(jù)顯示。由于關(guān)鍵字是變化的，因此，初始化的對象數(shù)組將無法滿足動態(tài)變化。這就需要根據(jù)關(guān)鍵字重新渲染新的對象數(shù)組。四、任務(wù)實施（一）關(guān)鍵字搜索功能添加search方法，獲取到關(guān)鍵字后在數(shù)組中遍歷，如果在名稱中遍歷到關(guān)鍵字，則將該對象加入到新數(shù)組中，最后返回新數(shù)組并顯示在頁面中。四、任務(wù)實施（二）格式化時間功能將默認(rèn)時間按照給定格式顯示。當(dāng)月、日、時、分、秒不足2位時，在左側(cè)填充0，以達(dá)到美觀。四、任務(wù)實施（二）格式化時間功能首先，定義全局過濾器，命名為dataFormat。獲取當(dāng)前時間，提取出年月日時分秒后重新組合成字符串返回。四、任務(wù)實施（二）格式化時間功能為登記時間添加管道符，實現(xiàn)日期格式的過濾。四、任務(wù)實施（二）格式化時間功能對月、日、時、分、秒使用padStart函數(shù)進(jìn)行處理，實現(xiàn)不足2位左側(cè)補(bǔ)0效果。五、任務(wù)評估（一）考核方法本任務(wù)采用線上+線下、教師評價、組間互評等“工程師+教師+學(xué)生+平臺”多主體參與的過程性、多元化、個性化、綜合化考核評價模式。從多角度全面考察，更加客觀科學(xué)，也更好地調(diào)動學(xué)生自主學(xué)習(xí)、獨立思考和勇于創(chuàng)新的積極性，并將小組團(tuán)隊考核帶入個人考核，突出團(tuán)隊協(xié)作能力的培養(yǎng)。1.由網(wǎng)絡(luò)教學(xué)平臺全程記錄學(xué)生的學(xué)習(xí)軌跡和得分詳情，按照預(yù)先設(shè)置的權(quán)重，將線下評價與線上評價相結(jié)合，自動分析生成學(xué)生的綜合成績；2.答辯式。針對提前完成項目的學(xué)生可以隨時可申請考核，提前通過對項目的詳細(xì)分析和講解，通過企業(yè)工程師、老師和同學(xué)提問的方式進(jìn)行考核，由企業(yè)工程師和專業(yè)老師共同把關(guān)。五、任務(wù)評估（二）相關(guān)知識評估1.過濾器的使用場景？2.全局過濾器和局部過濾器區(qū)別？3.如何使用常用函數(shù)forEach？4.如何使用常用函數(shù)indexOf？5.如何使用常用函數(shù)padStart？五、任