Vue 2.0 Hello World

by IanZhong

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <comp-parent></comp-parent>
</div>

JavaScript

Vue.component('comp-child', {
        template: `<div>{{childData.name}}<slot></slot>{{randomNum}}</div>`,
        props: {
            parentData: {
            }
        },
        data() {
            return {
                childData: {},
                randomNum: Math.round(Math.random() * 100)
            };
        },
        created() {
            this.childData.name = this.parentData.name;
        }
    });
    Vue.component('comp-parent', {
        template: `<div><component v-for="(item, index) in arr" is="comp-child" :key="item.key" :parent-data="item">
            <button @click="deleteItem(index)">delete</button>
        </component>
        </div>`,
        data(){
            return {
                arr: [{
                    name:1,
                    key: 'key1'
                }, {
                    name:2,
                    key: 'key2'
                }, {
                    name:3,
                    key: 'key3'
                }, {
                    name:4,
                    key: 'key4'
                }, {
                    name:5,
                    key: 'key5'
                }]
            };
        },
        methods: {
            deleteItem(index) {
                this.arr.splice(index, 1);
                console.log(`${index}th element deleted! `);
                console.log(this.arr);
            }
        }
    });
    let app = new Vue({
        el: '#app'
    });