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>
更多专业前端知识,请上 【猿2048】www.mk2048.com