Vue--使用1

时间：2019-10-27 11:11:30 阅读：71 评论：0 收藏：0 [点我收藏+]

标签：round script header app 渲染声明 ack var module

二十二、组件的概念

使用组件时：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>

二十五、通过props向子组件传递数据

<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var Vheader={
        template:`<header class="header">{{title}}</header>`,
        props:[‘title‘]
    };
    var Vaside={
        template:`<div class="aside">我是侧边栏</div>`
    };
    var Vcontent={
        template:`<div class="content">我是内容区</div>`
    };
    var Vmain = {
        //“用子”
        template: `<div class="main">
                    <Vheader :title="title"/>
                    <div class="wrap"><Vaside /><Vcontent /></div>
                    </div>`,
        components: {
            Vheader,
            Vaside,
            Vcontent
        },
        props:[‘title‘]
    };
    new Vue({
        el:"#app",
        template:"<Vmain :title=‘text‘/>",
        data:{
            text:"我是一个标题hhhhhhh"
        },
        components:{
            Vmain:Vmain
        }
    });
</script>
</body>

渲染结果：

<div class="main">
    <header class="header">我是一个标题hhhhhhh</header>
    <div class="wrap">
        <div class="aside">我是侧边栏</div>
        <div class="content">我是内容区</div>
    </div>
</div>

Vue--使用1

标签：round script header app 渲染声明 ack var module

原文地址：https://www.cnblogs.com/staff/p/11746699.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行