### axios、JSONPプラグインの使用の最適化（Singer.vue）
シナリオ：多くのコンポーネントがaxiosとJSONPを使用する必要がありますが、axiosを考慮し、JSONPはVUEインスタンス上に取り付けられました。
原理：結合コンポーネントがアクセス可能インスタンスでインスタンス、プロパティ、メソッドから継承されたグループ価格。
（のみ組み立ておよび使用に導入された）元の使用：
はじめに：
「axios」からインポートAxios。
使用します。
axios.get（URL、（ERR、データ）=> {
にconsole.log（ERR、データ）
}）。
最適化後：
図1に示すように、入口で導入され、文書main.jsのJSは、インスタンスオブジェクトのVUEに取り付けられています。
Axios①import "axios"からの インポートからJSONP "JSONP" ②Vue.prototype。$ axios = Axios Vue.prototype。$ JSONP = JSONP
注：オブジェクトの__proto__に搭載される、関数プロトタイプに搭載されます
2、コンポーネントを使用する方法：
この。$ axios.get（URL、（ERR、データ）=> { にconsole.log（ERR） }）を（（データ） => { にconsole.log（データ） }）。
若しくは
この。$ JSONP（URL、{PARAM： "jsonpCallback"}、（ERR、データ）=> { にconsole.log（ERR、データ） }）。
注：で作成したデータ要求
###データ最適化（Singer.vue）
optimizeData（データ）{ せsingerDataは = { "ホット" ：{ タイトル： "ホットな" 、 アイテム：[] // 店舗アーティスト情報が } } のためには、（LET I 0 =; I <data.length; I ++ ）{ // アバターFINDEX、Fsinger_mid、Fsinger_name、唯一の保持データ[i]が：無効なデータを拒否する。元のデータを置き換える定義するオブジェクトsingerInfo、[I]は、内のアイテムに追加さ せsingerInfo = { データ[I] .Findex：FINDEX Fsinger_mid：データ[I] .Fsinger_mid、 データ[I] .Fsinger_name：Fsinger_name アバター： `HTTPS：//？y.gtimg.cn/music/photo_new/T001R300x300M000$ {DATA [I] max_ageの2592000` .JPG .Fsinger_midを=} } IF（Iは<20である{） singerData.hot.items.push（ singerInfo）; } // イニシャルは、に属するデータの追加データ項目が外出請求singerDataの値が決定されないキーが存在しない、そうでない場合、作成された一時{タイトル：アイテム：[]}、次いで属するデータが追加。そしてように、Zに FINDEX =せ; DATA [I] .Findex IF （singerData [FINDEX]）{ ; singerData [FINDEX] .items.push（singerInfo） } 他{ LETのTEMP =タイトル{：FINDEX、商品：[];} temp.items.push（singerInfo）; singerData [FINDEX] = ; TEMP } } //は：ステートメントホットARRS配列データは、ホット及びAZに格納された無効なデータIIを削除他のデータ（タイトルデータ、等9）を除去 せホット= []、ARRS = []; のために（キーCONST で{singerData） IF（キー== "ホット" ）{ hot.push（singerData [キー]） } 他 IF（key.match（/ [Z-ZA-A] / ））{ arrs.push（singerData [キー]） } } //アルファベット順：タイトルは、Unicodeをコードソートさ せnewArr arrs.sort =（（A、B）=> { 戻り a.title.charCodeAt（） - b.title.charCodeAt（）; }） // うち戻り リターンホット.concat（newArr）; }
### V-のためのいくつかの例のコストパフォーマンスでは、キーインデックスを使用している場合バインディングを使用した場合
###計算された属性データフィルタを使用して計算（Singer.vue）
シーン：文字は、各カテゴリにsingerListから来ます
計算：{ slideDataは（）{ slideDataを聞かせ = []; 以下のための（I = 0せ; I < この .singerList.lengthと、I ++ ）{ slideData.push（この.singerList [I] .TITLE）。 } 戻りslideDataと、 } }、
###機能：クリックしてサイドバーのジャンプ（Singer.vue）
より良い-スクロールインスタンスのメソッド：scrollToElement（）
これらの手順を実行します。
①まず、ページ上の場所を選択します。<DIV REF = "位置"> </ div>
その後、クリック機能の位置にジャンプする②：this.BS.scrollToElement（これの$ refs.position。）
Singer.vue使用しました：
①バインドクリックイベント、過去にパスの内容をクリックしてください：クリック=「ジャンプ（アイテム）」@
②DOMエレメントの結合ダイナミック、タイトル内の項目と目標位置:: REF =「item.title」
③scrollToElement（）メソッドを使用して：
ジャンプ（アイテム）{ せtargetDom = この $参考文献[アイテム] [0 ]; この.BS.scrollToElement（targetDom）。 }
###機能：文字がサイドバーをハイライト表示（Singer.vue）をクリックします
ステップ：
①は、アクティブで、データの初期値を宣言：アクティブ：「熱い」初期値がnullの場合は、クリックする前に、強調表示されません
②現在のラベルのためのクラスをバインディング：
<スパンV- 場合 = "項目== '热门'"：クラス= "アクティブ===アイテム'アクティブ'：？ ''">热</ span>の <スパンV- 他：クラス= "アクティブ===項目'アクティブ'：？ '' "> {{アイテム}} </スパン>
③は、要素ジャンプ（アイテム）、電流値がアクティブに割り当てられているため、イベントをクリックしバインドします。
ジャンプ（アイテム）{ この .active = 項目; }
###機能：スクロールサイドバー、（Singer.vue）に続いて、リストをスクロール
ステップ：
最初の数リアライズが転がりとき1は、グリッドを現在のスクロールをプリントアウト
①ULにtouchstartイベントとtouchmoveイベントを結合：
<ULクラス= "スライダー" @ touchstart = "スタート" @ touchmove = "移動">
②methodsで：
スタート（E）{ この .startY = e.touches [0 ] .clientY。 この .spanHeight = この $ refs.span [0。] .offsetHeight。 console.log（ "开始"、この.startY） }、 ムーブ（E）{ moveYせ = e.touches [0 ] .clientYと、 せて距離 =のparseInt（（moveY- この .startY）/this.spanHeight）。 console.log（ "移动"、moveY、 "几格子：" + 距離） }
この場合、距離は、いくつかの要素のスパンを通じてドラッグされ、距離が添字です。
図2に示すように、対応する文字に取得したインデックス、ジャンプ及びコール（）メソッド
（E）を移動{ せmoveY = e.touches [0 ] .clientY。 せて距離 =のparseInt（（moveY- この .startY）/this.spanHeight）。 FINDEXを聞かせ= この.sliderData [距離]。 この.jump（FINDEX）。 console.log（ "移动"、moveY、 "几格子：" +距離、 "字母：" + FINDEX） }
図3に示すように、エッジ決意
もし（距離> = この.sliderData.length）{ 距離 = この .sliderData.length-1 。 } そう であれば（距離<= 0 ）{ 距離 = 0 。 }
あなたがHにクリックした場合4、この時点ではバグがある、下方への移動は、上から下に移動し始めるのではなく、Hから始まります
理由：せFINDEX = this.sliderData [距離]; this.jump（FINDEX）は、距離をジャンプする記載された、各時刻にジャンプし、この距離は、それがmoveY-このする距離でありますHへのクリックは、距離の一部は、より減らす.startY結果、。
溶液：FINDEXを取得する際、マルチ（グリッド）から減算プラス
手順：①スタート（）関数宣言で：
この .startIndex =のparseInt（（この .startY-148）/this.spanHeight）。
②FINDEX、グリッドプラスマルチマイナスの数までの距離を取得する場合：
距離=距離+ 本.startIndex。 もし（距離> = この.sliderData.length）{ 距離 = この .sliderData.length-1 。 } そう であれば（距離<= 0 ）{ 距離 = 0 。 } FINDEXを聞かせ = この .sliderData [距離]。
###機能：リストをスクロールし、サイドバーをハイライト表示（Singer.vue）
配列に、それぞれの頂部から距離H2を得るために1：
distanceArr（）{ せARR = []; 用（; I <I = 0せ、この .sliderData.length; I ++ ）{ Yはせ = この $参考文献[ この .sliderData [I] [0 ] .offsetTop。 （Y）arr.push。 } この .arr = ARR。 }
2、実行します。
時計：{ sliderData（newValueに、OLDVALUE）{ たsetTimeout（（） => { この.distanceArr（） }、 17）// 17ms？ブラウザの更新毎分60回、各時間0.017ミリ秒を消費します } }、
3、より良いスクロールインスタンスのスクロールイベント：
initBS（）{ この .BS = 新しい新しい BS（このrefs.wrapper $、{。 PROBETYPE： 2 // リアルタイム画面スクロールイベントディスパッチにスライド時 }）; この .BS.on（ "スクロール"、（OBJ ）=> { Yはせ Math.abs（obj.yを）= activeIndex = "" ; のための I <（I = 0せ、この .arr.length; I ++ ）{ IF（Y <= この .arr [I] Y && < 本 .arr [I + 1 ]）{ activeIndex = I; BREAK; } } この .active = この.sliderData [activeIndex]。 }）; }、
注：CI PROBETYPEの①better-スクロール：2
②obj.yの絶対値を取ります
図4に示すように、エッジ決意、最後のIは、Y <= this.arr [I] && Y <this.arr [I + 1]の条件を満たしません
もし（I == この .arr.length-1 ）{ activeIndex = I。 }
ページに移動します###リストの詳細ページ（ネストされたルーティング）（Singer.vue - > Detail.vue）
Detail.vueコンポーネントを作成します。1.
それはSinger.vueにネストされているため、ルーティングテーブルに登録された2は、このパスで子供を追加します。
{パス"/歌手"、名称： "歌手" 、成分：歌手、子供：[{
パス： "詳細" 、
成分：詳細
}]}、
3、Singer.vueルータ・ビューは、スペースを開きます。
<ルータビュー> </ルータビュー>
4、プログラミングナビゲーション・ジャンプ：
この。$のrouter.push（{パス"/歌手/ディテール"}）。
5、動的ルーティングパラメータが通過します：
①ルーティングテーブルを設定します。
変更
パス：「詳細」、
パス： "詳細/：ID"、
パラメータをステッチ②テンプレート文字：
この。$ router.push（{パス： `/歌手/ディテール/ $ {ID}`}）。
注：初期設定は、クリックしたときに、より良い-スクロールは、ブラウザのネイティブクリックイベントを停止します：真