Vue--使用1

Posted 2021-03-24 staff

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

二十五、通过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的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)