📄前言 這個小項目源於github項目:✨50 projects 50 days, 這個項目包含了50個小型前端項目，適合學習了Html+Css+JavaScript但是還沒有學習框架的前端新手作為練習。 這裡是原項目的代碼實現👉擴展卡片 Expanding Cards 📝分析 📍佈局 卡片 ...
一、什麼是首屏載入 首屏時間（First Contentful Paint），指的是瀏覽器從響應用戶輸入網址地址，到首屏內容渲染完成的時間，此時整個網頁不一定要全部渲染完成，但需要展示當前視窗需要的內容，首屏載入可以說是用戶體驗中最重要的環節 二、載入慢的原因 在頁面渲染的過程，導致載入速度慢的因素 ...
props傳遞數據 步驟： 首先，在子組件中聲明props選項 其次，在子組件中使用v-bind指令動態綁定屬性，通過插值表達式動態獲取數據 最後，在父組件的template中調用子組件標簽的使用傳遞數據 示例： 在子組件MovieItem.vue中 <template> <div class="s ...
TypeScript 是一種由微軟開發的自由和開源的編程語言,是一種非常受歡迎的 JavaScript 語言擴展,它也是 JavaScript 的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。它在現有的 JavaScript 語法之上加入了一層類型層，而這一層即使被刪除， ...
瞭解響應式原理後對代碼的一點小重構 在操作一個響應式變數的時候，可能會多次去取這個響應式變數的值，這就意味著會多次執行依賴收集中的get,可以用一個局部變數緩存下來，這樣只需要一次get操作. // 比如商城業務中，根據價格篩選不同的商品 data: () => ({ goods: [] }), c ...
【layui2.6.8】有多個文件上傳的組件需要根據後臺數據在頁面載入時動態渲染在一個彈框裡面。彈窗從table表格數據的【編輯】按鈕打開，根據點擊行展示不同的文件，對文件進行查詢、刪除、下載等管理。問題：選擇文件，不上傳，關閉彈窗再打開，剛選的文件雖然不見了，但依然能上傳那個文件，需要打開彈窗時清 ...
dll ? 動態鏈接庫英文為DLL，是Dynamic Link Library的縮寫。DLL是一個包含可由多個程式，同時使用的代碼和數據的庫。 起因 在查看hzero前端項目框架介紹時提到了dll，外加之前經常看見dll文件，於是有了興趣瞭解一下 webpack dll。 webpack官網介紹 D ...
Next.js 提供了 Fast-Refresh 能力，它可以為您對 React 組件所做的編輯提供即時反饋。 但是，當你通過 Markdown 文件提供網站內容時，由於 Markdown 不是 React 組件，熱更新將失效。 怎麼做 解決該問題可從以下幾方面思考： 伺服器如何監控文件更新 伺服器 ...
前言 : 組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復用的小組件來構建大型應用，任意類型的應用界面都可以抽象為一個組件樹。 現在基於vue的UI組件庫有很多，比如iview，element-ui等。但有時候這些組件庫滿足不了我們的開發需求，這時候我們就需要自己寫 ...
一、前言 小編最近開始學習typescript，懂得人都知道，typescript是vue3的基礎伴生，配合更加默契。就像vue2和js一樣！typescript不像js那樣瀏覽器直接可以解讀，需要我們把ts文件編譯成js文件，這樣瀏覽器才可以解讀。所以我們要安裝一下ts的環境和自動編譯，方便我們後 ...
TinyMCE是一款易用、且功能強大的所見即所得的富文本編輯器。同類程式有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 配置靈活，界面簡潔，支持自定義插件。 TinyMCE中文手冊：http://tinymc ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. 防抖節流 這也是一個經典題目了，首先要知道什麼是防抖，什麼是節流。 防抖： 在一段時間內，事件只會最後觸發一次。 節流： 事件，按照一段時間的間隔來進行觸發。 實在不懂的話，可以去這個大佬的Demo地址玩玩防抖節流DEMO // 防 ...
vue2中只能有一個根標簽，但是在vue3中根組件已經可以有多個根節點了 在vue2中只所以這麼做是因為vdom是一顆單根樹形結構，patch方法在遍歷的時候從根節點開始遍歷，它要求只有一個根節點，組件也會轉換為一個vdom,自然滿足這個要求 vue3中值所以可以有多個節點，是因為引入了Fragme ...
引言 本篇文章主要介紹的是關於CSS Sandbox的一些事情，為什麼要介紹這個呢？在我們日常的開發中，樣式問題其實一直是一個比較耗時的事情，一方面我們根據 UI 稿不斷的去調整，另一方面隨著項目越來越大可能哪一次開發就發現——誒，我的樣式怎麼不起作用了，亦或是怎麼被另一個樣式所覆蓋了。原因可能有很 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. ref的使用 ref 接受一個原始值，返回一個具有響應式的對象，對象有一個value屬性，其值就是所傳遞的原始值。 ref是做的一個拷貝關係，修改對象msg的值，不會影響對象obj，視圖會發生變化。 import { ref } f ...
Vue 3.x基礎 模版 <template> // html </template> <script setup> // setup API // ... </script> <style> // css </style> setup API 變數（響應式） // 基本數據類型 let refVa ...
前言 : 組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復用的小組件來構建大型應用，任意類型的應用界面都可以抽象為一個組件樹。 現在基於vue的UI組件庫有很多，比如iview，element-ui等。但有時候這些組件庫滿足不了我們的開發需求，這時候我們就需要自己寫 ...
泛型 指在定義函數、介面或類的時候，不預先指定具體的類型，而在使用的時候再指定具體類型的一種特性。 引入 下麵創建一個函數, 實現功能: 根據指定的數量 count 和數據 value , 創建一個包含 count 個 value 的數組 不用泛型的話，這個函數可能是下麵這樣： function c ...