使用前端组件化思想修改todolist

 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>
使用前端组件化思想修改todolist

猜你喜欢
