原创 D3.js(三)：交互
d3-drag Drag-and-drop 是一種易學流行的交互手勢：將指針指向目標對象，按下並且拖動它到一個新的位置，然後釋放。D3 的 drag 提供了方便靈活並且抽象的拖拽交互。 例子 🌰： 力導向圖 小球（密集恐懼症慎點
2020-06-30 23:57:51
2
原创 CSS：硬幣旋轉效果
利用 transform 的 rotateY 進行垂直方向旋轉。 <div class="coin"></div> .coin { width: 100px; height: 100px; margin: 100px
2020-06-30 22:41:27
4
原创 Webpack(二)：核心特性
上一篇的最後提出了對模塊化打包方案或工具的訴求： 能夠將散落的模塊打包到一起； 能夠編譯代碼中的新特性； 能夠支持不同種類的前端資源模塊。 目前，前端領域有一些工具能夠很好的滿足以上這 3 個需求，其中最爲主流的就是 We
2020-06-30 22:41:27
原创 JavaScript：實現一個JS函數柯里化
🔗 https://juejin.im/post/5c9c3989e51d454e3a3902b6 什麼是柯里化？ 在計算機科學中，柯里化（Currying） 是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個
2020-06-30 22:41:26
原创 CSS：多種方法畫圓
<div class="myDiv circle"></div> .myDiv { width: 100px; height: 100px; } 方法一：border-radius .circle { b
2020-06-30 22:41:26
原创 JavaScript：實現一個Function.bind()
🔗 https://juejin.im/post/5c9c3989e51d454e3a3902b6 bind() 方法: 會創建一個新函數。當這個新函數被調用時，bind() 的第一個參數將作爲它運行時的 this，之後的一
2020-06-30 22:41:26
原创 CSS：加載中轉圈動畫效果
<div class="donut"></div> @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { trans
2020-06-30 22:41:26
2
原创 Vue(六)：插件
插件 Vue.js 可以通過插件擴展自己的能力。 因爲插件的功能會使用 Vue 全局對象或者實例來調用，或者被修改從而在 Vue 的鉤子函數內起作用。🌰比如用於 http 調用的插件v ue-resource 被插入到 vue 後
2020-06-30 22:41:26
原创 Javascript：補0（填充字符串到目標長度）
當給定數字位數不足8位時，則在左邊補充0以補足8位數。 let num = 900; let nStr = num.toString().padStart(8,'0'); console.log(nStr); //00000900
2020-06-30 22:41:26
11
原创 Webpack：開發一個可以加載 markdown 文件的 Loader
開發一個可以加載 markdown 文件的加載器，以便可以在代碼中直接導入 md 文件。 markdown 一般是需要轉換爲 html 之後再呈現到頁面上的，所以我們希望導入 md 文件後，直接得到 markdown 轉換後的 h
2020-06-30 22:41:26
1
原创 JavaScript：實現一個繼承
🔗 https://juejin.im/post/5c9c3989e51d454e3a3902b6 寄生組合式繼承 一般只建議寫這種，因爲其它方式的繼承會在一次實例中調用兩次父類的構造函數或有其它缺點。 核心實現 用一
2020-06-30 22:41:26
原创 Vue(八)：webpack
webpack webpack 是一個打包器。 什麼是打包器？就是爲了把 node.js 引入的模塊方案讓前端也可以用上，作爲打包器的 webpack 存在的目的，就是把模塊方案編譯爲前端瀏覽器可以識別的格式。 webpack模塊
2020-06-30 22:41:26
原创 在 Vue 中，將 html 內容導出爲 PDF
需要用到兩個插件：html2canvas 和 jsPDF npm install html2canvas npm install jspdf --save import html2canvas from 'html2canvas
2020-06-30 22:41:15
1
原创 Vue 動畫：CSS 動畫原理 & animate.css 庫的使用 & 同時使用過渡和動畫 & Js 動畫與 Velocity.js 的結合 & 多個元素或組件的過渡 & 動畫封裝
Vue 中 CSS 動畫原理 <div id="app"> <div v-if="show">hello world</div> <button @click="handleClick">切換</button> </div
2020-05-26 02:51:20
原创 通過監聽當前路由的變化，動態更新麪包屑的內容
引入 vuetify 的 Breadcrumbs 組件來實現麪包屑功能。 發現路由變了之後，麪包屑內容沒有更新。需要刷新纔會變化。 此時，就需要： 監聽當前路由的變化，動態更新麪包屑的內容 watch: { $route()
2020-05-26 02:51:20