vue2-elm學習記錄（Day1）

知識點：

keep-alive

是Vue提供的一個抽象組件，用來對組件進行緩存，從而節省性能用，由於是一個抽象組件，所以在v頁面渲染完畢後不會被渲染成一個DOM元素。
當組件在keep-alive內被切換時組件的activated、deactiveed這兩個生命週期鉤子會被執行。
被包裹在keep-alive中的組件狀態會被保留，例如我們將某個列表類內容滑動到第100條位置，那麼我們在切換到一個組件後，再次切換回到該組件，該組件的狀態依舊會保持在第100條列表處。

用法

<keep-alive>
    <component>
     <!--該組件將被緩存-->
    </component>
</keep-alive>

props:
include-字符串或正則表達式，只有匹配的組件會被緩存
exclude-字符串或正則表達式，任何匹配的組件都不會被緩存
eg:

export default{
    name:'a',
    data(){
      return {}
    }
}

<keep-alive include="a">
    <component>
        <!---name爲a的組件將被緩存-->
    </component>
</keep-alive>

<keep-alive exclude="a">
    <component>
        <!--除了name爲a的組件都將被緩存-->
    </component>
</keep-alive>

遇見vue-router:
router-view也是一個組件，如果直接被包在keep-alive裏面，所有匹配到的視圖組件都會被緩存：

<keep-alive>
    <router-view>
    <!--所有路徑匹配到的視圖組件都會被緩存-->
    </router-view>
</keep-alive>

假如只想router-view裏面某個組件被緩存，有兩種辦法，
1.使用include/exclude
2.增加router.meta屬性
增加router-meta屬性

//routes配置
export default{
    {
        path:'/',
        name:'home',
        component:Home,
        meta:{
            //需要被緩存
            keepAlive:true
        }
    },
    {
        path:'/:id',
        name:'edit',
        component:Edit,
        meta:{
           //不需要被緩存
            keepAlive:false
        }
        
    }
}

<keep-alive>
    <router-view v-if="$router.meta.keepAlive">
        <!--這裏會被緩存的視圖組件，比如Home-->
    </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
    <!--這裏是不被緩存的視圖組件，比如Edit-->
</router-view>

擴展：
假設這裏有3個路由：A,B,C
默認顯示A
B跳到A，A不刷新
C跳到A，A刷新
實現方式：
在A路由裏設置meta屬性

{
    path:'/',
    name:'A',
    component:A,
    meta:{
        //需要被緩存
        keepAlive:true
    }
}

在B組件裏面設置beforeRouteLeave：

export default{
    data(){
        return {};
    },
    methods:{},
    beforeRouteLeave(to,from,next){
        //設置下一個路由的meta
        //讓A緩存，即不刷新
        to.meta.keepAlive=true;
        next();
    }
}

在C組件裏面設置beforeRouteLeave:

export default{
    data(){
        return {};
    },
    methods:{},
    beforeRouteLeave(to,from,next){
        //設置下一個路由的meta
        //讓A不緩存，即刷新
        to.meta.keepAlive=false;
        next();
    }
}

這樣便能實現B回到A，A不刷新；而C回到A則刷新。~~~~

路由的過渡動畫

想讓路由有過渡動畫，需要在<router-view>標籤外部添加<transition>標籤，標籤還需要一個name屬性

<transition name="fade">
    <router-view></router-view>
</transition>

組件過渡過程中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關,
比如name='fade'，會有如下四個CSS類名：
1.fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀後立刻刪除
2.fade-enter-active：進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成後移除
3.fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀後立刻刪除
4.fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成後被刪除
過渡模式mode:
in-out:新元素先進入過渡，完成之後當前元素過渡離開
out-in:當前元素先進入離開過渡，離開完成後新元素過渡進入

slot

slot是對組件的擴展，通過slot插槽向組件內部指定位置傳遞內容，
通過slot可以父子傳參。
通俗理解就是“佔坑”，在組件模板中佔好了位置，當使用該組件標籤時候，組件標籤裏面的內容就會自動填坑，當插槽也就是坑<slot name="mySlot">有命名時~~~~，組件標籤中使用slot="mySlot"的元素就會替換該對應位置內容。

