原创 CSS的單位及css3的calc()及line-height百分比

單位介紹 說到css的單位,大家應該首先想到的是px,也就是像素,我們在網頁佈局中一般都是用px,但是近年來自適應網頁佈局越來越多,em和百分比也經常用到了。然後隨着手機的流行,web app和hybrid app的開發,都用到了css3

原创 Charles 從入門到精通

安裝 Charles 去 Charles 的官方網站(http://www.charlesproxy.com)下載最新版的 Charles 安裝包,是一個 dmg 後綴的文件。打開後將 Charles 拖到 Application 目錄下

原创 如何獲取 Git 當前分支名稱

之所以要獲取 Git 分支名稱,是因爲最近在使用 Vue 的 vconsole。當然這個針對手機網頁的前端開發者調試面板只需要在開發環境下使用,生產環境下自動過濾掉就行,那麼就有了下面的代碼。 if (process.env.NODE_

原创 移動端適配: Font-size 設置的思考

1. 問題的引出 如果html5要適應各種分辨率的移動設備,可以使用rem這樣的尺寸單位,針對各個分辨率範圍在html上設置font-size的代碼:   html{font-size:10px} @media screen and (

原创 深入理解 css 中 vertical-align 屬性

兩個div 都設置 display:inline-block,正常顯示;但是在第二個div中加一個塊級元素或者內聯元素,顯示就變了個樣,爲什麼? <meta charset="utf-8"/> <style> div{ wid

原创 Vue 兄弟組件之間的通信

使用Vue構建組件容易,但對於初學者要掌握Vue組件中的通訊還是有一定的難度。比如說,父組件如何向子組件通訊?子組件又是如何向父組件通訊?兄弟組件又是怎麼通訊?這些方面都是有關於組件通訊相關的知識。而且掌握Vue組件之間的通訊方式還是掌握

原创 網易星球鑽石隨機排列且不重疊代碼實現

首先看一下網頁星球鑽石頁面: 從圖片可以看出鑽石的排列是隨機的且不重疊,那麼怎麼實現這樣的效果呢?代碼如下(vue): 1.html部分 <template> <div> <div>{{randomArr}}</div>

原创 Masonry介紹與使用實踐~Autolayout

在iphone1-iphone3gs時代 window的size固定爲(320,480) 我們只需要簡單計算一下相對位置就好了 在iphone4-iphone4s時代 蘋果推出了retina屏 但是給了碼農們非常大的福

原创 世界上主流的五大瀏覽器及其內核

一、Trident內核代表產品Internet Explorer,又稱其爲IE內核.Trident(又稱爲MSHTML),是微軟開發的一種排版引擎. 二、Gecko內核代表作品Mozilla ,FirefoxGecko是

原创 [WARN]Warning: Multiple build commands for output file

xcode中 有時候會報一個警告: [WARN]Warning: Multiple build commands for output file /xxx /xxx/...要解決這個問題很簡單: 1.選擇你的工程 2.選擇target 3

原创 vue 的this.$nextTick(()=>{})作用

1.html <div id="example"> <my-component></my-component> </div> 2.js Vue.component('my-component', { template: '<div

原创 gulpfile.js文件內容

var app = { srcPath:'src/', buildPath:'build/', distPath:'dist/' }; /*1.引入gulp*/ var gulp = require('gulp'

原创 vue 的 keep-alive 緩存使用

在開發Vue項目的時候,大部分組件是沒必要多次渲染的,所以Vue提供了一個內置組件keep-alive來緩存組件內部狀態,避免重新渲染,文檔在這裏。 文檔:和 <transition>相似,<keep-alive> 是一個抽象組件:它自

原创 vue router 路由鉤子使用

Vue-Router導航守衛: 有的時候,我們需要通過路由來進行一些操作,比如最常見的登錄權限驗證,當用戶滿足條件時,才讓其進入導航,否則就取消跳轉,並跳到登錄頁面讓其登錄。 爲此我們有很多種方法可以植入路由的導航過程:全局的, 單個路由

原创 如何使用 Webpack 的 Dllplugin

在使用 Dllplugin 之前,首先我們應該瞭解它是幹什麼的,如果你的項目夠大的話,可能每次編譯都要花費很多時間,那麼Dllplugin就是用來處理這個事情的。通過使用它你可以大大縮短編譯的時間,提升構建速度。接下來我們就來看看如何使用