【Vue-入门笔记-5】

 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 
17                     v-for="(item,index) of list" 
18                     :key="index" 
19                     :content="item"
20                     :index="index"
21                     @delete="handelDelete"    <!--父组件订阅-->
22                     >
23                     </todo-item>
24                 </ul>
25             </div>
26         </div>
27     <!-- --------------------------------------Mr丶L----------------------------------------------- -->
28     <script>
29         // 全局组件
30         Vue.component('todo-item',{
31             props:['content','index'],        //接收属性的值
32             template:'<li>item</li>'
33         })
34         //局部组件
35         var TodoItem ={
36             props:['content'],
37             template:'<li @click="handelClick">{{content}}</li>',
38             methods:{
39                 handelClick:function(){
40                     this.$emit('delete',this.index)    //子组件发布
41                 }
42             }
43         }
44         //----就近原则，此处执行局部组件
45         
46         new Vue({
47             el:"#root",
48             components:{        //局部组件的注册声明
49                 'todo-item':TodoItem
50             },
51             data:{
52                 inputValue:'',
53                 list:[]
54             },
55             methods:{
56                 add:function () {
57                     this.list.push(this.inputValue)    //添加
58                     this.inputValue=''                //置空
59                 },
60                 handelDelete:function(index){
61                 /*
62                 splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）
63                 index:数组开始下标       
64                 len: 替换/删除的长度       
65                 item:替换的值，删除操作的话 item为空
66                 */
67                     this.list.splice(index,1);
68                     
69                 }
70                 
71             }
72             
73         })
74     </script>
75 
76 </body>
77 </html>