Kapitel 3 Verwenden von Vue vue-Ressource Liste der Fälle, die Konfiguration der globalen Stammdomäne

1, wird die Liste der Fälle
<! DOCTYPE html> 
<html lang = " en " > 
<head> 
    <meta charset = " UTF-8 " > 
    <title> Titel </ title> 
    <! -新Bootstrap核心CSS文件-> 
    <link href = " https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css " rel = " stylesheet " > 
    <! - jQuery文件务必在bootstrap.min.js之前引入. - -> 
    <script src = " https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js " > </ script> 
    <!- Die neueste Datei Bootstrap Kern JavaScript -> 
    <script src = "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js " > </ script> 
    <! - CDN镜像快速导入Vue包-> 
    <script src = " https : //cdn.bootcss.com/vue/2.6.11/vue.js " > </ script> 
    <script src = " https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource js " > </ script> 
</ head> 
<body> 
<div id = " app " > 
    <div class = " Tafel Panel-Primär " > 
        <div class = "Panel-Überschrift " > 
            <h3class = " Panel-title " >添加品牌</ h3> 
        </ div> 
        <div class = " Panel-Körperform-inline " > 
            <label> 
                ID: <input type = " text "  class = " Form-control " v-Modell = " id " > 
            </ label> 
            <label> 
                Name: <input type = " text "  class = "Form-control " V-Typ =„ Namen “ > 
            </ label> 
            <! - in vue den Bindungsmechanismus verwenden, wenn Sie eine kleine Klammer hinzufügen, können Sie die Funktion Parameterübergabe geben -> 
            <Der Eingang des type = „ auf den Button “ value = „ hinzufügen “  class = " BTN Primary-BTN " @ = das Click " das Add " > 

            <input type = " text "  class = " Form-Control " V-Modell = " KEYWORDS " > 
            <input type = "Mit der Schaltfläche „ value = “ Suchen"  Class = " btn btn-Primär " > 

        </ div> 
    </ div> 

    <table class = " Tabelle Tabelle umrandete " > 
        <thead> 
        <tr> 
            <th>编号</ th> 
            <th>品牌</ th > 
            <th>时间</ th> 
            <th>操作</ th> 
        </ tr> 
        </ thead> 
        <tbody> 
        <tr v- für = " Element in der Liste " : key = " Artikel.id " > 
            <td> {{item.id}} </ td> 
            <td> {{item.name}} </ td> 
            <- - Filter nur verwendet werden kann , um den Ausdruck zu stecken!> 
            <TD> {{item.ctime | Zeitformat ( ' yyyy-mm-dd HHMMSS ' ) }} </ TD> 
            <TD> 
                <a href= "#" @click.prevent= "del(item.id)"> löschen </a> 
                <a href= "./Model.html"> bearbeiten </ A> 
            </ TD> 
        </ TR> 
        </ tbody> 
    </ table> 
</ div> 
<script>// den globalen Domain - Namen mit Set
     // Wenn wir jedes Mal passieren eingeleitet , um die globale Konfiguration, Datenschnittstelle Root - Domain Name Anfrage, die HTTP - Anforderung,
     //


    URL Route Request sollte relativen Pfad beginnen, nicht mit der Vorderseite / (zB: api / del) , würde es nicht ermöglichen , den Wurzelpfad Splicing
    = Vue.http.options.root ' http://vue.studyit.io/ ' ;

     // globale Konfiguration emulateJSON {:} true 
    Vue.http.options.emulateJSON = true ;

     // <- globale Filter nur! kann verwendet werden , um die Expression zu stopfen -> 
    Vue.filter ( ' Zeitformat ' , function (das ctime, Muster) {
         var dt = new new einen Tag (der ctime)
         var Y = dt.getFullYear ()
         var m = (dt.getMonth () + . 1 ) .ToString (). padStart ( 2 , 0 )
         var.. d = dt.getDate () toString () padStart ( 2 , 0)
         , Wenn (Muster && pattern.toLowerCase () === ' yyyy-mm-dd ' ) {
             return `$ {y} - $ {m} - $ {d}` 
        } else {
             var hh = dt.getHours () .ToString (). padStart ( 2 , 0 )
             var mm = dt.getMinutes (). toString (). padStart ( 2 , 0 )
             var ss = dt.getSeconds (). toString (). padStart ( 2 , 0 )
             return `$ {y} - $ {m} - $ {d} $ {hh}: $ {mm}: $ {ss}` 

        } 
    }) 

    // 2. Erstellen Sie eine vue Instanz 
    var VM = neue Vue ({ 
        EL: ' #app ' ,     // in unserem Besitz neu Vue diesem Beispiel steuern , welche Bereiche auf der Seite 
        Daten: { // Daten werden in dem Attribut Verwendung der Daten in der el gespeicherten 
        Liste: [ 
            {ID: . 1 , Name: " Benz " , die ctime: Kommentare neu ein Date () }, 
            {ID: 2 , Name: " BMW " , die ctime: Kommentare neu ein Date ()} 
        ], 
        ID: '' ,
        Name: '' , 
        Stichwort: '' ,
        }, 
        Erstellt () { 
            dieses .getAllList () 
        }, 
        Methoden: { 
            // vue-Ressource获取数据
            // 删除
            del (id) {
                 dieses $ http.. erhalten ( ' api / del ' + id) .then (Ergebnis => { 
                    console.log ( " result = " + result.body)
                     var result = result.body;
                     wenn (result.status === 0 ) {
                         dieses . getAllList () 
                    } else { 
                        Alert ( ' Get Daten fehlgeschlagen ' ) 
                    } 
                }) 
                } 
            // hinzufügen 
            die Add () {
                 die dieses $ http.post (. ' API / POST ' , 
                    {name: die dieses .name}, {emulateJSON : true .}) das dann (Ergebnis => { 
                    die console.log ( " Ergebnis = " + result.body)
                     varresult = result.body;
                    wenn (result.status === 0 ) {
                         dieses .getAllList ()
                         diese .name = '' 
                    } else { 
                        alert ( ' 获取数据失败' ) 
                    } 
                }) 
            }, 
            getAllList () { 
                dieses . $ http. erhalten ( " api / getlunbo " ) .then (Ergebnis => { 
                    console.log ( " result = " + Result.body)
                     var result = result.body;
                     wenn (result.status === 0 ) {
                         diese .list = result.message 
                    } else { 
                        alert ( ' 获取数据失败' ) 
                    } 
                }) 
            } 

        } 
    })
 </ script> 
</ body> 
</ html>
Kapitel 3 Verwenden von Vue vue-Ressource Liste der Fälle, die Konfiguration der globalen Stammdomäne

Ich denke du magst
