【Vue】组件 

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--组件：传递给组件的值：props-->
    <xt v-for="item in items" v-bind:xue="item"></xt>
    //v-bind:xue="item"将遍历的item项绑定到组件中props定义的名为xue属性上；
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义一个Vue组件component
    Vue.component("xt",{
        props:['xue'],//接收参数
        template:'<li>{{xue}}</li>'

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

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

　　

posted @ 2020-12-08 22:19  iTao0128  阅读(101)  评论(0)    收藏  举报