vue - Vue腳手架/TodoList案例

来源:https://www.cnblogs.com/heymar/archive/2022/05/06/16240543.html
-Advertisement-
Play Games

今天做了一個案例,可以好好做做能夠將之前的內容結合起來,最主要的是能對組件化編碼流程有一個大概的清晰認知,這一套做下來,明天自己再做一遍複習一下,其實組件化流程倒是基本上沒什麼問題了,主要是很多vue的方法需要多熟悉一下,畢竟打破了之前的一些對於傳統js的認知,還需要多熟悉一下。 這兩天可能內容不是 ...


今天做了一個案例,可以好好做做能夠將之前的內容結合起來,最主要的是能對組件化編碼流程有一個大概的清晰認知,這一套做下來,明天自己再做一遍複習一下,其實組件化流程倒是基本上沒什麼問題了,主要是很多vue的方法需要多熟悉一下,畢竟打破了之前的一些對於傳統js的認知,還需要多熟悉一下。
這兩天可能內容不是很多,因為有點感冒了,狀態不是很好,不想學多了怕接受的是不是很好。

六.TODOList案例

做這個案例主要是為了能夠熟悉組件化編碼流程,剛開始學做一個項目最好按照以下三個步驟來

1.實現靜態組件

先把一個項目抽取組件,使用組件實現靜態頁面

image-20220506140243988

比如這個案例App的子組件就可以拆分為三個上面輸入框,中間列表展示,下麵總結欄,其實組件的劃分就是按照他的功能點來劃分的,

