Vue開發填坑

方法methods通用

問題描述：
vue開發過程中很多時候，函式方法methods會在各個元件內共用，每個元件都寫個比較多餘。
解決方法：
1.利用CommonJS思想，單獨寫，然後每個元件利用import { function } from ‘../..’匯入，直接使用。

import { myMethod } from '../../common/scripts/myMethod.js'
myMethod();

2.直接全域性註冊

Vue.protytpe.$myMethod = function(options) {
    console.log("this is my method"
 
);
}

元件使用時直接呼叫this.$myMethod即可。

彈窗背景

問題描述：
彈窗實現背景的毛玻璃效果。
解決方法：

.blur { 
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10
 
, MakeShadow=false); /* IE6~IE9 */
}

補充1：試了下發現子元素同樣處於模糊狀態，而且這裡子元素的filter並不是繼承父元素的值，預設就是不模糊的，但是和重繪有關係。目前的解決方法是重新建立一個層包含子元素，利用佔位實現彈窗背景模糊的效果，（偽元素）。
補充2：繼續使用了下發現這樣簡單的呼叫並沒有使得覆蓋層背後的背景達到同樣的模糊效果。可以給覆蓋層新增與底下被遮蓋層相同的背景圖片達到目的。

例子：

.content {
    background-position: center top;
    background-size: cover;
}
 

.content::after {
    background-image: url(xxx.jpg);
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
}

IOS輸入框的邊界線

問題描述：
蘋果IOS系統下觀察，輸入框的邊界線總是會兩邊向上翹起。
解決方法：
輸入框外層套一個div元素，設定相應的寬高以及邊界線，內部input設定為100%寬度

flex佈局小問題

問題描述：
有一個簡單的輸入手機號模態視窗，使用flex，column列向佈局。其中視窗上有個X號以及>號放在一個div裡，想通過設定這個父div為flex，justify-content來使得這兩個符號分佈兩側。但是發現這個div好像被設定了浮動似的，底下的元素佔用了這個div的位置。
解決方法：
並不是問題，主要是在有限容器內，如果元素過大會出現一些問題。

vue元件開發中css複用

問題描述：
每個元件的css都單獨寫感覺重用率很低。
解決方法：
Pending…

IOS中button按鈕與安卓的差異

問題描述：
蘋果機裡按鈕的內部大小和安卓頁面的按鈕大小好像不一樣，有時候可能相同的按鈕大小設定，結果內部能顯示的文字不同。
解決方法：
暫時把按鈕擴寬點。

倒計時

問題描述：
倒計時重新發送驗證碼的問題。
解決方法：

export default {
        data () {
            return {
                timer: 30,       //預設倒數30秒
                Interval:null    //setInterval的物件
            }
        },
        methods : {
            update() {
                if (this.timer == 0) {
                    this.timer = 60;
                    clearInterval(this.Interval);
                } else {
                    this.timer--;
                }
            },
            startTimer() {
                clearInterval(this.Interval);
                this.Interval = setInterval(this.update, 1000);
            }
        }
    }

輸入框實現有限數字輸入

問題描述：
想在輸入框裡輸入一個驗證碼或者手機號碼，而且限制手機號碼或者驗證碼的字元個數。
解決方法：
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="14">
注意，maxlength這個input標籤屬性只能和type為text或者password的輸入框聯合使用。

vue-resource請求失敗

問題描述：
在單個元件裡，希望通過mounted()生命鉤子函式，通過

this.$http.get('/api/my/route/done').then((response) => {

})  

對伺服器端請求資料。
而伺服器端用的是express()框架模擬。

// app.use('/api', apiRoutes);用express模擬伺服器傳輸資料。
var app = express()

// 通過require獲取JSON資料
var appData = require('../personalCenter.json')
var user = appData.user

var routeData = require('../route.json')
var routeDone = routeData.done
var routeCancelled = routeDone.cancel

// 建立express伺服器端路由
var apiRoutes = express.Router()

// 客戶端請求伺服器端的路徑，響應res
apiRoutes.get('/myProfile', function(req, res) {
  res.json({
    data: user
  })
})

apiRoutes.get('/my/route/done', function(req, res) {
  res.json({
    data: routeDone
  })
})

apiRoutes.get('/my/route/cancel' function(req, res) {
  res.json({
    data: routeCancelled
  })
})

app.use('/api', apiRoutes)

但是在使用過程中卻出現uncaught(in promise)，404Not Found錯誤。
解決方法：
就算是熱載入，如果啟動伺服器後，直接更改伺服器的配置dev-server.js，也不會達到更新的效果。
重新啟動npm run dev即可。

元件的show切換

