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 <!-- --------------------------------------Mr丶L----------------------------------------------- --> 10 <!-- todoList 组 件 拆 分--> 11 <div id="root"> 12 <div> 13 <input v-model="inputValue" /> 14 <button @click="add">提交</button> 15 <ul> 16 <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item> 17 </ul> 18 </div> 19 </div> 20 <!-- --------------------------------------Mr丶L----------------------------------------------- --> 21 <script> 22 // 全局组件 23 Vue.component('todo-item',{ 24 props:['content'], //接收属性的值 25 template:'<li>item</li>' 26 }) 27 //局部组件 28 var TodoItem ={ 29 props:['content'], 30 template:'<li>{{content}}</li>' 31 } 32 //----就近原则，此处执行局部组件 33 34 new Vue({ 35 el:"#root", 36 components:{ //局部组件的注册声明 37 'todo-item':TodoItem 38 }, 39 data:{ 40 inputValue:'', 41 list:[] 42 }, 43 methods:{ 44 add:function () { 45 this.list.push(this.inputValue) //添加 46 this.inputValue='' //置空 47 } 48 } 49 50 }) 51 </script> 52 53 </body> 54 </html>