邊框也可以改顏色的，舉個項目中的例子，按照這種格式去改顏色（本文例子有css代碼的話基本都是stylus的寫法）：

對應頁面：

在移動端開發中，某些機型、某些瀏覽器上，click點擊事件要延遲300ms執行。

要解決這個問題，我們引入個fastclick庫

npm install fastclick --save

--save的意思是：不管在開發環境測試，還是線上跑代碼，安裝了的庫都可以使用。并且下載好后，自動存到package.json的dependencies屬性中，比如這里install的fastclick：

然后在入口函數main.js中引入和使用：

import fastClick from "fastclick"、
fastClick.attach(document.body)

先在阿里巴巴矢量圖標庫創建一個項目

然后在iconfont上選購，添加到購物車，選好后添加到自己的項目，然后下載到本地。

下載的東西中只要用到這幾個：

然后把iconfont.css放到一個文件夾中并且在入口函數main.js處引入后就可以全局使用了。

舉個使用的例子:

注意類名要加iconfont，然后這里在span里輸入的代碼就是你選中的圖標的代碼：

這步其實應該穿插在做項目過程中進行的，這里先列出來。

在build文件夾下的webpack.base.conf.js中配置，如下圖，圈起來的是我在項目中配置的。

這樣有配置后就可以使用自定義目錄了。比如按照我上面的配置的話

import src/assets/styles/border.css

就可以寫成

import styles/border.css了。

這里使用的是 vue-awesome-swiper。

先安裝： npm install vue-awesome-swiper --save

然后用法一些的其實都可以在其文檔中查閱到：

鑒于在各個頁面都可能會用到輪播功能,所以直接在全局也就是入口文件 main.js 處引入。

然后使用：

比如要使用按鈕區的話，就需要配置參數。根據個人在項目中的需求，可以查閱其github文檔按需使用。

比如這個test。在網速慢慢加載的時候，可能test會先在上面顯示，然后等圖片撐開區域的時候再跑回下面。

為了防止這種抖動，最好這樣子做：

給輪播swiper外面套一層類為wrapper的div，然后給div固定大小。比如在項目中這里的輪播圖片的寬高比是 364:97 約等于 3.75，高度是寬度的百分之 26.6。

所以響應式開發可以這樣給div框樣式：

現在vw單位的兼容性其實可以了。

有種兼容性很好的方案：

overflow: hidden
width: 100%
height: 0
padding-bottom: 26.6%

這種方式也是高度是寬度的 26.6%。

其實吧。。這個vue-aowsome-swiper組件目前為止已經不存在這種抖動問題了。。

比如插件按鈕區配置后，默認按鈕顏色是藍色小圓點。

審查元素可以看出：

那我們如下這樣子加樣式去改變行嗎？

一般這樣子問都是不行滴...

因為有scoped作用域的原因，這個類的屬性的設置是在原本的 swiper組件下，而不是在我們這里設置的swiper組件下。

應該這樣設置：

意思是在.wrapper下的所有類中，找.swiper-pagination-bullet-active類。

>>>是具有穿透作用域的意思，穿透其他組件的作用域。

比如，這里是個p標簽。

P標簽里的數據太多的話 希望顯示一個 ... 省略號。

可以這樣利用text-overflow屬性:

要實現溢出時產生省略號的效果，應該在定義兩個樣式：強制文本在一行內顯示（white-space:nowrap）和溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示為省略號效果。

一般情況下在mounted鉤子里發送ajax請求數據。想詳細了解生命周期 => 我有寫過一篇文章

請求方式，看自己，這個項目中axios、fetch兩個方式我都寫過。

首先，用vue腳手架工具生成的工程里面，只有static目錄（靜態文件目錄）下，才能被外界訪問到。

我們就把本地的一些模擬數據放在這個static目錄下，自己建個文件夾存儲數據。這個項目中是static/mock/index.json：

這數據是本地的模擬數據，我們不希望到時候一起把它push到線上，可以在.gitignore里這樣配置：

現在這個文件夾下的所有東西都不會被傳到線上了。

當然，也不會提交到本地的git倉庫里面。

這樣配置還不夠，目前在局部根組件中寫的請求的路徑是這樣的，拿項目中舉例：

當我們上線這代碼的時候，我們請求的網址，最好前面加上個‘api’，如下面的紅框中：/api/index.json 這樣子最好了。

很好的是，恰好Vue腳手架里面有這樣一個轉發的代理功能。通過這個功能，就可以實現以上構想。

config配置文件下，有個 index.js 腳本，官方給我們提供了一個 proxyTable{} 的配置項，我們可以這樣配置：

這意思是：當我們請求api的時候，依然映射到本地8080端口，然后訪問任何以api為開頭的url的時候，做一個路徑替換，代理訪問到 /static/mock 處。

實際這功能 是webpack-dev-sever提供的。

改過配置文件，需要重啟下服務器，重啟后就可以如下請求數據了：

這里實際上訪問的就是static/mock/index.json里的內容了。

如果可以的話，最好能在局部根組件里請求一次ajax數據，然后從局部根組件里把接收到的數據分別傳給各個局部的子組件，而不是每個局部的子組件都發送一次ajax請求。

這里是這樣寫的css

現在在輸入框里面輸入文字字符超過輸入框大小時：

這兩部會貼著,不那么好看。想要給這個輸入框加個padding，留點間隙會更好。

但直接在input下面加行嗎？

