vue里的组件

最新推荐文章于 2022-10-10 17:56:39 发布

少年西西

最新推荐文章于 2022-10-10 17:56:39 发布

阅读量123

点赞数

分类专栏： F_java框架阶段 # F5_VUE框架文章标签： vue

本文链接：https://blog.csdn.net/qq_45554909/article/details/111477068

版权

F_java框架阶段同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

F5_VUE框架

9 篇文章 2 订阅

订阅专栏

1.什么是组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、 Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

在这里插入图片描述
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

2.第一个 Vue 组件

注意：在实际开发中，我们并不会用以下方式开发组件，以下方法只是为了让大家理解什么是组件。
使用 Vue.component() 方法注册组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<body>

<div id="vue">
     <!-- 有点类似自定义标签 -->
    <my-component-li></my-component-li>
</div>

</body>

<script type="text/javascript">

    //先注册组件
    Vue.component('my-component-li',{
        template: '<li>Hello VUE Component</li>'
    });

    // 再实例化 Vue
    var vm = new Vue({
        el: '#vue',
        data:{
            message: 'Hello Vue'
        }
    });
</script>
</html>

说明：

Vue.component()：注册组件
my-component-li：自定义组件的名字
template：组件的模板

使用 props 属性传递参数
注意：默认规则下 props 属性里的值不能为大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<body>

<div id="vue">
     <!-- 有点类似自定义标签
        v-for="item in items" ：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数 量的组件；
        v-bind:myitem="item" ：将遍历的 item 项绑定到组件中 props 定义的名为 myitem 属 性上；
         = 号左边的 myitem 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值；
     -->
    <my-component-li v-for="item in items" v-bind:myitem="item"></my-component-li>

</div>

</body>

<script type="text/javascript">

    //先注册组件
    Vue.component('my-component-li',{
        props:['myitem'],
        template: '<li>Hello {{myitem}}</li>'
    });

    // 再实例化 Vue
    var vm = new Vue({
        el: '#vue',
        data:{
            items:["张三","李四","王五"]
        }
    });
</script>

</html>

在这里插入图片描述

少年西西

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue里的组件

1.什么是组件组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、 Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。2.第一个 Vue 组件注意：在实际开发中，我们并不会用以下方式开发组件，以下方法只是为了让大家理解什么是组件。使用 Vue.component() 方法注册组件...
复制链接

扫一扫

专栏目录