原创 使用 Element-UI 的 navMenu 組件實現無限級下拉導航菜單並實現路由跳轉和默認當前路由高亮樣式

看過Element-UI的導航菜單組件的文檔的同學應該瞭解到文檔的demo都是有限級的菜單,然而現實場景業務通常有可能是這樣子: (1)菜單由後臺接口返回; (2)前端寫死,但是業務需求是不定級別的導航菜單。下面就爲實現無限級下拉

原创 WebSocket在vue項目中的使用

1、使用背景:項目前端需要實時渲染後臺傳回的消息。 2、WebSocket 的定義是:是一個對象,用於創建和管理 WebSocket 連接,以及可以通過該連接發送和接收數據。 WebSocket 對象經常使用到的屬性有一下這些:

原创 vue自定義指令的用法

上週有一個長按某一塊文本彈出一個彈窗的需求,關於這個長按的姿勢想到了使用vue的自定義指令來進行開發這個需求,因爲報告中很多頁面都要使用到這個長按的姿勢,所以自定義指令是最佳解決方法的首選。剛好藉此機會學習自定義指令。 官網提供的全局

原创 區別apply、call與bind

(一)apply、call與bind都是函數對象的一個方法,主要作用都是改變函數體內部this的指向。 下面用一個例子來說明三者的作用: function animals() {} animals.prototype = { nam

原创 週記JS篇(一)—— Object.assign、JSON.parse、JSON.stringify

1、Object.assign(): 用於將所有可枚舉屬性的值從一個或多個源對象複製到目標對象,返回目標對象。 語法:Object.assign(target, …sources) 例子: const object1 = { a: 1

原创 ES6中Set()的使用——javaScript

記錄一波今天在項目中實踐使用ES6中的Set()的數據結構,感覺特別帥氣!!! Set()可以實現在返回的一串數據的數組中挑選出滿足你條件的數據。最大的關注點就是:去重!!! 使用場景:後臺返回一個數組(所有場景的圖片):裏面包含了全

原创 JQuery學習之路(jQuery選擇器二)

(一)jQuery選擇器之基本篩選選擇器: (二)****jQuery選擇器之內容篩選選擇器 (1):contains與:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素

原创 週記JS篇(一)filter、encodeURIComponent、模板字符串

這周在開發中使用到了遇到了filter(),之前有見過,但是沒仔細瞭解過,這次進行了學習,記住了。 1、filter():創建一個新的數組,新數組中的元素通過檢查指定數組中符合條件的所有元素,而且次函數不會改變原數組 例子: //JS

原创 JQuery學習之路(樣式篇_選擇器)

(一)jQuery選擇器之id選擇器: $(“#id” ) <script type="text/javascript"> //通過原生方法處理 var div = document.getEleme

原创 Table的row-class-name無效與動態高亮顯示選中行背景色

Element UI 的Table組件踩坑記: (1)參數row-class-name無效的坑:官方文檔給出瞭如下代碼: 但是我使用後並沒有出現預初想要第一行高亮的效果,然後console.log(row, rowIndex),發

原创 父與子組件之間的傳值--Vue

父組件與子組件之間的傳值是最基本的vue知識。下面乾脆利落介紹一下父組件與子組件的傳值。 方法一:父向子組件使用props。子組件向父組件使用emit。是的,就是這麼簡單!!! //父組件 <father-component :valu

原创 一勞永逸地搞定flex佈局

尋根溯源話佈局 一切都始於這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 float 屬性不由得感覺眼前一亮,順理成章的聯想到 Word 文檔排版中用到的的左對齊、右對齊和

原创 Jquery學習之路(入門)

(1)jQuery使用:*$(document).ready* 的作用是等頁面的文檔(document)中的節點都加載完畢後,再執行後續的代碼,因爲我們在執行代碼的時候,可能會依賴頁面的某一個元素,我們要確保這個元素真正的的被加載完畢後才

原创 陰影box-shadow詳解

(一)box-shadow的基礎語法:給塊元素設置陰影。 (1)h-shadow爲負值代表左邊框設置陰影;若爲正值代表右邊框設置陰影;若爲0則代表左右兩邊都設置陰影。 (2)v-shadow爲負值代表頂部設置陰影;若爲負值代表底部

原创 阿里巴巴矢量圖icon引用方法和與文字對齊的解決方法

平時寫界面時經常要引用阿里巴巴矢量圖icon(http://www.iconfont.cn/), (一)引用icon有兩種方法: (1)直接在html裏面添加i標籤(效果圖如下): <!--html--> <div class="