Vue组件

最新推荐文章于 2025-11-24 03:44:17 发布

原创最新推荐文章于 2025-11-24 03:44:17 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

Vue 专栏收录该内容

15 篇文章

订阅专栏

一、第一个Vue组件

1.1、什么是组件

组件是可复用的Vue 实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragrent 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:
在这里插入图片描述
例如，有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建.vue模板文件的方式开发，以下方法只是为了更好的理解什么是组件。

二、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/Vue.js"></script>
</head>
<body>

<div id="app">
    <massimo v-for="item in items" v-bind:mas="item"></massimo>
</div>

<script>

    //定义一个Vue组件component
    Vue.component("massimo",{
        props: ['mas'],
        template: '<li>{{mas}}</li>'
    });

    var vm = new Vue({
        el:"#app",
        data: {
            items: ["Java","Linux","前端"]
        }
    });
</script>

</body>
</html>