lovecoding
/
VIP26


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg3}}
        <list></list>
        <list3></list3>
        
        <list2></list2>
    </div>
    <script src="./vue.js"></script>
    <script>
    const list1 = Vue.extend({
        name:"list1",
        template:`
                <div>{{name}}</div>
        `,
        data() {
            return{
                name:'何盈盈'
            }
        }
    })


        const list3 = Vue.extend({
            name:"list3",
            template:`
                <div>
                    <i>{{msg5}}</i>
                    <h2>振博睡觉</h2>
                    <list1></list1>
                </div>
            `,
            data() {
                return{
                    msg5:'真香'
                }
            },
            // 注册组件（局部）
            components:{
                list1
            }
        })

    const list2 = Vue.extend({
        name:"list2",
        template:`
        <div>
        
            <h2>陈悠</h2>
                {{www}}    
        </div>
        `,
        data() {
            return{
                www:'真美'
            }
        }
    })

    const list = Vue.extend({
        name:"list",
        template:`
            <div>
                <h2>邵柏洋</h2>
                <i>{{msg2}}</i>
            </div>
        `,
        data() {
            return{
                msg2:'玩红警'
            }
        },
    })

    new Vue({
        el:"#app",
        data:{
            msg3:"陈悠今天真好看"
        },
        components:{
            list,
            list3,
            list2
        }
    })


    </script>
</body>
</html>