使用するVUE要素シンプル

背景には、より多くの企業がプラットフォームをドッキングするので、異なるプラットフォームの問題はよりも、そのように人間の消費の削減、顧客の使用のための共通の問題舞台裏のツールを形成するために一緒に入れます。しかし、同社の先端が忙しいので、私はフロントとリアエンドに対処するために、このバックエンドのスタッフを持っています。

ネイティブのフロントエンドのコードはPHPで書かれた、だけでなくので、ここで、小さなプログラムを書いている前に、私はに対処するためのフロントVUEフレームワークの要素を学びます。

直接バーコード上

I.背景

そのため楽屋オブジェクトを渡すVUE特別規定の必要性、つまり、

[{}、{}、{}]

{データ}私達のPHPの配列に、実際には一般的です

以下、実際のデータ構造

{コード：" 000000 " 、
データ：
[{psnl_id：" 81899211010382 "、psnl_state：" 1 "、psnl_name：" 线下"、cert_no：" 310106199407309921 " 、...}]、
メッセージ：" 请求成功" 
}

二、JS

（[DEFINE " のlib / Ajaxの" ]、機能（アヤックス）{ // ここでは、フロントエンドパッケージを呼び出す
    のvar appNameは= " ＃" + $（" .APP-名"）.ATTR（" データ・パス" ）。
     新しい新しいヴュー（{ 
        EL：appNameは、
        データ：関数（）{ 
            リターン{ 
                形：{ 
                    id_cash_number："" 
                }、
                tableCashInfo：[] 
            ;} 
        }、

        メソッド：{ 
            のgetData（V）{ 
        VARPARAM = Object.assign（{}、V）。
        するvar _this = この; 
        ajax.post（" / API /苦情/取得-現金額" 、PARAM、機能（RES）{
             // はconsole.log（RES）;
             // はconsole.log（res.message）; 

            場合（res.code = = ' 000000 ' ）{
                 VAR cashInfo = res.data;
                 // はconsole.log（fundInfo）; 
                _this.tableCashInfo = cashInfo; 
            } そうでなければ{ 
                _this.tableCashInfo =[]。
                警告（res.message）。
            } 
        }）。
    }、
    beginRepair（V）{ 
        VARの PARAM = Object.assign（{}、V）。
        するvar _this = この; 
        ajax.post（" / API /苦情/額修復" 、PARAM、機能（RES）{
             // はconsole.log（RES）;
             // falseを返す; 

            もし（res.code == ' 000000 ' ）{
                 VARの cashInfo = res.data; 
                _this.tableCashInfo = cashInfo。
            } OBJ。他の{ 
                警告（res.message）。
            } 
        }）。
    }、
    initSearch（）{ 
        OBJせ = {};
        用（CONSTキーで この.FORM）{
             場合（この.form.hasOwnProperty（キー））{
                 CONST ELE = この.FORM [キー]。
                もし（ELE）{ 
                    OBJ [キー] = ; ELE 
                } 
            } 
        } 
        戻り
    }、
    searchFn（）{
        // にconsole.log（this.formを）; 
        LET = thisObj この.initSearch（）; 

        IF（！Thisobj.id_card_number）{ 
            アラート（' 入力してくださいID番号' ）;
             を返す falseに; 
        } 

        この.getData（thisObj）。
    }、
    修理（RES）{ 
        IF（！RES）{ 
            アラート（' ID番号は存在しません' ）;
             を返す 偽; 
        } 
        するvar = MyMessageを確認してください（" 量を決定することは、それを修復するには？" IF）;
        （== MyMessage 偽に）{
             リターン falseに; 
        } 

        LET OBJ = {}; // 値オブジェクトに 
        OBJ [ ' id_card_number ' ] =のRES; 

        この.beginRepair（OBJ）; 
    } 
} 
}）; 
}） ;

第三に、フロントエンド

<divのクラス = " LIB-メイン・ラップマイ・メインラップLIB-行" V-クローク> 
        <Pスタイル= " フロート：右; " > <スパンのスタイル= " 色：赤; " >ヒント：</スパン>のみ一時的に現金の融資の総量を修正し、現金クレジットは¥50 </ p型>内で使用されている
        の<div クラス = " のUserListラップ" > 
            <テンプレート> 
                <EL-フォームクラス = ' MB-20 '  REF = " フォーム「：モデル= 」フォーム"ラベル幅= 「オート」：インライン= 真のラベル位置= ' 左' > 
                    <EL-フォーム項目ラベル= " 身份证号：" > 
                        <EL-入力タイプ= ' 番号' MAXLENGTH = 11 Vモデル= " form.id_card_number "プレースホルダ= " 请输入内容" > </ EL-入力> 
                    </ EL-フォーム項目> 
                    <EL-ボタン型= " プライマリ" @click = searchFn>搜索</ EL-ボタン> 
                </ EL-形態>
            </テンプレート>

            <テンプレート> 
                <EL-テーブル：データ= " tableCashInfo "ラベル= " 信用飞账单："  クラス = " テーブルスタイルのMB-20 " > 
                    <エル・テーブルのカラムの小道具= " psnl_name "ラベル= " 姓名"幅= " 100 " > </ EL-テーブル列> 
                    <EL-テーブルカラムプロップ= " cert_no "ラベル= " 身份证号" > </ EL-テーブル列>
                    <EL-テーブルカラムプロップ= "debit_amt "ラベル= " 融資額" > </ EL-表列> 
                    <列表EL-小道具= " cash_debit_amt "ラベル= " 現金の融資の総量" > </ EL-表列> 
                    <EL-テーブル- =カラムプロプ" cash_amt " LABEL = " 現金の量である" > </ EL-表カラム> 
                    <表EL-プロプカラム= " cert_no "ラベル= " 操作を" > 
                        <テンプレートスロットスコープ= 「範囲」 >
                            <EL-ボタン型= " プライマリ" @click = " 修復（scope.row.cert_no）" >额度修复</ EL-ボタン> 
                        </テンプレート> 
                    </ EL-テーブル列> 
                    <EL-テーブルカラムプロプ= " kk_status "ラベル= " 扣款状态" > 
                        <テンプレートスロットスコープ= " スコープ" > 
                            <スパンV- 場合 = " scope.row.kk_status！= '无重复' "スタイル= 「色：赤」> {{scope.row.kk_status}} </スパン> 
                            の<span V- 他 > {{scope.row.kk_status}} </スパン> 
                        </テンプレート> 
                    </ EL-テーブル列> 
                </ EL-テーブル> 
            </テンプレート> 
            <IL- ページネーション
                 クラス = " MT20 " 
                背景
                レイアウト = " PREV、ページャ、次" 
                ：現在の -page = " pageinfo.currentPage "
                @current -change = sizeChangeFn 
                ：合計 = " pageinfo.totalCount " > 
            </ EL-ページネーション> 
        </ div> 
    </ div>

同社は以前に前後端を分離していないので、フロントエンドのコードはPHPファイルに書かれています

取り付け要素公式サイトを：

https://element.eleme.cn/#/en-US/component/installation

チュートリアル：https://cn.vuejs.org/v2/guide/