Capítulo 3 Uso de Vue lista vue de los recursos de los casos, la configuración del dominio raíz del mundial

1, la lista de casos
<! DOCTYPE html> 
<html lang = " en " > 
<head> 
    <meta charset = " UTF-8 " > 
    <title> Título </ title> 
    <! -新Bootstrap核心CSS文件-> 
    <link href = " https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css " rel = " hoja de estilo " > 
    <! - jQuery文件务必在bootstrap.min.js之前引入. - -> 
    <script src = " https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js " > </ script> 
    <!- El último archivo Bootstrap el núcleo de 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 = " aplicación " > 
    <div clase = " Panel-primaria " > 
        <div clase = "Panel-encabezamiento " > 
            <h3clase = " panel título " >添加品牌</ h3> 
        </ div> 
        <div clase = " panel de cuerpo forma-inline " > 
            <label> 
                id: <input type = " texto "  clase = " forma de control de " v-modelo = " ID " > 
            </ label> 
            <label> 
                nombre: <input type = " texto "  clase = "forma de control " = v-modelo" Nombre " > 
            </ label> 
            <! - Usando el mecanismo de fijación en vue, si se agrega un pequeño paréntesis, puede dar el paso de parámetros de función -> 
            <INPUT del tipo = " el botón " value = " add "  clase = " Bot primaria-BTN " @ = Click " el complemento " > 

            <input type = " texto "  clase = " forma de control " V-modelo = " PALABRAS CLAVE " > 
            <input type = "el botón " value = " Buscar"  Clase = " btn btn-primaria " > 

        </ div> 
    </ div> 

    <table clase = " tabla-confinado tabla " > 
        <thead> 
        <tr> 
            <th>编号</ th> 
            <th>品牌</ th > 
            <th>时间</ th> 
            <th>操作</ th> 
        </ tr> 
        </ culata en T> 
        <tbody> 
        <tr v- para = " elemento de la lista " : clave = " elemento.Identificación " > 
            <td> {{item.id}} </ td> 
            <td> {{item.name}} </ td> 
            <- - filtro sólo se puede utilizar para tapar la expresión!> 
            <TD> {{item.ctime | timeFormat ( ' AAAA-mm-dd HHMMSS ' ) }} </ TD> 
            <TD> 
                <a href= "#" @click.prevent= "del(item.id)"> eliminar </a> 
                <a href= "./Model.html"> editar </ A> 
            </ TD> 
        </ TR> 
        </ tbody> 
    </ table> 
</ div> 
<script>// establecer el nombre de dominio global con
     // Si pasamos la configuración global, interfaz de datos raíz solicitud de nombre de dominio, la petición http inicia cada vez,
     //


    solicitud de ruta URL debe comenzar ruta relativa, no con la parte delantera / (por ejemplo: API / DEL) , que no permitiría que el empalme de la ruta raíz
    = Vue.http.options.root ' http://vue.studyit.io/ ' ;

     // configuración global emulateJSON {:} a cierto 
    Vue.http.options.emulateJSON = true ;

     // <- sólo filtros globales! puede ser utilizado para conectar la expresión -> 
    Vue.filter ( ' timeFormat ' , función (el ctime, modelo) {
         var dt = nuevo nuevo una fecha (el ctime)
         var Y = dt.getFullYear ()
         var m = (dt.getMonth () + . 1 ) .ToString (). padStart ( 2 , 0 )
         var.. d = dt.getDate () toString () padStart ( 2 , 0 )
         si (patrón && pattern.toLowerCase () === ' aaaa-mm-dd ' ) {
             retorno `$ {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 )
             de retorno `$ {y} - $ {m} - $ {d} $ {hh}: $ {mm}: $ {ss}` 

        } 
    }) 

    // 2. Crear una instancia de vue 
    var VM = nueva Vue ({ 
        EL: ' #app ' ,     // representa nuestra actual nueva Vue este ejemplo, para el control de qué área en la página 
        de datos: { // datos se almacenan en el uso de atributos de los datos en el eL 
        lista: [ 
            {ID: . 1 , nombre: " Benz " , el ctime: nuevo nuevo una Fecha () }, 
            {ID: 2 , nombre: " BMW " , el ctime: nuevo nuevo una Fecha ()} 
        ], 
        ID: '' ,
        Nombre: '' , 
        las palabras clave: ''  ,
        }, 
        creados () { 
            este .getAllList () 
        }, 
        métodos: { 
            // vue-recursos获取数据
            // 删除
            del (id) {
                 este $ http.. obtener ( ' api / del ' + id) .then (resultado => { 
                    console.log ( " resultado = " + result.body)
                     var resultado = result.body;
                     si (result.status === 0 ) {
                         esto . getAllList ()
                    } Else { 
                        Alerta ( ' Get fracasó datos ' ) 
                    } 
                }) 
                } 
            // añadir 
            el botón Añadir () {
                 el presente $ http.post (. ' API / POST ' , 
                    {nombre: el presente .name}, {emulateJSON: true }) .then (Resultado => { 
                    la console.log ( " Resultado = " + result.body)
                     varresultar = result.body;
                    si (result.status === 0 ) {
                         este .getAllList ()
                         esta .name = '' 
                    } demás { 
                        alerta ( ' 获取数据失败' ) 
                    } 
                }) 
            }, 
            getAllList () { 
                esto . $ http. obtener ( " API / getlunbo " ) .then (resultado => { 
                    console.log ( " resultado = " +result.body)
                     var resultado = result.body;
                    si (result.status === 0 ) {
                         este .list = result.message 
                    } demás { 
                        alerta ( ' 获取数据失败' ) 
                    } 
                }) 
            } 

        } 
    })
 </ script> 
</ body> 
</ html>
Capítulo 3 Uso de Vue lista vue de los recursos de los casos, la configuración del dominio raíz del mundial

Supongo que te gusta
