vue 2-elm学習記録(Day 1)

知識点:
keep-alive
Vueが提供する抽象コンポーネントで、コンポーネントをキャッシュしてパフォーマンスを節約するために使用されます.抽象コンポーネントであるため、vページのレンダリングが完了した後、DOM要素としてレンダリングされません.コンポーネントがkeep-alive内で切り替えられると、コンポーネントのactivated、deactiveedの2つのライフサイクルフックが実行されます.keep-aliveに包まれたコンポーネントのステータスは保持されます.たとえば、リストクラスの内容を100番目の位置にスライドすると、1つのコンポーネントに切り替えた後、再びコンポーネントに戻ります.コンポーネントのステータスは100番目のリストに保持されます.
使用法

props:include-文字列または正規表現.一致するコンポーネントのみがexclude-文字列または正規表現をキャッシュし、一致するコンポーネントはegをキャッシュしません.

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

vue-router:router-viewに出会うのもコンポーネントです.keep-aliveに直接パッケージされると、一致するすべてのビューコンポーネントがキャッシュされます.

router-viewの中のコンポーネントだけがキャッシュされたい場合は、2つの方法があります.include/exclude 2を使用する.増加するmetaプロパティrouter-metaプロパティを追加

//routes  
export default{
    {
        path:'/',
        name:'home',
        component:Home,
        meta:{
            //     
            keepAlive:true
        }
    },
    {
        path:'/:id',
        name:'edit',
        component:Edit,
        meta:{
           //      
            keepAlive:false
        }
        
    }
}

拡張:ここに3つのルートがあると仮定します:A,B,CデフォルトはABが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に戻ってリフレッシュ.~~~~
ルーティングの遷移アニメーション
ルーティングを遷移アニメーションにするには、ラベルの外部にラベルを追加する必要があります.ラベルにはnameプロパティが必要です.

コンポーネントの移行中に、4つのCSSクラス名が切り替えられます.この4つのクラス名はtransitionのname属性に関連しています.例えば、name='fade'で、次の4つのCSSクラス名があります.1.fade-enter:遷移の開始状態に入り、要素が挿入されたときに有効になり、1フレームだけ適用するとすぐに削除する.fade-enter-active:遷移の終了状態に入り、要素が挿入されると有効になり、遷移プロセスが完了した後に除去する.fade-leave:遷移の開始状態から離れ、要素が削除されるとトリガーされ、1フレームだけ適用するとすぐに削除する.fade-leave-active:遷移の終了状態を離れ、要素が削除されたときに有効になり、遷移が完了した後に削除される遷移モードmode:in-out:新しい要素が先に遷移に入り、完了した後に現在の要素がout-in:現在の要素が先に遷移に入り、終了した後に新しい要素が遷移に入る
slot
slotはコンポーネントの拡張であり、slotスロットを介してコンポーネント内部の指定された位置にコンテンツを伝達し、slotを介して親子でパラメータを伝達することができる.わかりやすくは「ピット取り」であり、コンポーネントテンプレートに位置を占めている.このコンポーネントラベルを使用すると、コンポーネントラベルの中の内容が自動的にピットに埋め込まれ、スロットであるピットに名前が付いている場合~~~と、コンポーネントラベルに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'
})

展示部分vue:
ps:baseUrlはelm.cangdu.org
String.fromCharCode
Unicode符号化を1文字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はすぐに頭文字になります.

   

      

        {{key}} //       
        (     )
      
      

        
            {{item.name}}
        
      
   

Demoラーニングリンク:vue-eleDemoリファレンス