Vue组件

什么是组件

　　组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签，Thymeleaf

的th:fragment等框架有着异曲同工之妙。通常一个应用会以一颗嵌套的组件树的形式来组织

在实际开发中，会采用vue-cli创建.vue模板文件的方式进行开发。

使用Vue.component()方法注册组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--组件-->
    <etc v-for="lisa in items" v-bind:jack="lisa"></etc>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义一个Vue组件
    Vue.component("etc",{
        props: ['jack'],
        template : '<li>{{jack}}</li>'
    });
    var vm = new Vue({
        el : "#app",
        data: {
            items: ["java","c++","python"]
        }
    });
</script>
</body>
</html>

v-for="lisa in items":遍历Vue实例中定义名为items的数组，并创建同等数量组件

v-bind:jack="lisa"：将遍历的lisa项绑定到组件中props名为jack属性上

posted on 2022-12-08 10:07 键盘敲烂的朱阅读(32) 评论(0) 收藏举报