Vue组件化的基本使用

最新推荐文章于 2022-11-18 00:26:48 发布

产品迪

最新推荐文章于 2022-11-18 00:26:48 发布

阅读量96

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46054543/article/details/113761407

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述

组件化的基本使用步骤：
1、创建组件构造器对象
2、注册组件
3、使用组件
核心代码如下：

<body>
<div id="app">
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
</div>
<script src="../Vue_js/vue.js"></script>
<script>
    //创建组件构造器模板
    const cpnC = Vue.extend({
        template: '' +
            '<div>' +
            '<h2>标题</h2>' +
            '<p>我的内容哈哈哈哈</p>' +
            '</div>'
    })
    //注册组件
    Vue.component('my-cpn', cpnC)
    
    const app = new Vue ({
        el: '#app',
        data: {
            message: 'vue模板',
        },
        methods: {

        },
    })
</script>
</body>

以上组件化的使用是全局组件，下图展示局部组件的创建方法：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

产品迪

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化的基本使用

效果图：组件化的使用步骤：1、创建组件构造器对象2、注册组件3、使用组件核心代码如下：<body><div id="app"> <my-cpn></my-cpn> <my-cpn></my-cpn></div><script src="../Vue_js/vue.js"></script><script> //创建组件构造器模板 con
复制链接

扫一扫