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  键盘敲烂的朱  阅读(22)  评论(0编辑  收藏  举报