WEB前端：vuejs全家桶（21）：定义组件component

最新推荐文章于 2023-11-01 20:34:05 发布

hahahafree

最新推荐文章于 2023-11-01 20:34:05 发布

阅读量254

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102970349

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

一、组件component

文档
https://cn.vuejs.org/v2/guide/components.html

1. 什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
组件是自定义元素（对象）

2. 定义组件的方式

文档
https://cn.vuejs.org/v2/api/#Vue-extend

方式1：先创建组件构造器，然后由组件构造器创建组件
方式2：直接创建组件(推荐)

方法1;先创建组件构造器，然后由组件构造器创建组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="itany">
        <hello>
        </hello>
    </div>
</body>
<script>
    /**
     * 方式1：先创建组件构造器，然后由组件构造器创建组件
     */
    //1.使用Vue.extend()创建一个组件构造器
    var MyComponent = Vue.extend({
        template: '<h3>Hello World</h3>'
    });
    //2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
    Vue.component('hello', MyComponent);

    new Vue({
        el: '.itany'
    })
</script>

</html>

在这里插入图片描述

方式2：直接创建组件(推荐)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="itany">
        <my-world></my-world>
    </div>
</body>
<script>
    // 方式2：直接创建组件(推荐)
    Vue.component('my-world', {
        template: '<h1>你好，世界！</h1>'
    });

    new Vue({
        el: '.itany'
    })
</script>

</html>

在这里插入图片描述

hahahafree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端：vuejs全家桶（21）：定义组件component

一、组件component文档https://cn.vuejs.org/v2/guide/components.html1. 什么是组件？组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码组件是自定义元素（对象）2. 定义组件的方式文档https://cn.vuejs.org/v2/api/#Vue-extend方...
复制链接

扫一扫