Vue的学习笔记-组件开发(初识)

前言

组件化开发有利于把大的项目分而治之,并且可以重复使用组件模板,还能把此组件放到另外一个项目使用。
学习视频点这里

1. 认识组件

注意事项:使用在HTML使用驼峰命名法可能会报错

1.1 创建与注册组件(3种方法)

1.1.1 普通创建与注册

<script>
    <!--组件创建-->
    const myComponent = Vue.extend({
        template: `
        <div>
        <h2>组件内容</h2>
        <p>组件内容</p>
        </div>
        `
    });
    <!--组件注册-->
    // 'my_c': HTML的标签名    'myComponent': 组件对象
    Vue.component('my_c',myComponent);
</script>

1.1.2 语法糖写法

//一起创建与注册
Vue.component('cpn',{
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀,嘻嘻嘻嘻嘻嘻</p>
        </div>
        `,
    });

1.1.3 组件模板抽离

//在HTML编写template标签
<template id="cpn">
    <div>
        <h2>组件标题</h2>
        <p>你好呀,嘻嘻嘻嘻嘻嘻</p>
    </div>
</template>
//语法糖注册
Vue.component('cpn',{
        template: '#cpn'
    });
1.2 组件使用
<div id="app">
    <my_c></my_c>
</div>

</script>
    const app = new Vue({
        el: '#app',
    })
</script>

2. 全局组件与局部组件

2.1 全局组件
<div id="app">
    <my_c></my_c>
</div>

<div id="app2">
    <my_c></my_c>
</div>

<script src="../js/vue.js"></script>
<script>
     <!--组件创建-->
    const myComponent = Vue.extend({
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀,嘻嘻嘻嘻嘻嘻</p>
        </div>
        `
    });

    // 'myC': HTML的标签名    'myComponent': 组件对象
    <!--以 Vue.component()注册的组件为全局组件-->
    Vue.component('my_c',myComponent);

    const app = new Vue({
        el: '#app'
    });
    
    const app2 = new Vue({
        el: '#app2'
    })
</script>

运行结果
在这里插入图片描述

2.1 局部组件
<body>


<div id="app">
    <my_c></my_c>
</div>

<div id="app2">
    <my_c></my_c>
</div>


<script src="../js/vue.js"></script>
<script>
    <!--组件创建-->
    const myComponent = Vue.extend({
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀,嘻嘻嘻嘻嘻嘻</p>
        </div>
        `
    });

    // 'myC': HTML的标签名    'myComponent': 组件对象
    <!--以 Vue.component()注册的组件为全局组件-->
    // Vue.component('my_c',myComponent);

    const app = new Vue({
        el: '#app',
        components: {  //在components里面注册为局部组件
            my_c: myComponent
        }
    });

    const app2 = new Vue({
        el: '#app2'
    })
</script>
</body>

运行结果
在这里插入图片描述
你会发现在id为app2的div标签找不到<my_c></my_c>这对标签

3. 父组件与子组件

<div id="app">
    <cpn2></cpn2>
</div>

<script>
//第一个组件(子)
    const cpnC1 = Vue.extend({
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀,嘻嘻嘻嘻嘻嘻</p>
        </div>
        `,
    });

    //第二个组件(父)
    const cpnC2 = Vue.extend({
        template: `
        <div>
        <h2>组件标题</h2>
        <p>你好呀,嘻嘻嘻嘻嘻嘻</p>
        <cpn1></cpn1>
        </div>

        `,
        components: {//谁在里面注册谁是子组件
            cpn1: cpnC1
        }
    });

    const app1 = new Vue({
        el: '#app',
        components: {
            cpn2: cpnC2
        },

    })
</script>
父组件与子组件的总结

在components: {}里面注册的是子组件,调用者为父组件,从这里也可以得出Vue既是对象也是组件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值