vue中遇到的坑

時間 2019-11-11

標籤 vue 遇到简体版

原文原文鏈接

如何解決在vue中替換圖片、一個使用base64，而咱們使用zepto以後，src找不到資源，由於已經打包了，難道強行寫base64。css

1. 引入文件時語法很重要！html

import "FooterMenu" from '@components/Menu';

import FooterMenu from '@components/Menu';

即在頁面組件中引入一個FooterMenu組件, 咱們引入時應該引入的一個變量做爲標籤，而不能再FooterMenu上添加引號！！在這裏浪費了不少時間。vue

2. 在一個單頁面組件中不須要style，但必需要script。jquery

即在.vue文件中，咱們能夠沒有style，可是必需要有script來利用 exports default 來導出模塊，不然就會出錯。ios

補充： vuex

    <transition name="fade">
      <div class="pay-model" v-show="ifpay">
        <div class="pay-style">
          <div  v-if="payArr[payArr.length - 3] == 1">
            <input type="radio"  name="settleChoose" checked = "checked"  data-value='4' id="wechat" value="微信支付" v-model="style">  
            <label for="wechat" >微信支付</label>
          </div>
          <div v-if="payArr[payArr.length - 2] == 1">
            <input type="radio" name="settleChoose"  id="alipay" data-value='2' value="支付寶支付" v-model='style'>  
            <label for="alipay"  >支付寶支付</label>
          </div>
          <div  v-if="payArr[payArr.length - 1] == 1">
            <input type="radio" name="settleChoose" id="tohome" data-value='1' value="貨到付款" v-model='style'>  
            <label for="tohome">貨到付款</label>
          </div>
        </div>
      </div>
    </transition>

在這裏，若是style的值爲初始值 ""，即爲空，那麼咱們及時使用這裏的checked = "checked"也沒法自動選中，解決方法：若是咱們但願在打開模態框以後的微信支付是默認的，那麼咱們就能夠將 style 的初始值設置爲「微信支付」，這樣就沒有什麼問題了。vue-cli

補充：express

      <div v-if="payArr[payArr.length - 2] == 1">
                <label class="pay-lable" >
                <input type="radio" v-bind:checked = 'curPayMethod == 2' name="choosePay" value="2">  
                支付寶支付</label>
              </div>
              <div  v-if="payArr[payArr.length - 3] == 1">
                <label class="pay-lable" >
                <input type="radio" v-bind:checked = 'curPayMethod == 4' name="choosePay" value="4">  
                微信支付</label>
              </div>
              <div  v-if="payArr[payArr.length - 1] == 1">
                <label class="pay-lable">
                <input type="radio" v-bind:checked = 'curPayMethod == 1' name="choosePay" value="1">  
                修改成貨到付款</label>
              </div>

label的for對應於input的id，若是說不能正常使用，其實咱們也能夠直接將input寫進label裏去，這樣會更加方便，再也不須要使用 for 和 id 了。npm

3. 當咱們在路由中配置了不一樣的router-link對應於不一樣的組件的時候，會發現npm run dev以後什麼都沒有，好比個人路由以下：axios

export default new Router({
  routes: [
    {
      path: '/Mall',
      component: Mall
    },
    {
      path: '/personal-center',
      component: personalCenter
    }, 
    {
      path: '/order',
      component: AlipayHint
    },
    {
      path: '/commodity',
      component: Commodity
    }
  ]
});

運行以後，是空白頁，這是由於路由中並無配置一進來是「/」的路由，因此什麼都沒有顯示，這時就須要重定向了。以下所示：

routes: [
    {
      path: '/Mall',
      component: Mall
    },
    {
      path: '/personal-center',
      component: personalCenter
    }, 
    {
      path: '/order',
      component: AlipayHint
    },
    {
      path: '/commodity',
      component: Commodity
    },
    {
      path: "/",
      redirect: "/commodity"
    }
  ]

即咱們須要重定向的時path中的值，而不是component中的值。

4. 在v-for下的列表中，如何向方法傳遞參數？

（1）咱們能夠在一個list中綁定 v-for="item,index in items"，這樣，咱們就能夠獲取到相應的item和index（從0開始），另外，若是咱們但願向list中的某個v-on:click = "handler" 傳遞參數，能夠直接傳遞，好比： v-on:click="handler(index)"，這樣就能夠向methods下的handler傳遞參數了。

（2）咱們還能夠傳遞$event直接給hanlder，而後經過e.currentTarget獲取到這個元素。

5. 如何使用vuex、使用store中的數據、替換store中的數據？

　　vuex你們都不陌生，好比我在一個store的state中存儲了items爲一個空數組，而後在組件中循環數組中的每個元素並展現出來，而後再經過axios獲取到數據以後更新store，這樣數組中就有元素了。

