【Vue-入门笔记-4】

 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>
【Vue-入门笔记-4】

猜你喜欢