頁面：

因為包裹input框的div沒設置width，也就是width是auto。input框的width設置的是100%。

如果直接給input加padding左右一點的話是會撐開input框的寬度的。所以會溢出。

那怎樣解決這個問題呢？

我們只是想設置一個左右padding值，沒想讓input框長寬變化。所以，我們在 Input 下面加個：box-sizing: border-box

這樣的話，我們直接給input設置的寬高就包括了padding、border在內的寬高了。

此時我們要修改padding的值的話，就只會在這個框內變化 不會撐開框寬高了。

初始開發頁面時，到這步，因為加了比較多字母對應的區域，頁面出現了滾動條的時候：

為了使用better-scroll庫，我們僅讓列表區域顯示到剛進頁面時能顯示到的區域就行了，不需要出現滾動條。所以可以給最外層的包裹整個列表區域的框div.list 加個overflow: hidden就行了。（整個列表頁指下圖中的從當前城市開始到最后，城市選擇和輸入框是其他子組件寫的了）

接下來具體better-scroll的用法，github上其文檔有說明，各人可根據具體情況查閱使用。

點擊事件中，我們需要查看點擊的內容時，可以利用點擊事件的事件對象

在Vue的一個點擊事件里，在methods定義點擊方法時這個方法可以接收一個參數e，e就是我們點擊到的那個事件對象。

要拿到我們點擊到的事件對象的內容 可以這樣來：e.target.innerText

舉個項目中的例子驗證一下：

比如此時頁面上點擊了 D F J

當點擊到相應的字母的時候顯示list組件的對應城市的區域。

better-scroll這個第三方插件有個方法可以實現這個需求，思路是：

監聽所點擊的字母表里字母的值letter的變化，一旦letter變了，就利用better-scroll的提供的一個接口，如下圖劃線的部分

它會讓better-scroll的滾動區域，自動滾動到某一個元素上。需要給這個方法傳遞我們滾動到該元素的該元素DOM。

利用這個思路就可以實現需求1了。

手指拖動字母表，字母對應的列表跟著聯動展示。

思路：

利用touchstart、touchmove、touchend事件，并給個限制（touchStatus） 只當手指在屏幕移動的時候才執行一些操作。然后用個數組letters來存放字母表的所有字母，這里的letters大概是["A","B","C"...]，并讓頁面v-for這個letters來顯示相應的內容。用數組存放這些字母的原因也是為了實現這需求的主要思想：根據下標，找到對應的字母。

接下來，先用offsetTop找到字母表中字母A距離包裹它的頂部的高度。下圖紅框。

這里的74 代表的是紅色方框的高度。

然后獲取移動時手指所在的高度，此高度時針對于客戶端的高度，用clientY。
touchmove事件有個事件對象，事件對象里有個touches數組，touches[0]里面就有當前手指的信息，包括clientY屬性。

實時獲取我們手指的位置。

我們要獲取距離包裹塊的高度 => 也就是clientY的高度要減去headers區和serach區的高度，這兩個區高度是 79px。

然后算我們手指移到的字母在數組中的下標 邏輯是 (touchY - startY)/每個字母的高度，再把結果向下取個整。

最后，把這個下標在letters數組中對應的字母傳給需求1所在的組件利用需求1的思路就行了。（這里的傳值涉及到了兄弟組件之間的傳值，此時該頁面比較簡單不建議用vuex，可以用event bus/找同一父組件做媒介傳值，具體方法百度。）

在我項目中最終邏輯代碼是這樣寫的：

最后做個最佳實踐，用個if，確保 index的值。

第一處

handleTouchMove是手指滑動的時候就會執行，而我們框起來的也就是A字母距離包裹框的高度是固定的，不用每次滑動的都執行這段代碼。

所以此處需要優化，這樣子來：

在data里初始化startY為0

然后用生命周期鉤子 updated 去執行給startY賦值的語句

這里為什么用updated這個鉤子呢？在項目中初次渲染字母表組件alphabet.vue的時候，從它父組件City.vue傳過來的值是一個空對象。當City.vue里ajax動態獲取數據后，從City再傳到alphabet的值讓數據從初次的空對象發生改變。在數據更新完畢后，就觸發了updated鉤子，此時給startY賦值就是值都有，而且只會賦一次。

第二處：函數節流

通過函數節流 減少handleTouchMove()的執行頻率 （因為我們手指在滑動的時候 該函數執行頻率很高的）。

怎樣使得函數節流呢？

通過定時器和清除定時器來實現。

先在data中初始化timer為 null，然后這樣來用

這樣子用定時器進行函數節流的話 ：

如果已經正在做這件事情的時候，我呢，讓它延遲16ms之后再去執行。假設在這16ms之間你又去做了手指的滾動，那么它會把上一次你要做的操作給清除掉（clearTimeout），然后重新執行你這次要做的事情 （等于以最終的手指滑動的位置為準 ）。

通過這種函數節流方式，會大大減少該函數的執行次數，從而提高網頁性能。

函數節流的方式，當一個函數執行次數很多想要減少而且減少也沒影響的時候，是很有必要采用的一種方式。

可能用戶會有不小的概率關閉了本地自動存儲的功能，一般我們使用localStorage的時候 都要使用 try catch 代碼塊，這樣就算用戶關閉本地自動存儲功能，也不會讓整個代碼都不能運行，只是沒了這個localStorage的功能而已。

舉個項目中的例子：