如何在 pug 上實作 vue slot 的功能
slot 是 Vue.js 非常使用的功能,常常在做一些模組化的開發時都會去使用到
最近在使用 pug 開發一些靜態的頁面時,查看 pug 的官方文件,卻沒有相關的資訊
比較相近的應用就只有 block
與 extend
的語法,但是在使用上卻又一些落差
花了一點時間,尋找答案,發現是可以在 pug 上實作 slot 的
slot 是 Vue.js 非常使用的功能,常常在做一些模組化的開發時都會去使用到
最近在使用 pug 開發一些靜態的頁面時,查看 pug 的官方文件,卻沒有相關的資訊
比較相近的應用就只有 block
與 extend
的語法,但是在使用上卻又一些落差
花了一點時間,尋找答案,發現是可以在 pug 上實作 slot 的
Emmet 是一個可以大幅提升你在開發網頁 Html 編碼速度,使用上也相當的容易,也支援很多主流的編輯器,如 : atom、sublime
Microdata 為 HTML5 的一部分,至於 Microdata 等標籤的作用 簡單來說:
我們一般用來顯示資料的 HTML 等標籤是給我們 人 看的 , 而 Microdata 等標籤則相反,是專門為 機器 等各大搜尋引擎觀看而設計的
表格 是網頁排版中常見的資料顯示方式,一般我們都是直接用 Html 提供的 <table>
、<tr>
、<td>
等等…,來進行開發與製作,在這裡來介紹如何使用 div 與 css 取代原本 <table>
標籤進行製作:
SVG 可縮放式向量圖形 ( SVG , Scalable Vector Graphics )
是前端工程師不可錯過得技術,不只因 圖片向量 使圖片不會因放大縮小而失真外,SVG 為原本不足的 HTML 帶入了新的概念 — 利用標籤來做圖 從簡單的直線、曲線、圓形、矩形,到複雜的任意路徑、填充樣式、座標轉換與動畫,我們可以利用標籤的形式來完成
而且因 SVG 的圖片是由 標籤 組成,所以我們可以對圖片裡的任何物件進行操作,也可以配合 Css 與 javaScript 達到更多的效果與互動