Vue----组件

添加组件的三种方式:直接在 Vue函数的components属性中写:在components属性中注册主键的方式;导入js文件的方式

<body>

    <div id='app'>

        <div1></div1>

        <my-div></my-div>

        <box1></box1>

        <box2></box2>

        <div2></div2>

 

    </div>

    <!--

        注意点:

            1.不能用官方已有的组件名称

            2.不区分大小写

            3.template模板中只能有一个根元素

            4.注册时使用驼峰命名法 使用时可以用连字符

     -->

     <script>

        let a1={

            template:`

            <input type="text">

            `

        }

        let a2={

            template:`

            <button>点击</button>

            `

        }

     </script>

    <script type="module">

        // 导入文件形式

        import div2 from "./div2.js"

        new Vue({

            el: '#app',

            data: {},

            methods: {},

            computed: {},

            components: {

                div1: {

                    template: `

                    <div>

                    <p>hello</p>

                    <p>hello</p>

                    <p>hello</p>

                     </div>

                    `

 

                },

                MyDiv:{

                    template:`

                    <div>

                    <p>6666</p>

                    <p>6666</p>

                    <p>6666</p>

                     </div>

                   

                    `

                },

                // 注册主键

                box1:a1,

                box2:a2,

                div2,

            }

        })

    </script>

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值