　　最開始我使用的思路以下所示：

const state = {
  totalPrice:  0,
  items: [],
　//.... 其餘的state
}

　　而後經過axois獲取items，獲取到以後更新：

  .then(function (response) {
    if (response.data.code == 130) {
      items = response.data.data;
      console.log(items);
      store.commit('update', items);
    }

　　其中的update已經在mutation中定義了，由於咱們知道vue中的state只能經過commit這一種方式來替換而不能經過其餘方式，以下：

mutations: {
update (state, items) {
state.items = items;
}
}

　　最後，咱們須要把items掛載到組件下：

  data: function () {
      return {
        name: "CommodityKinds",
　　　　　items: this.$store.state.items
      }
    },

　　說明：由於我已經將store註冊到根組件下了，因此咱們能夠在組件中使用 this.$store.state來訪問到state對象。

　　可是，這樣是有問題的 --- 咱們會發現，進入有items數據的頁面後，數據並無被渲染出來，而是等到咱們切換頁面，再切換回來的時候才能渲染出來。

　　而問題就出如今了最後一步！

　　咱們應該將store中的數據放在computed下而不是放在data下！！！！

　　具體解決方法以下：

  import {mapState} from 'vuex'

　　而後：

    computed: mapState({
      items: state => state.items
    })

　　這樣，當store中的數據改變時，就會直接改變了，更多例子能夠看vuex官方文檔，講的很好。

總結： 通常而言，咱們須要將store下的state放在computed中，將組件自身的state，不須要像vuex這樣動態的、傳遞的放在 data 下便可。

6. 在vue中，咱們可使用v-on:click.once對click處理函數只綁定一次，這樣就相似於jquery中的one綁定了。

7. 在jquery中，若是咱們但願第一個元素最開始添加一個active類名，咱們可使用class綁定，其中是一個對象，對象中的屬性是類的名稱，值是布爾值，若是爲true，則顯示，不然不顯示。

<template>
  <div class="commodity-kind">
    <div class="kind" v-bind:class="{active: index == 0}" v-on:click="getContent(item.id, $event)" v-for="item,index in items">
      <span>{{item.name}}</span>
    </div>
  </div>
</template>

　　這樣，一進去就是這樣的狀態了。

8. 當須要axios請求時，若是咱們在不一樣的組件中都須要請求，而且都有相同的請求頭，特別是最近的項目我須要使用vue-cli的express代理Tomcat服務器進行測試開發時，就要添加/api才能正常訪問，可是在每個請求前添加這個是很是麻煩的，而且在 npm run build 時，又要把這些/api去掉，這是至關麻煩的，因此咱們能夠單獨創建一個js文件，我命名爲 request.js 文件，內容以下：

import axios from 'axios'
axios.defaults.baseURL = "/api";
axios.defaults.headers.common['BBG-Key'] = "ab9ef20253-49d4-b229-3cc2383480a6";


export default axios

其中，/api是在開發過程須要代理服務器所必須的，因此這裏設置爲baseURL，那麼在實際請求中，就會自動添加/api，而且在實際生產中，咱們只要註釋掉它就能夠了。

而BBG-Key是爲了安全使用的，因此爲了不每次在請求時都添加一個請求頭，咱們在這裏直接設置爲 common（公共）的請求頭。這樣，在實際的每個請求中就不須要都添加這個請求頭了。

最後導出這個 axios，在其餘的模塊中引用。

import axios from '../assets/js/request'
  axios.get('/bbg/shop/get_classify', {
    params: {
      sid:  13729792
    } 
  })
  .then(function (response) {
    if (response.data.code == 130) {
      items = response.data.data;
　//............

這樣，就會較以前省去不少的工做量。 good！

9. vue中在css下寫的，即通常使用的時做爲背景圖的，在assets下的圖片通過打包以後使用的時base64的編碼方式，因此，若是在js中操做css，使用路徑的方式是行不通的，個人方式是使用base64，可是有更好的方法嗎？以下所示：

 handleDefault (id,e) {
        $(".default").html("設爲默認").css({
          'color': 'black',
          'background': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAC+SURBVFhH7Y5BCgIxDEXHs7h15wV0XWjajeD9D6IVP8wfJlAITovwH2QTEt5bxFGY2W3kQNun1vqaOcjw8R5mDHL2eMczBjlbSinP7tGBsLu1nLFeacsHH2E9DHa3livWKwrswG4FRmC3AiOwW4ER2K3ACOxWYAR2KzACuxUYgd0KjMBuBUZgtwIjsFuBEdj9n4FmVvgI62GwO6V0wXoLH80c5OzxjmcMcny8h5GDjC6nnPN95HycX7X4JcvyBq2MUQCYxq1GAAAAAElFTkSuQmCC) no-repeat',
          'background-size': '0.4rem'
        });

         $(e.currentTarget).html("默認地址").css({
          'color': '#51B1B0',
          'background': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAnCAYAAAB9qAq4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAG3SURBVFhH7Zc9S8NgFIXrFwiuiuDu4uoPcFFwEJsUhP6COjk7+hscO7h0a5Hc+6bOdnMRHMTByV1wEB0caxJPX0xzY9MkvSLmgQekOSfvoWlFaxUaHPV6C/vd7lqZHvj+Km6fj71OZ8U1PNTQYXrCsdlwjTmRbjRrz4bDeUxI55B5SypriRnpSCVN60wPmJKkacy6VNIWc5I45J1LBW0xJ4nLxFJB2+12ewmT4lQDM1oNTJXpBkeFv878xHX4KwMdY+5wTESDeVfKhaoPdAzf4wiLlBupOtAxdIvbj5iTct9VG+gQXePWFik3bqGBiE48qG7oClGLlJPMPbDJvIFohJQJDR6rQcQi5dLMPTD4sL8iaklkyPNwyTKemWSxzyDzC+IWe42I8ZIl1s1o8S8JeW+oWFyf+/jRInYzWHxgYPC431ETkTpZLWVgaN3wM6oxpOw0ljYwcuw/MjEzpeUO/PLD9elYeD2XsxhYqn93oMNMUkHbncFgEZPiNAy1pIK2mJOkFby1UkFbzJGRCrrSBabIBM9/WS7qiBk/0+hfbkrlWYvjsxP8Xfco3ah0iU5xZMV/o1b7BPkQ+pZZ2s/xAAAAAElFTkSuQmCC) no-repeat',
          'background-size': '0.4rem'
         });

10. class綁定的是一個對象，通常狀況下，這個對象直接定義在html中是比較好處理的，以下：

   <!-- 這裏使用class綁定來決定默認 -->
            <span class="no-default" v-bind:class="{default: item.id == defaultAddress.id}" v-on:click="handleDefault(item.id, $event)" >
              {{ (item.id == defaultAddress.id) ? "默認地址" : "設爲默認" }}
            </span>

注意： class中的class名稱不能用引號括起來。

11. 在menu中，每當點擊一個選項時，替換其背景圖片，如何作到實時的變化。

最開始，個人實現思路是：先經過import的方式引入，而後在 v-for 中引用data下的每個項目的src，而後當點擊選項的時候，用switch函數來根據點擊的index來進行替換圖片，可是這樣的替換存在一個問題：每當點擊以後，第一次並沒變化，而是再點擊一次，纔會發生改變。

緣由：在vue中，data下的值和DOM中不是實時更新的，因此通常實時更新就要使用store。即在store中import 圖片資源，而後在改變的時候經過mutations進行改變。這樣的變化就是實時的了。

問題：雖然使用 mutations 能夠實時改變，但問題是，咱們徹底是沒有必要的，由於這個改變只須要在一個組件中，使用store未免過小題大作了。

注意：這裏使用的是vue的data，而且須要改變的時引入的文件（須要打包的），對於下面這樣只須要修改顏色的不須要使用這樣的方式，只須要使用 zepto 來改變css便可，這樣必定是實時的。

12. 使用actions時，須要commit Mutations，可是actions 不支持多參數傳遞，也就是說第一個參數是Mutation，第二個參數是咱們須要傳遞的值，若是傳入多個，那麼第三個及之後將自動忽略，爲了解決這個問題，咱們能夠將多個值封裝到一個對象，而後傳遞這個對象就能夠了，這就相似於Payload啊啊啊。

       if (response.data.code == 626) {
              for (let i = 0; i < response.data.data.length; i++) {
                console.log(response.data.data[i], index);
                var obj = {
                  index: index,
                  item: response.data.data[i]
                };
                commit(UPDATE_ALL_CONTENT, obj);

              }
              index++;
              resolve();
            }

OK！這就是payload。哈哈哈哈理解就好。

13. 在vue中，咱們傳入的事件必定是$event，可是獲取時， e.currentTarget 和 e.target 獲取的不同的，區別在於前者是當前的元素，即冒泡的最後一個綁定事件的元素，然後者是最原始的元素。

關鍵：後者能夠實現事件代理。

14. 有時候啊，一個很小的錯誤都會致使全局的失敗！好比，不知道爲何就報下面這種錯誤！

而後內容就顯示不出來，可是經過network能夠獲知數據都請求到了，因此遇到這種問題個人解決方法仍是尋找於此有關的代碼，而後逐個註釋代碼，若是註釋以後再也不出錯，就說明問題出在了這裏，經過尋找，問題在這：