vue - Vue腳手架(終結篇)/ vue動畫

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

幾天的內容不是很多,因為我們腳手架的學習告一段落了,也是為了跟明天開始的內容有一個區分。 明天將會有一個非常重要的內容來了,各位,vue中的ajax他來了,這個絕對是重量級,有點興奮! 十一.TODOList編輯 新增一個編輯功能,要完成的邏輯就是,當我們一點擊編輯按鈕,對象會新增一個屬性edit為 ...


幾天的內容不是很多,因為我們腳手架的學習告一段落了,也是為了跟明天開始的內容有一個區分。
明天將會有一個非常重要的內容來了,各位,vue中的ajax他來了,這個絕對是重量級,有點興奮!

十一.TODOList編輯

新增一個編輯功能,要完成的邏輯就是,當我們一點擊編輯按鈕,對象會新增一個屬性edit為true,然後頁面上兩個標簽一個span一個input通過edit的值去條件渲染是否展示

image-20220508115531706

image-20220508115541510

image-20220508115550558

很明顯我們確實能給一個對象添加一個屬性,但是這樣添加的屬性並沒有setter所以也無法被vue檢測到而重新解析模板,應該用vue.set的方法,這裡還只能用我們的第二種$set的方法因為這裡拿不到Vue

image-20220508120223746

image-20220508120212027

最好用v-show畢竟這裡會頻繁切換

image-20220508120349328

這裡應該完善一下,不是每一次點擊編輯都會去創建一個屬性,有這個屬性了直接改值就可以了

image-20220508124655927

我們失去焦點後要把值改到數據裡面去的邏輯,註意還記得得到這裡嗎,事件處理函數不傳參數預設為e,傳多個參數的時候要使用e,需要傳參$event

image-20220508124942627

利用全局事件匯流排把我們的id和要改的數據傳過去,這裡是發射數據應該是 emit

image-20220508125028026

image-20220508125345224

1.nextTick

bug

  • 可以輸入空值並保存為新的值

    image-20220508130025831

  • 有一個很重要的點,我們需要一點編輯,就讓input框獲取焦點吧,這樣才符合常理,我們可以通過打標識,來獲取這個input框,然後在我們點擊編輯的事件中,最後一步通過$refs來讓他獲取焦點

    image-20220508131651708

    想法是好的,但是很遺憾這樣做並不行,分析一下,我們vue的工作原理是當一個函數的內容執行完了才會去重新解析模板,如果完成一行數據就去,那一直都在來回就很耗費資源了,所以這裡當我們點擊編輯的時候剛好把edit改為了true,頁面接收到true後文字消失,input出現,但是關鍵就是這個時候就處於這個節點,拿到了true還沒給到頁面上,這個時候繼續往下執行focus這一行代碼,我們的input都沒出現在頁面上怎麼來獲取焦點?

​ 又是因為獲取焦點的問題,前面因為為這個栽過一次,但是現在不用怕了,vue針對於這個情況專門出了一個api,而且這個api還挺常用,.$nextTick,他後面跟的是一個回調函數,他的意思就是當我們完成下一次DOM更新操作後才會去執行裡面的回調函數,也就是這一次編輯改為true更新到DOM上面後才會回來執行這裡面的回調

image-20220508132315662

十二.過渡與動畫

1.動畫

先完成一個點擊顯示隱藏的案例

image-20220508135341660

定義好我們的動畫效果,在vue裡面雖然可以簡便一點,但是效果還是要自己寫寫的

image-20220508140006374

我們要的效果就是點擊顯示就給我顯示同時添加一個來的效果,點擊隱藏同理,如果原生js寫就需要去判斷邏輯等等

image-20220508140155017

vue能做的就是可以讓我們輕鬆實現顯示隱藏的動畫,就目前來看jq好像是直接調用哈,jQuery的動畫直接調用就能做到,回到正題,需要添加一個標簽 transition這個標簽裡面放我們的要顯示隱藏的元素

image-20220508140422383

同時我們的動畫的類名有特定的類名,顯示是 v-enter-active,隱藏是 v-leave-active,配置好這些後,vue就能在合適的時機給你添加合適的動畫

image-20220508140528908

註意:

  • 每一個 transition標簽可以自己取名字,但是取了之後,對應的動畫類名的 v也要跟著改才會有動畫效果image-20220508140748982

    image-20220508140810163

  • 要讓其一打開網頁就執行一次動畫,添加一個屬性 appear(可以直接就簡寫為一個appear就表示為真了,有這個值了)

    image-20220508141107896

  • 最終的真實DOM並沒有transition這個標簽

2.過渡

​ 用過渡再次實現上面的動畫效果,首先標簽這裡還是一樣,transition標簽,name屬性

image-20220508143529335

