Site Overlay

Recent Posts

PM2 常用指令筆記

以檔名啟動程式$ pm2 start 檔名 –name app_name 以指令啟動程式$ pm2 start ‘指令’ –name app_name指令因為有空白,要用引號包起來,或者也可以把指令做成sh檔,就可以以檔名啟動的方式來做。

在CSS GRID Layout實現colspan, rowspan

善用 display: grid 來處理排版真的非常方便,不但可以簡化html巢狀結構,在處理RWD的時候,也增加了更多排版的彈性跟可能性。例如可以用 grid-template-areas 來隨意調整排版的位置順序等等。 說到 colspan 的話,上述提到的 grid-template-areas 也可以輕鬆達到這個需求,例如以下範例:

CSS :is, :where Selector

:is() 跟 :where() 是什麼? 常常在一些情況之下,css selector有可能會需要寫很長,尤其是剛開始在寫sass, scss時,巢狀寫的很開心,結果compile出來的東西有可能會像下面這樣: 而 :is() 跟 :where() 就是用來解決這個問題。在is:() or :where() 中可以帶入逗點分格的selector,讓原本多行且重複的結構簡化為一行:

Nuxt asyncData與fetch的不同

首先是關於this的使用,fetch 中的 this 指的就是component本身,asyncData 的this則是undefined。且fetch可以被component本身用 this.$fetch() 再次呼叫,而asyncData不行。 再來是顯示的效果。server-side render時感覺不出來,不過在client side render時,就有明顯差異。兩者分別運作的流程如下: 點擊連結 -> asyncData() -> 組件建立完成 -> render畫面(換頁) 使用 asyncData 會經過的流程 點擊連結 -> 組件建立完成 -> render畫面(換頁) –繼續閱讀Nuxt asyncData與fetch的不同

Copyright © 2022 Bloggy. All Rights Reserved. | SimClick by Catch Themes