Vue(7) —— Vue组件讲解

最新推荐文章于 2023-09-21 15:41:43 发布

原来是小别扇

最新推荐文章于 2023-09-21 15:41:43 发布

阅读量235

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Jzandth/article/details/108770425

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1.什么是组件

组件是可复用的 Vue 实例，说白了就是一组能够重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着殊途同归之妙；一般一个应用会以一棵嵌套的组件树的形式来组织：
我们可以简单的将组件理解为我们在HTML文件中使用的标签

2.怎么使用组件/怎么自定义组件

在定义中说了，组件是用来提高复用的，且组件的内容就是我们在HTML文件中使用的标签

使用语法

 Vue.component("组件名称",{
            template:"组件模板/要复用的内容"
        })

例子

Vue.component("thhh",{
    template:"<h2>哈哈哈，这是一个组件</h2>"
})

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

</head>
<body>
    <div id="app">
        <thhh></thhh>

    </div>

    <script>
        Vue.component("thhh",{
            template:"<h2>哈哈哈，这是一个组件</h2>"
        })

        //viewModel 实现与Model双向绑定，动态更新视图
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{},
        });

    </script>
</body>
</html>

在这里插入图片描述

可见上面的例子就实现了组件的复用，但是仅仅是这样的用法，还不能发挥组件的真正价值，我们应该将组件显示的内容和动态数据相关联

组件绑定数据

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

</head>
<body>
    <div id="app">
        <thhh v-for="item in items" v-bind:property="item"></thhh>

    </div>

    <script>
        Vue.component("thhh",{
            props:['property'],
            template:"<h2>{{property}}</h2>"
        })

        //viewModel 实现与Model双向绑定，动态更新视图
        var vm = new Vue({
            el:"#app",
            data:{items:[
                    "java基础",
                    "javaweb",
                    "java框架"
                ]}
        });

    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

中间实现数据传递的桥梁的就是v-bind指令，它的作用就是绑定元素属性和vm对象的data对象属性中注册的变量的值

原来是小别扇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue(7) —— Vue组件讲解

1.什么是组件组件是可复用的 Vue 实例，说白了就是一组能够重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着殊途同归之妙；一般一个应用会以一棵嵌套的组件树的形式来组织：我们可以简单的将组件理解为我们在HTML文件中使用的标签2.怎么使用组件/怎么自定义组件在定义中说了，组件是用来提高复用的，且组件的内容就是我们在HTML文件中使用的标签使用语法 Vue.component("组件名称",{ templ
复制链接

扫一扫