主要是下麵css這裡的編寫,我們的vue給我們提供了其實不止上面兩個類名,分為來和走,每一個狀態都有三個,一共六個,先說來的時候,有來的起點和來的終點,對應的類名為 v-enter和v-enter-to,用transition來做就不用寫動畫效果了,直接在來的起點寫上是個什麼狀態,終點是個什麼狀態即可

image-20220508144729998

像這樣將我們的效果都寫在類名裡面,本來是有六中類名的,不管是進入還是離開都有一個中間過程的類名,這個也可以寫到我們的出現動畫效果的標簽上transition控制過渡效果,也可以寫到我們的過程中這個類名裡面

image-20220508145013694

最終簡化下來,進入的起點使我們離開的終點,離開的終點是我們的進入的起點

註意transitin配置在動畫呈現的標簽裡面會有bug,最好還是寫在類名裡面

image-20220508151300281

3.多元素過渡

當我們想多個元素使用過渡的時候,如果這樣做,就會報錯

image-20220508150343692

這個時候需要一個新的標簽 transition-group而且,還必須配置key值

image-20220508151232011

4.第三方集成包

想要完成更多酷炫的進出效果,可以去使用第三方庫了 animate.css

我們之前的所有style的樣式全部刪除,就留一個標簽上的transition-group這個還是要的,參考其官網可查看到首先安裝,並且引入的時候直接引入的方式,因為是css格式

image-20220508152150227

三個屬性配置,第一個先添加我們的 name(官網)、然後是進入的屬性enter-active-class,離開屬性leave-active-class,後面兩個的值直接在官網首頁找到對應的樣式複製進來

image-20220508153036383

GIF 2022-5-8 15-29-51

5.TODOList動畫版(問題)

直接在css裡面定義動畫,然後給每個li添加transition即可實現

image-20220508155939688

image-20220508155952667

這裡面有兩個問題啊,我又是一個喜歡剖析原理得人,第一個是為什麼一定要添加appear,這個添加的效果不管是現在還是後續才會有效果,他不就是一個能讓一開始就執行一次動畫的屬性嗎,還有一個問題,這裡沒有條件渲染了,想知道vue是怎麼檢測到我是刪除和添加的並還能對應給出動畫效果,因為添加是unshift方法實現的,刪除是數組filter方法實現的,難道vue又做了封裝?

這些問題目前我還搞不懂先存在這裡,看後續有沒有大佬能幫解答一下,或者學到後面了,看能不能回來自己解答一下


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

-Advertisement-
Play Games
更多相關文章
  • Mysql複習的一個小總結,用xmind寫的。(字數沒有都不給我發博客😹) 下麵是一些備註 子查詢 MySQL子查詢稱為內部查詢,而包含子查詢的查詢稱為外部查詢。 子查詢可以在使用表達式的任何地方使用,並且必須在括弧中關閉。 視圖 基本語法可以使用 CREATE VIEW 語句來創建視圖。 語法格 ...
  • ​大數據概述 在大數據這個概念興起之前,信息系統存儲數據的方法主要是我們熟知的關係型資料庫,關係型資料庫,關係型模型之父 Edgar F. Codd,在 1970 年 Communications of ACM 上發表了《大型共用資料庫數據的關係模型》的經典論文,從此之後關係模型的語義設計達到了 4 ...
  • 一、下載安裝IDEA IDEA2020.2.3版本:https://www.cnblogs.com/liugp/p/13868346.html 最新版本安裝詳情請參考:https://www.jb51.net/article/196349.htm 二、搭建本地hadoop環境(window10) 可 ...
  • MySQL8新增降序索引 桃花塢里桃花庵,桃花庵里桃花仙。桃花仙人種桃樹,又摘桃花賣酒錢。 一、MySQL5.7 降序索引 MySQL在語法上很早就已經支持降序索引,但實際上創建的卻仍然是升序索引,如下MySQL 5.7 所示,row2欄位降序,但是從show create table看 row2  ...
  • Linux環境下,MySQL的主要目錄及其作用、資料庫和數據表在文件系統上的存儲結構。 ...
  • HarmonyOS Connect智能硬體開放生態即將步入富設備產業化時代!為了讓廣大開發者能搶先體驗鴻蒙智聯富設備開發,本期我們將為大家帶來七款支持富設備開發的開發板。 ...
  • 字元串是用引號包裹的,表示語言文字。 用雙引號包裹的都是字元串 註意:變數不能包裹在雙引號里 輸出 布爾類型 true和false 註意都是小寫 ...
  • 認識js 在谷歌瀏覽器的控制臺中右鍵單擊空白處,選擇檢查可以打開控制台 查看console.log輸出的內容。 JS的註釋 是”//”或者”/* */”,前者是行註釋,後者是塊註釋 1變數 js的變數必須申明在用,聲明後賦值,變數才可使用,使用過程中可以改變類型。 變數的命名規則: 變數名只能由字母 ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...