1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>todolist</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <input type="text" name="" id="" v-model="inputValue"> 15 <button v-on:click="handleBtnClick">提交</button> 16 <!-- 把li标签里的内容整体变成一个组件 --> 17 <ul> 18 <!-- <li v-for="item in list">{{item}}</li> --> 19 <!-- v-bind:向子组件传递一个绑定值 --> 20 <todo-item v-bind:content="item" v-for="item in list"> 21 </todo-item> 22 </ul> 23 </div> 24 25 <script> 26 // Vue.component('TodoItem', { 27 // props: ['content'], //从父组件接收的内容 28 // template: '<li>{{content}}</li>', 29 // }); //vue提供的创建全局组件的方法 30 31 //注册局部对象 32 var TodoItem = { 33 props: ['content'], //定义接收外部传递过来的数据 34 template: '<li>{{content}}</li>', //子组件的模板 35 }; 36 37 var app = new Vue({ 38 el: '#app', 39 components: { 40 TodoItem: TodoItem, //把局部组件注册到实例中 41 }, 42 data: { 43 list: [], 44 inputValue: '' 45 }, 46 methods: { 47 handleBtnClick: function() { 48 this.list.push(this.inputValue); 49 this.inputValue = ''; 50 } 51 } 52 }); 53 </script> 54 </body> 55 56 </html>