Vue--使用1

二十二、组件的概念

使用组件时：data必须是一个函数
组件的注册类型：全局和局部

具体的看官网：

二十三、Vue局部组件的使用一：main组件，header组件

<body>
<div id="app">
    {{msg}}
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    //先声子  在挂子  在用子
    // “声子”
    var Vheader={
        template:`<header class="head">我是头部</header>`
    };
    //1.声明入口组件
    /*
        1）头部组件
        2）侧边栏
        3）内容组件
        4）脚部组件
     */
    var Vmain = {
        //“用子”
        template: `<div class="main">
                    <Vheader />
                    </div>`,
        components: {
            //“挂子” 等价于Vheader:Vheader
            Vheader
        }
    };
    new Vue({
        el:"#app",
        //3.使用子组件
        template:"<Vmain />",
        data:{
            msg:'hello'
        },
        components:{
            //2.挂载子组件 组件名:组件对象
            Vmain:Vmain
        }
    });
</script>
</body>

二十三、Vue局部组件的使用二：main组件，header组件，aside组件，content组件

<body>
<div id="app">
    {{msg}}
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    //先声子  在挂子  在用子
    // “声子”
    var Vheader={
        template:`<header class="header">我是头部</header>`
    };
    var Vaside={
        template:`<div class="aside">我是侧边栏</div>`
    };
    var Vcontent={
        template:`<div class="content">我是内容区</div>`
    };
    //1.声明入口组件
    /*
        1）头部组件
        2）侧边栏
        3）内容组件
        4）脚部组件
     */
    var Vmain = {
        //“用子”
        template: `<div class="main">
                    <Vheader />
                    <div class="wrap"><Vaside /><Vcontent /></div>
                    </div>`,
        components: {
            //“挂子” 等价于Vheader:Vheader
            Vheader,
            Vaside,
            Vcontent
        }
    };
    new Vue({
        el:"#app",
        //3.使用子组件
        template:"<Vmain />",
        data:{
            msg:'hello'
        },
        components:{
            //2.挂载子组件
            Vmain:Vmain
        }
    });
</script>
</body>

二十二、组件的概念

二十三、Vue局部组件的使用一：main组件，header组件

二十三、Vue局部组件的使用二：main组件，header组件，aside组件，content组件

猜你喜欢