當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue如何获取年月日_vue 学习笔记第二弹

發布時間：2025/3/19 vue 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue如何获取年月日_vue 学习笔记第二弹小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. vue,學習第二彈！

1.x 版本中的 filterBy 指令，在2.x中已經被廢除：

????filterBy - 指令

在 2.x 版本中手動實現篩選的方式：

篩選框綁定到 VM 實例中的 searchName 屬性：

在使用 v-for 指令循環每一行數據的時候，不再直接 item in list，而是 in 一個過濾的 methods 方法，同時，把過濾條件searchName傳遞進去：

search 過濾方法中，使用數組的 filter 方法進行過濾：

1search(name)?{

1.1. 過濾器

概念：Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示；

1.1.1. 私有過濾器

HTML元素：

私有 filters 定義方式：

1filters:?{?

使用 ES6 中的字符串新方法

或用如下方式來填充:

1.1.2. 全局過濾器

注意：當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先于全局過濾器被調用！

1.2. 鍵盤修飾符以及自定義鍵盤修飾符

1.2.1. 1.x中自定義鍵盤修飾符【了解即可】

1.2.2. 2.x中自定義鍵盤修飾符

通過Vue.config.keyCodes.名稱 = 按鍵值來自定義案件修飾符的別名：

1Vue.

使用自定義的按鍵修飾符：

1.3. 自定義指令

自定義全局和局部的自定義指令：

1????

自定義指令的使用方式：

1.4. Vue 1.x 中自定義元素指令【已廢棄,了解即可】

1Vue.elementDirective(

使用方式：

1.5. vue實例的生命周期

什么是生命周期：從Vue實例創建、運行、到銷毀期間，總是伴隨著各種各樣的事件，這些事件，統稱為生命周期！
生命周期鉤子：就是生命周期事件的別名而已；
生命周期鉤子 = 生命周期函數 = 生命周期事件
主要的生命周期函數分類：
創建期間的生命周期函數：
beforeCreate：實例剛在內存中被創建出來，此時，還沒有初始化好 data 和 methods 屬性
created：實例已經在內存中創建OK，此時 data 和 methods 已經創建OK，此時還沒有開始編譯模板
beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中
mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示
運行期間的生命周期函數：
beforeUpdate：狀態更新之前執行此函數，此時 data 中的狀態值是最新的，但是界面上顯示的數據還是舊的，因為此時還沒有開始重新渲染DOM節點
updated：實例更新完畢之后調用此函數，此時 data 中的狀態值和界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！
銷毀期間的生命周期函數：
beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed：Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

1.6. Vue中的動畫

為什么要有動畫：動畫能夠提高用戶的體驗，幫助用戶更好的理解頁面中的功能；

1.6.1. 使用過渡類名

HTML結構：

VM 實例：

定義兩組類樣式：

1.6.2. 使用第三方 CSS 動畫庫

導入動畫類庫：

定義 transition 及屬性：

1.6.3. 使用動畫鉤子函數

定義 transition 組件以及三個鉤子函數：

定義三個 methods 鉤子方法：

1methods:?{

定義動畫過渡時長和樣式：

1.6.4. v-for 的列表過渡

定義過渡樣式：

定義DOM結構，其中，需要使用 transition-group 組件把 v-for 循環的列表包裹起來：

1??

定義 VM 中的結構：