01-组件化的基本使用

林笙10

于 2021-05-09 16:28:52 发布

阅读量79

点赞数

分类专栏： # 10-组件化开发文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_46498227/article/details/116566491

版权

10-组件化开发专栏收录该内容

10 篇文章

订阅专栏

01-组件化的基本使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>组件化的基本使用</title>
</head>

<body>
    <div id="app">
        <!-- 3,使用组件 -->
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        // 1,创建组件构造器对象
        const cpnC = Vue.extend({
            template: `
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容，哈哈哈</p>
                    <p>我是内容，呵呵呵</p>
                </div>`
        })

        // 2,注册组件
        Vue.component('my-cpn', cpnC);
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊'
            }
        })
    </script>
</body>

</html>