Vue 博客項目的覆盤和收穫

時間 2019-12-08

標籤 vue 博客項目收穫简体版

原文原文鏈接

對通過一週來，獨立完成的一個 Vue 博客小項目，對學到的收穫進行總結。vue

項目地址：github.com/tingzhong66…git

演示地址：http://129.28.186.105:30001github

對動畫、過渡的使用熟練了一些。學會使用了 anime 這個動畫庫。數組

學會使用 marked 庫，進行簡單配置。dom

進一步學會了對 h 標題標籤的提取，並生成一個目錄。動畫

對每個 h 標籤加一個共有的類名。cdn

等 md 渲染完成後，進行獲取全部含有這個共有的類名 dom 對象，即全部 h 標籤對象

初步進行遍歷 dom 對象數組，生成一個一維數組目錄blog

遍歷一維數組目錄，對 h 標籤等級進行判斷一系列的邏輯，最後生成一個多維的數組。即目錄。遞歸
再進一步學會了，監聽滾動距離，判斷出當前瀏覽的標題，並在側邊欄中進行高亮顯示當前瀏覽的標題。

組件渲染後進行監聽滾動，銷燬後移除監聽事件

對目錄數組進行遍歷，分別獲取各個標題距離網頁頂部的距離與當前滾動距頂距離之差的絕對值

絕對值最小，即爲當前瀏覽的標題，即爲高亮顯示。

而後再對子目錄進行遞歸判斷

學會了使用 highlight.js 在 marked 的配置中，對代碼塊進行高亮顯示

學會了在 Vue 項目中配置並使用第三方包的 cdn

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。