老师，我来二刷课程了。我是个vue小白，我想知道以下两种声明有啥不一样？
```
props: { a: 1 }

data: function() {return { a: 1}
```

<div id='app'>
    {{message}}
    <todo-list>
        <!--@delete 尚有疑问-->
        <todo-item @click="handTest" v-for="item in list" v-bind:title="item.titles" ></todo-item>
    </todo-list>
    <span v-bind:title="message2">响应式控制</span>
</div>
<script>
    //实例化组件
    //{{title}}跟着组件中的:title保持一致，为v-bind:title
    //template属性是组件的必选。
    //组件中使用v-for的话，整个template在每次循环的时候，都会被完整复用
    Vue.component('todo-item', {
        props: {
            title: String,
            del: {
                type: Boolean,
                default: false
            }
        },template:
        '<li><span>小可爱1</span>' +
            '<span>{{title}}</span></li>'
    });
    //实例化
    Vue.component('todo-list',{
        template:
        '<ul><slot></slot></ul>'
    });
    var vm=new Vue({
        el:'#app',
        data:{
            message:'hello world',
            message2:'hello world2',
            list:[{titles:'课程1',del:false},{titles:'课程2',del:false}]
        },methods: {
            handTest(val) {
                alert("您好");
            }
        }
    });
</script>

 请问下老师我这样定义handTest 事件，为todo-item绑定了它，为什么页面上没有反应呢？