問題描述：
有時候想要達成點選一個元件，實現另外一個元件show切換的效果。比如對於列表類來說，如果對每項新增一個點選事件，點選後就會展示詳情。一般採用的是absolute覆蓋的方法。但是如果列表太長，跳出的詳情頁就就無法完全遮蓋列表。
解決方法：
讓列表元件和詳情元件處於同一級的狀態，點選列表元件的單項後，show詳情元件，且隱藏列表元件。如果詳情元件放在列表元件的子元件裡，那麼隱藏列表元件也會隱藏詳情元件。

父子元件之間的資訊傳遞

記錄： 父元件通過prop向子元件傳值，子元件通過emit向父元件傳遞事件，並且可以伴隨值。

<component-a  v-on:child-say="listenToMyBoy"></component-a>
<p>Do you like me? {{childWords}}</p>
 methods: {
    listenToMyBoy: function (somedata){
        this.childWords = somedata
    }
}

<button v-on:click="onClickMe">like!</button>
methods: {
      onClickMe: function(){
        this.$emit('child-say',this.somedata);
      }
}

補充描述：現在我的兩個元件放在同一個元件S裡，如下。

<trTasksList></trTasksList>
<trTasksDetail></trTasksDetail>

現在我點選List元件，List元件傳遞了一個數據到S元件，儲存在資料data（）裡，繫結給Detail的prop，但是出現了 vaild prop錯誤。這是為啥？
解決方法：
我暈，找了半天發現是prop型別的問題，我傳遞的是一個id比如1，還必須使用String()轉換成字串的格式傳輸。
補充2：
發現多個檢視依賴於同一狀態，試試vuex吧。
補充3：
對於同個元件對映多個路由，可以試下動態路由，是可以傳遞資訊的。
比如這麼玩

給元件A新增一個點選事件，點選後跳轉路由渲染另外一個元件B。
假設B元件是個詳情元件，需要適配不同的使用者資料（根據點選的A元件確認）。
這裡就可以用動態路由。
路由修改"XX/:id"
這樣'XX/YYY'形式的路徑都會跳轉到"XX/:id"匹配的元件。
然後資料id，在B元件中只需要通過this.$route.params引用。
mounted()的時候，通過vue-resource加到請求路徑裡，就成了動態路徑了。
動態路徑因為是都在使用同一個元件，所以要注意一下生命週期函式的有效性問題。

補充4：
我擦，換了種方法還是出現了資料讀取的錯誤，原來在元件形成的時候，{{}}語法就會在掛載前先訪問data()資料的存在，所以有時候可以給標籤新增v-if屬性進行判斷。
補充5：
還是那個動態路徑，但是不同路徑資料怎麼傳輸老是出現錯誤、
pending
暫時的解決方法是把兩個元件放在一起，通過show來切換…還好元件不多..

路由設定和狀態管理(mark)

問題描述：
初次做專案感覺給自己挖了很大的一個坑，現在什麼時候用路由渲染什麼時候用v-show渲染有點亂，而且狀態的管理有點問題。
對專案的生命週期認識還不深刻，主要還是做同步的互動。
解決方法：
積累經驗好好學吧…

圖片上傳與預覽

問題描述：
有時候可能會有這樣的需求，需要通過<input type="file">標籤上傳一個頭像，然後在特定的位置預覽頭像。
解決方法：
預覽
1.新增一個<img :src="image">標籤，圖片路徑繫結例項資料
2.給<input type="file">新增一個事件@change="onFileChange"
3.onFileChange方法如下：

onFileChange: function(){
    if (typeof FileReader == 'undefined') {
        console.log('failed');
        return false;
    }
    var file = document.getElementById('file').files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    var vm = this;
    reader.onload = function(e) {
        vm.image = e.target.result;
    }
}

上傳

列表渲染傳遞index

問題描述：
寫列表渲染的單項元件時，有些元素使用class標記的，這樣寫相關js的時候就需要class的具體位置[index]
解決方法：
通過列表渲染的index傳遞

選擇框select初次進入無法點選第一項

問題描述：
進入頁面後，選擇select選擇框的第一項並沒有反應，因為網頁預設選項就是第一項，點選並不觸發onchange事件。
解決方法：
新增一個display為none 的第一項

vue transition leave class未啟作用

問題描述：
用vue的transition元件實現進入離開的過渡狀態，發現進入狀態時的class正確加上了，但是離開卻沒有狀態。
解決方法：
這個真的有點鬱悶，鬱悶了好久才發現原來是css寫錯了…自己檢查下css的類名或者什麼其他的東西有沒有打錯吧。

列表渲染部分資料丟失（疑難雜症）

問題描述：
這裡的資料丟失並不是指從後臺得到的資料丟失，而是在利用資料進行渲染的過程中，有部分資料渲染的元件並沒有渲染出來（這裡是最後幾個資料），也就是說這些元件佔了位置，但是在電腦螢幕上沒有顯示，而且切換一次路由，這些資料又出來了。因為vue的列表渲染也是利用insert，估計數量太大會引起這類錯誤。
補充：
手機端沒有這個問題….
解決方法（未實驗）：
分頁。