原创 前端高性能網站-性能優化

高性能的定義 首先我們要知道性能到底是什麼意思,下面是百度百科的答案! so下面我們就按照性能影響力去介紹,也是我看《高性能網站建設指南》的一份筆記吧! 性能優化方式 1、減少http請求【文件大小、文件數量、請求路程】** 1

原创 vue項目自定義組件的基本使用方法-包括slot、組件傳值

1、關於組件使用方法 ok廢話不多說直接一個簡單的組件實例帶你快速使用組件。 //html代碼 //單頁面使用需要引入文件,這裏引入的是cdn方式 <script src="https://cdn.jsdelivr.net/npm

原创 前端js防連點整理

一、前景: 在研發過程中,經常因爲網絡等問題,用戶多次點擊,導致產生不必要的數據,影響後續操作,故在前端我們可以使用js來控制重複點擊 二、設置防連點目的: 跟根源杜絕提交多次表單,從而造成不可挽回的錯誤 防止點擊太快造成假數據

原创 gulp工具生成雪碧圖(精靈圖)

一、前提 使用gulp工具 將需要合成精靈圖的圖片放到一個文件夾內方便操作 合成圖片較大推薦一個壓縮網站 https://tinypng.com/ 二、使用方法 下載精靈圖插件npm install --save-dev

原创 ES6數據的解構賦值使用及應用

定義 ES6 允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱爲解構(Destructuring) 本質上,這種寫法屬於“模式匹配”,只要等號兩邊的模式相同,左邊的變量就會被賦予對應的值 如果解構不成功,變量的值就

原创 TypeScript數據類型及其相關介紹--簡潔快速過

一、數據類型 1、typeScript語法使用 冒號表示類型,例如布爾類型: let isDone: boolean = false; 2、數據類型都是小寫的,一共有11種類型 普通的雷同js的3種類型是:boolean、num

原创 md文件的基礎日常使用介紹(markdown基礎使用方法介紹)

Markdown是一種可以使用普通文本編輯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本內容具有一定的格式,以下是十種常用易用的md文檔使用介紹。 1、H1~H6大綱標題 【語法】#(空格)文字 或 #(空格)文字 (空格

原创 webpack的基本使用方法

本文是關於webpack的基礎、常用方法,想要了解更多更深層的代碼可以查看webpack官網 https://www.webpackjs.com/ 下面是自己整理的webpack思維導圖可以快速的瞭解webpack的用法及用途

原创 css3常用方法及問題解決

目錄導航 文本換行 陰影設置 垂直居中 css三角 一、常用樣式方法 1、文本換行 普通換行隱藏省略三個小點 width: 480px;/* 限制寬度*/ overflow: hidden;/* 超出省略*/ white-

原创 vue彈窗關閉(點擊陰影部分)

前言: 大多時候我們都會有寫彈窗的需求、除了點擊按鈕關閉之外,隨着用戶友好性的要求增加、點擊彈窗外部的陰影部分關閉彈窗也成了交互更加友好的體驗。 一、問題注意 寫代碼之前這裏需要注意兩個點 1.關閉事件內不要傳參數!不要傳參數!不

原创 wangeditor富文本編輯器的使用(超詳細)

一、基本介紹 官方文檔:http://www.wangeditor.com/ 1、wangeditor富文本編輯器的特點 基於javascript和css開發的 Web富文本編輯器, 輕量、簡潔、易用 WangEditor富

原创 vuex的用法及介紹

使用: 主要使用場景是適合大型單頁面 倉庫store包含了應用的數據(狀態)和操作過程,任何組件使用同一store的數據,只要store的數據變化,對應的組件也會立即更新 數據保存在Vuex的state字段內,任何頁面組件都可以

原创 JS易忘常用屬性及方法(不斷添加補充)

1、關於或、與的取決定值 ||:判斷true、優先前面(第一個正確直接取第一個) &&:判斷false、第一個值true取第二個,第一個爲false 2、 字符串和數組之間的相互轉換 var string = ‘yan-jia-z

原创 前端看js執行機制

1、前言瞭解 js本是單線程,但很多時候,單線程效率太慢,影響進度,於是又有了多進程的發展,當然這僅僅是在單線程裏站隊將其分解多步解決問題。 2、同步異步的瞭解 同步是指按照順序執行的操作,當前一件事未完成之前,後面的事件都不能

原创 vue項目Eslint工具的使用

一、基本配置 1、安裝 npm install -g eslint 2、創建.eslint.js文件 手動創建 eslint --init創建(需要回答問題創建) 3、關於 eslint 的配置文件(eslint.js)