13/5-7 Async Components.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="vue.js"></script>
    <meta charset="UTF-8">
    <title>5-7</title>
    <style>
    .fade-transition {
        transition: opacity .3s ease;
    }

    .fade-enter,
    .fade-leave {
        opacity: 0;
    }

    .box {
        width: 250px;
        border: 1px solid #9325BC;
        padding: 10px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    .box:hover {
        -moz-box-shadow: 0 0 10px #ccc;
        -webkit-box-shadow: 0 0 10px #ccc;
        box-shadow: 0 0 10px #ccc;
        border: 10px solid #9325BC;
    }
    </style>
</head>

<body>
    <h3>正常组件</h3>
    <div id="app">
        <my-component :foo="baz" :bar="qux" @click="doThis('click')" @mouseover="onMouseOver('mouseover')">
            <img slot="icon" src="http://vuejs.org.cn/images/logo.png" width='200'>
            <p slot="main-text">Hello!</p>
        </my-component>
        <async-example-3></async-example-3>
        <async-example-5></async-example-5>
    </div>
    <br>
    <script>
    Vue.component('my-component', {
        template: `
            <div class='box'>
            <slot name="icon"></slot>

            <slot name="main-text"></slot>

            </div>
        `,
        props: ['foo', 'bar'],
        data: function() {
            return {
                items: {
                    a: '1', // 子组件的作用域跟父组件的作域是独立不连系
                    b: '2',
                    c: '3'
                }
            }
        }

    });

    Vue.component('async-example-3',
        function(resolve, reject) {
            setTimeout(function() {
                // 乱数一下下
                var r=Math.random() * 10

                if (r<=5) {
                    resolve({
                        template: '<h3> 3秒组件完成 </h3> '
                    })
                } else {
                    reject(
                        'r:'+ r +',故意搞失败的，不然不会了解  reject , resolove 的功用'
                    )
                }
                console.log('3秒后组件 ok,r:'+r);
            },3000) // setTimeout
        } // function(r,r)
    ); // Vue.component

    Vue.component('async-example-5', function(resolve, reject) {
        setTimeout(function() {
            resolve({
            template: `
            <h3>5秒后组件</h3>
            `
            });
            console.log('5秒后组件 ok');
        }, 5000)
    });

    new Vue({
        el: '#app',
        data: {
            items: {
                'a': '4',
                'b': '5',
                'c': '6'
            }
        },
        methods: {
            'doThis': function(msg) {
                console.log(msg);
            },
            'onMouseOver': function(msg) {
                console.log(msg)
            }
        }
    });
    </script>
</body>

</html>