1 <! DOCTYPE HTML> 2 <html lang = "zh"> 3 <head> 4 <meta charset = "UTF-8" /> 5 <title> Vue </ title> 6 <script src =" ../. ./vue.js "> </ script> 7 </ head> 8 <body> 9 <! - ------------------------- ------------- Sr.丶L ---------------------------------- ------------- -> 10 <! - todoList组件拆分-> 11 <div id = "raíz"> 12 <div> 13 <input v-modelo =" valor de entrada" /> 14 <botón de clic @ = "add">提交</ botón> 15 <UL> 16 <Elemento TODO-V- para = "(Tema, index) de List": Key = "índice": = contenido "artículo"> </ TODO-Elemento> . 17 </ UL> 18 es </ div> 19 </ div> 20 <! - -------------------------------------- Sr. Dian L ----------------------------------------------- - > 21 es <script> 22 es // mundial montaje 23 es Vue.component ( 'TODO-item' , { 24 los puntales: [ 'contenido'], // valor del atributo recibido 25 Plantilla: '<Li> elemento </ li>' 26 }) 27 // el subconjunto 28 var TodoItem = { 29 Los puntales: [ 'contenido' ], 30 Plantilla: '<Li> {{Contenido}} </ Li>' 31 es } 32 // ---- principio de proximidad, realizado aquí el subconjunto 33 es 34 es nuevo nuevo Vue ({ 35 eL: "la raíz #" , 36 componentes: { // declaración de registro parcial de montaje 37 [ 'TODO-Item' : TodoItem 38 es }, 39 datos: { 40 para inputValue: '' , 41 es lista: [] 42 }, 43 métodos: { 44 Añadir: función () { 45 esta .list.push ( este .inputValue) // 添加 46 esta .inputValue = '' // 置空 47 } 48 } 49 50 } ) 51 </ script> 52 53 </ body> 54 </ html>