vue语法01

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-item slot="todo-item" v-for="(item,index) in items" :item="item" :index="index" v-on:remove="removeItems"></todo-item>
    </todo>
</div>




 //todo组件
    Vue.component(‘todo‘,{
        template: ‘<div>‘+
				‘<slot name="todo-title"></slot>‘+
				‘<slot name="todo-item"></slot>‘+
				‘</div>‘
    })
    //标题组件
    Vue.component(‘todo-title‘,{
        props:[‘title‘],
        template: ‘<div>{{title}}</div>‘
    })
    //内容组件
    Vue.component(‘todo-item‘,{
        props:[‘item‘,‘index‘],
        template:‘<li>{{index}}--->{{item}} <button @click="remove">删除</button></li>‘,
        methods:{
            remove:function () {
                this.$emit(‘remove‘);
            }
        }
    })
    var app = new Vue({
        <!-- el，element缩写，挂载元素 -->
        el: ‘#app‘,
        data:{
            title:‘待办事项‘,
            items:[‘迪丽热巴‘,‘古力娜扎‘,‘玛尔扎哈‘]
        },
        methods:{
            removeItems:function (index) {
                this.items.splice(index,1);
            }
        }
    })