比如子組件按照功能劃分了三個組件,list里每一個item是不是有自己的功能可以勾選,可以刪除,所以又可以進一步細分組件(如果你拆完一個組件發現很難起名字,說明你拆的不是很合理

  • 既然已經拆分好組件了,就可以去vue項目裡面寫我們的組件了,創建、導入、註冊三步曲完成

image-20220506142134256

  • 接下來應該有我們的靜態模板了,是這樣的,一般情況下我們的一個項目大多數已經完成了一些了,所以不會從零開始,這個時候老闆派給你個任務叫你把這個實現組件化開發,你就直接把html先一股腦的塞到 App.vue裡面,可以啟動伺服器看到整體的一個效果,然後再去一步一步把代碼拆分進我們的組件裡面去

    註意:有很多問題是語法報錯,將那個lintonsave關閉即可

image-20220506144038677

  • 然後就可以開始拆分了,其他不說這個list裡面每一條數據看出了拆分組件的重要性,我直接在list組件復用item就可以了

    image-20220506145018401

  • css拆分時要註意:base等公共樣式放在App.vue,其他各自的樣式各回各家但是要註意添加scoped

2.展示動態數據

將我們項目中需要動態真實的數據存起來 一般是數組加對象的的形式,一個對象一條數據裡面有id、name等等

那麼數據一般保存在哪裡? 回顧一下之前props的案例,我們的數據是不是寫在父組件裡面的,通過子組件標簽傳給了他,子組件才能用props來接受外部傳來的數據,所以我們的數據要定義在每條數據這個組件的父組件

image-20220506153039593

在我們定義數據這裡幾個註意點:

  • id為什麼用字元串,因為數值型會有上限,字元串沒有
  • 既然數據都有了,所以這裡就不用一個一個去寫子組件標簽了直接v-for列表渲染
  • 最關鍵的:我們要將數據傳到子組件裡面去吧,這裡不再是像以前那樣,一個一個傳,這裡直接是傳的一個對象,而且還是遍歷出來的每一條對象,還必須要動態綁定,不動態綁定這裡就是一個字元串

子組件這邊,註意一下props接受參數要用引號包裹,然後就是怎麼來讓我們的覆選框動態的獲取到有沒有勾選,讓其動態綁定值為我們數據裡面的值即可

image-20220506154038646

3.添加

首先我們實現回車添加數據的邏輯,肯定是要生成一個對象然後添加進那個數組裡面,這裡的id由於滅有資料庫支持,就採用了一個包,uuid可以生成全球唯一id,但是他體積表較大,這裡用的是另一個體積小一點的 nanoid

image-20220506161858206

接下來問題就來了,我們這個數據是在header裡面添加的,而我們的數據是在list,我們學過父組件給子組件傳數據(props),但是沒有學過兄弟關係來傳數據吧,這裡才去最基礎的方法來實現

image-20220506162115401

我們吧list裡面定義的數據data放到app組件裡面去,然後app通過動態綁定將數據傳到list的組件標簽,這個時候list用props來接受傳過來的值

最主要的是怎麼把子組件header傳到父組件app裡面去:我們在app定義一個函數然後接受形參,將這個函數動態綁定給到header,header通過props就能夠得到這個函數,然後重要的一步 我將這個函數寫在鍵盤事件裡面,同時參數是我們的創建的數據,就相當於調用了這個函數,調用不要緊,關鍵是這個函數式app送給你用的,你調用(送給你用的所以拿過來是存在於vc實例對象上)拿我app不就拿到了這個參數嗎所以,app現在又有參數,又定義了數據,那麼添加的邏輯就開始了

image-20220506164314041

image-20220506164444567

4.勾選

我們要在item裡面來勾選,從而影響到數據裡面的completed這個選項,我們的數據是定義在App裡面的,有一句話叫做 數據在哪裡,那麼處理數據的方法就寫在哪裡,所以這裡好像又要用到子組件給父組件東西了,給什麼?我勾選的狀態實在item里進行的,我必須拿到勾選的這一個id,才能在處理數據的方法裡面以id為參數對數據記性遍歷找到對應的那一個將他的completed的值改為非值

image-20220506172051688

image-20220506172213243

這裡有一個註意點,把我們之前這個勾選的所有邏輯推翻,直接在item的input標簽裡面寫一個v-model,我們說覆選框v-model預設收集的是checked的值,如果我把v-model設置為todo.completed是不是就讓我們的checked動態綁定了,他為true,checked就為true,第一步初始化數據的勾選完成了,這裡還有一個更重要的,你該數據也同樣可以改到data裡面的數據,因為v-model本身就是雙向綁定,但是我們前面也說過,props接收到的數據不能改,這裡很明顯是通過props傳過來的數據改到的,為什麼這裡沒報錯呢,因為vue對於對象改動的檢測有點類似於 const,一般數據確實數據變了就是改動了,但是數組和對象通過屬性名或者下標去改某一個值並不叫改動,要變動整個數組和對象才叫改動,所以這裡沒有報錯,這個方法是簡單但是,官方定義的props傳過來的數據不能改,最好還是不要改,萬一哪天這個數據不是對象里的值了,就麻煩了,最好還是按照語法規則來

image-20220506174549880

5.刪除

主題邏輯剛上面差不多,點擊刪除返回id,app傳過來一個函數接受這個id,然後數組的篩選方法filter讓我們的數據等於篩選出來的新數組,這裡就不考慮性能問題了,假裝是個標記刪除吧,刪除了雖然還在但是也永遠不會給你顯示出來了,所以可以直接把他賦值給這個原數據,還有一個點confirm確認框,會彈出一個對話框內容為你傳進去的參數,配合if來使用可以達到只有你點擊確定了才會執行後面的邏輯

image-20220506180635090

image-20220506180739900

6.底部統計

既然是統計,那肯定要用計算節點來做,這裡用到了數組的reduce方法,要註意的是,prev每次返回要等於他自己

image-20220506183427810

7.底部交互

先完成我們點擊了所有的勾選框,下麵全選會勾上,但凡少勾選一個都不會鉤上的邏輯,其實很簡單,將我們全部的這個數量也弄成一個計算屬性,然後將我們全選動態綁定,且返回值也由計算屬性來決定,直接去比較已完成和全部是否相等

image-20220506190208956

探後就是我們的全選功能,邏輯是這樣,點擊一下,通過e獲取他的checked的值,然後又要動到數據了,需要app裡面對數組做一個迴圈對所有的數據的completed的值都等於這個checked的值

image-20220506191042427

但是這樣有一個bug,當我們刪完後,會是勾選狀態,應該為不勾選並且隱藏掉

image-20220506191130675

在我們剛纔完成點擊點擊上面,下麵全選也會對應去勾選上那裡的邏輯完善一下,因為原來的寫法,就是當已完成和總數一樣的時候就會勾選上,那麼最後刪完了,也是一樣的所以不行

image-20220506191636723

通過v-if添加在footer即可

image-20220506191825518

好了,可以忘掉這一章節實現的功能了,簡便方法他來了

我們這裡的全選框有些啥子東西,一個管初始化讀取數據的,一個改數據的,又是input,讀寫,想到他沒有v-model

image-20220506192144274

我們用v-model去綁定isAll的值也就是判斷有沒有全選的值,即可完成讀的操作,仔細想想是不是

image-20220506192639195

image-20220506192652247

但是這裡改的話會報錯,為什麼?

因為我們的isAll是計算屬性,你改動他的值,你setter都沒有怎麼改,所以這裡要這麼做,定義一個setter,並且把這個值給到我們剛纔定義的迴圈讓所有值都等於這個checked的App組件上的函數

image-20220506193301786

為什麼這裡可以使用v-model前面是因為那個值時props傳過來的值肯定不能改,而這裡是我們寫在這個組件的計算屬性屬於自己的

8.清除已完成的任務

最後一個功能,很簡單直接一個點擊事件,在app這邊做一個數組篩選,篩選的是completed沒被選中的

9.總結

組件化編碼流程

  • 拆分靜態組件,按照功能拆分
  • 實現動態組件,考慮好數據的位置,如果數據是一個組件在用就放到這個組件,如果數據是一些組件在用,就放到他們的共同的父組件(這種方法也叫做狀態提升)
  • 實現交互(從綁定事件開始)
  • props不僅適合父給子傳數據,還可以子給父傳數據(父會給子一個函數)
  • v-model註意修改的值是不是props過來的,不是他過來的還是可以用的還是很方便的
  • 修改對象裡面的值跟const一樣改單個值不會被髮現,要修改整個對象

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文例子參考《STM32單片機開發實例——基於Proteus虛擬模擬與HAL/LL庫》 源代碼:https://github.com/LanLinnet/STM33F103R6 項目要求 實現矩陣鍵盤掃描,當按下任意一個按鈕時,數位管立即顯示當前按下按鈕對應鍵值。 硬體設計 在第一節的基礎上,在Pr ...
  • 文章作者:阿裡零售通演算法團隊 出品社區:DataFun 導讀: 零售通作為阿裡巴巴新零售的八路大軍之一,肩負著“共建智能分銷平臺”和“讓百萬小店擁抱DT時代”的重要使命。一方面,我們通過線上平臺(零售通APP)將零售品牌商的貨品展現給小店的店主,並提供交易渠道讓店主進行批發進貨;另一方面,我們通過天 ...
  • 環境準備 客戶端 Windows 10 ArcCatalog 10.8.1 精簡版Oracle Client 12 - 32 bit 安裝包名稱:instantclient-basic-nt-12.1.0.2.0.zip Navicat Premium 15 服務端 Windows Server 2 ...
  • 線上服務的MongoDB中有一個很大的表,我查詢時使用了sort()根據某個欄位進行排序,結果報了下麵這個錯誤: [Error] Executor error during find command :: caused by :: Sort operation used more than the ...
  • 基於 OpenAtom OpenHarmony(以下簡稱“OpenHarmony”)源碼寫點內容,幫助大家瞭解下協議開發領域,儘可能將 3gpp 協議內容與 OpenHarmony 電話子系統模塊進行結合講解。 ...
  • 變聲是直播類、聊天類應用中用戶經常使用的功能。例如:很多主播選擇使用變聲器來實現帶動直播間氣氛;和朋友語音聊天時選擇變成蘿莉音讓聊天更有趣。HMS Core音頻編輯服務提供變聲能力,幫助開發者在應用中構建變聲功能。用戶可以通過預置的變聲風格進行變聲,提升音頻可玩性的同時有效保護用戶隱私,讓你隨心所欲 ...
  • 技術大咖們從開源實戰項目總結經驗,利用真實場景的應用案例分享前沿技術,引導開發者從零參與 OpenHarmony 開源貢獻,提升代碼效率,培養開發者成為開源社區的貢獻者。 ...
  • 1. 準備階段 關於該功能的實現我們需要學習以下的資料: 1.1 【ARKUI】ets怎麼實現文件操作 1.2 文件管理 1.3 Ability上下文 2. demo 實現 2.1 文件路徑讀取 參考 context.getFilesDir 來進行獲取文件路徑,代碼如下 private getCac ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文將以 C# 語言來實現一個簡單的布隆過濾器,為簡化說明,設計得很簡單,僅供學習使用。 感謝@時總百忙之中的指導。 布隆過濾器簡介 布隆過濾器(Bloom filter)是一種特殊的 Hash Table,能夠以較小的存儲空間較快地判斷出數據是否存在。常用於允許一定誤判率的數據過濾及防止緩存 ...
  • 目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 「簡單有價值的事情長期堅持做」 這是成功最簡單,但也最難學的秘訣。不經過訓練,人很難意識到時間複利的威力。 仙劍奇俠傳的「十里坡劍神」和金庸群俠傳的「十級野球拳」,就是簡單的事情持之以恆反覆做,最後就有巨大的威力 唐家三少成為網文收入第一,最重要的一步是十四年從未斷日更 這樣的案例很多,一開始可能成 ...
  • 迎面走來了你的面試官,身穿格子衫,挺著啤酒肚,髮際線嚴重後移的中年男子。 手拿泡著枸杞的保溫杯,胳膊夾著MacBook,MacBook上還貼著公司標語:“我愛加班”。 面試開始,直入正題。 面試官: 看你簡歷上面寫著精通MySQL,我先問你事務的特性是什麼? 老生常談,這個還有誰不會背的嗎? 我: ...
  • 基礎知識 python是一門腳本語言,它是解釋執行的。 python使用縮進做為語法,而且python2環境下同一個py文件中不能同時存在tab和空格縮進,否則會出錯,建議在IDE中顯示縮進符。 python在聲明變數時不寫數據類型,可以type(xx)來獲取欄位的類型,然後可以int(),list ...
  • 為什麼要多線程下載 俗話說要以終為始,那麼我們首先要明確多線程下載的目標是什麼,不外乎是為了更快的下載文件。那麼問題來了,多線程下載文件相比於單線程是不是更快? 對於這個問題可以看下圖。 橫坐標是線程數,縱坐標是使用對應線程數下載對應文件時花費的時間,藍橙綠代表下載文件的大小,每個線程下載對應文件2 ...
  • 詳細講解python爬蟲代碼,爬微博搜索結果的博文數據。 爬取欄位: 頁碼、微博id、微博bid、微博作者、發佈時間、微博內容、轉發數、評論數、點贊數。 爬蟲技術: 1、requests 發送請求 2、datetime 時間格式轉換 3、jsonpath 快速解析json數據 4、re 正則表達式提... ...
  • 背景: 一般我們可以用HashMap做本地緩存,但是HashMap功能比較弱,不支持Key過期,不支持數據範圍查找等。故在此實現了一個簡易的本地緩存,取名叫fastmap。 功能: 1.支持數據過期 2.支持等值查找 3.支持範圍查找 4.支持key排序 實現思路: 1.等值查找採用HashMap2 ...
  • 目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 本章是系列文章的第八章,用著色演算法進行寄存器的分配過程。 本文中的所有內容來自學習DCC888的學習筆記或者自己理解的整理,如需轉載請註明出處。周榮華@燧原科技 寄存器分配 寄存器分配是為程式處理的值找到存儲位置的問題 這些值可以存放到寄存器,也可以存放在記憶體中 寄存器更快,但數量有限 記憶體很多,但 ...