webpack開發環境process.env.NODE_ENV

在工作中，根據開發環境的不同，設置不同的變量、參數、和引入依賴，使打包更加的自動化。

獲取當前城市

fetch.js：

import {
  baseUrl
} from './env'
export default async (url = '', data = {}, type = 'GET', method = 'fetch') => {
  type = type.toUpperCase();
  url = baseUrl + url;
  if (type == 'GET') {
    let dataStr = ''; //數據拼接字符串
    Object.keys(data).forEach(key => {
      dataStr += key + '=' + data[key] + '&';
    })

    if (dataStr !== '') {
      dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
      url = url + '?' + dataStr;
    }
  }

  if (window.fetch && method == 'fetch') {
    let requestConfig = {
      credentials: 'include',
      method: type,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      mode: "cors",
      cache: "force-cache"
    }

    if (type == 'POST') {
      Object.defineProperty(requestConfig, 'body', {
        value: JSON.stringify(data)
      })
    }

    try {
      const response = await fetch(url, requestConfig);
      const responseJson = await response.json();
      return responseJson
    } catch (error) {
      throw new Error(error)
    }
  } else {
    return new Promise((resolve, reject) => {
      let requestObj;
      if (window.XMLHttpRequest) {
        requestObj = new XMLHttpRequest();
      } else {
        requestObj = new ActiveXObject;
      }

      let sendData = '';
      if (type == 'POST') {
        sendData = JSON.stringify(data);
      }

      requestObj.open(type, url, true);
      requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      requestObj.send(sendData);

      requestObj.onreadystatechange = () => {
        if (requestObj.readyState == 4) {
          if (requestObj.status == 200) {
            let obj = requestObj.response
            if (typeof obj !== 'object') {
              obj = JSON.parse(obj);
            }
            resolve(obj)
          } else {
            reject(requestObj)
          }
        }
      }
    })
  }
}

getData.js：

import fetch from '../config/fetch';
import { getStore } from '../config/mUtils';
/** 獲取首頁默認地址*/
export const cityGuess = () => fetch('/v1/cities', {
  type: 'guess'
})

展示部分home.vue:

ps:baseUrl爲elm.cangdu.org

String.fromCharCode

將Unicode編碼轉化爲一個字符
var n=String.fromCharCode(65);

遇到的問題

1.sass-loader安裝後報錯

錯誤代碼：

Module build failed: TypeError: this.getResolve is not a function at Object.loader

問題解決：

執行安裝之後的sass版本太高，webpack編譯時出現了錯誤，這個時候只需要換成低版本就行，找到package.json文件，裏面的"sass-loader"的版本更換掉就行了。
"sass-loader": "^8.0.0"，更換成了 "sass-loader": "^7.3.1"
重啓項目就行了。

2.將獲取的數據按照A-Z字母開頭排序

通過JS的fromCharCode()方法類實現：

computed:{
    //將獲取的數據按照A-Z字母開頭排序
    sortgroupcity(){
     let sortobj={};
     for(let i=65;i<=90;i++){
        //this.groupcity爲正常請求返回來的數據
        if(this.groupcity[String.fromChartCode(i)]){
            sortobj[String.fromCharCode(i)]=
            this.groupcity[String.fromCharCode(i)];
        }
     }
     return sortobj;
    
    }
}

fromCharCode()可接受一個指定的Unicode值，然後返回一個字符串。
處理後的groupcity是一個新對象，key值爲城市首字母，這樣在遍歷groupcity的時候,key即時首字母。

<ul class="letter_classify">
   <li v-for="(value,key,index) in sortgroupcity" :key="key">
      <h4 class="city_title">
        {{key}} //此處即爲首字母
        <span v-if="index==0">(按字母排序)</span>
      </h4>
      <ul>
        <router-link tag="li" v-for="item in value"
        :to="'/city/'+item.id" :key="item.id">
            {{item.name}}
        </router-link>
      </ul>
   </li>
</ul>

Demo學習鏈接：vue-eleDemo參考