Vue.js小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- <input type="text" v-model="msg">
        <button @click="handleClick">submit</button>
        <ul>
            <li v-for="(item, index) in items" :key="index">{{item}}<span @click="deleteClick(index)">delete</span></li>
        </ul> -->
    </div>
    <script>
Vue.component("item-list", {
    template: `
        <li>{{itemprops}}<span @click="handleDeleteSon(index)">delete</span></li>
        `,
    props: ["itemprops", "index"],
    methods: {
        handleDeleteSon(index) {
            this.$emit("handleDeleteS", index);
        }
    }
});

var app = new Vue({
    el: "#root",
    data: {
        msg: '',
        items: []
    },
    template: `
        <div>
            <input type="text" v-model="msg">
            <button @click="handleClick">submit</button>
            <ul>
            <item-list v-for="(item, index) in items" :key="index" :itemprops="item" :index="index" @handleDeleteS="deleteClick"></item-list>
            </ul>
        </div>
        `,
    methods: {
        handleClick() {
            this.items.push(this.msg);
            this.msg = '';
        },
        deleteClick(index) {
            this.items.splice(index, 1);
        }
    }
});
    </script>
</body>
</html>