Vue组件化的基本使用

水深无声 2022-10-29 05:23 190阅读 0赞

效果图：  
![在这里插入图片描述][202102081923598.jpg_pic_center]

组件化的基本使用步骤：  
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>

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

[202102081923598.jpg_pic_center]: /images/20221024/01552b200b70452bbcf77c1074c35178.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/1463b35dcc1c499999b03f7e25853e08.png

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue组件的基本介绍

在学习组件之前，我们先了解一下项目的结构一.项目的结构 1.项目的总体结构 ![在这里插入图片描述][5274777ed0ac42088fd3276f7e183

ゝ一纸荒年。/ 2024年04月08日 08:18/ 0 赞/ 98 阅读

相关 Vue 组件化开发

文章目录前言组件化开发底部菜单 TabMenu 父子组件相互传数据父传子：自定义属性子传父：自定义事件

待我称王封你为后i/ 2023年10月13日 09:50/ 0 赞/ 38 阅读

相关 Day66 Vue组件化开发

　1. json简介 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAS

矫情吗；*/ 2023年08月17日 15:29/ 0 赞/ 112 阅读

相关 Vue组件化的基本使用

效果图： ![在这里插入图片描述][202102081923598.jpg_pic_center] 组件化的基本使用步骤： 1、创建组件构造器对象 2、注册组件

水深无声/ 2022年10月29日 05:23/ 0 赞/ 191 阅读

相关 Vue学习（二）Vue组件化编程

文章目录一、模块与组件相关概念说明二、Vue 中使用组件的三大步骤三、非单文件组件四、单文件组件 4.1 Vue 单文件组件的

迈不过友情╰/ 2022年10月22日 13:56/ 0 赞/ 280 阅读

相关【Vue】—Vue组件基本介绍

【Vue】—Vue组件基本介绍 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

柔情只为你懂/ 2022年09月03日 05:09/ 0 赞/ 251 阅读

相关 Vue组件化应用构建

组件化应用构建组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽

小鱼儿/ 2021年10月19日 23:54/ 0 赞/ 406 阅读

相关 vue 组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。 ![70][] 在 Vue 里，一个组件本质上是一个拥

叁歲伎倆/ 2021年09月15日 09:38/ 0 赞/ 378 阅读

相关 Vue.js 组件化开发

三、组件化开发 1.1 组件化的实现和使用步骤组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件

悠悠/ 2021年09月07日 10:16/ 0 赞/ 392 阅读

相关 Vue组件化

一点睛通过定义组件就可以通过组件名组件标签进行组件模板复用。二代码 <!DOCTYPE html> <html lang="en">

分手后的思念是犯贱/ 2021年07月25日 02:52/ 0 赞/ 482 阅读