萌新求教Vue组件里的:和@有什么作用

Question

比如下面这段教程里的代码

<div id="root">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item 
                v-for="(item ,index) of list"
                :key="index"
                :content="item"
                :index="index"
                @delete='handleDelete'
            ></todo-item>
        </ul>
    </div>
    <script>
    Vue.component('todo-item',{
        props: ['content','index'], //接收从外部传递进来的content属性
        template:'<li @click="handleDeleteItem">{{content}}</li>',
        methods:{
            handleDeleteItem:function(){
                this.$emit('delete',this.index);
            }
        }
    })

    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue);
                this.inputValue='';
            },
            handleDelete:function(index){
                this.list.splice(index,1);
            }
        }
    })
    </script>

请问第八行开始的:key之类的还有下面的@delete有什么作用，相互之间有什么关系

Answer 1

简单的说,冒号（:）后面接的是变量，@后面接的是function
第八行的key代表ul中每个todo-item标签的唯一标识，数据变更后vue用它来做变更算法的，记住key中的赋值不能重复就可以，@delete调用的是下面的handleDelete方法，用来删除当前点击的这行对应的数据。