被迫学习Vue——组件学习-CFANZ编程社区

被迫学习Vue——组件学习

Vue的组件，其实也就是模板，就是把网站上公共的部分提取出来，像导航栏什么的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
</head>
<body>
<div id="app">
    <aaa></aaa>
    <!-- v-bind绑定参数 -->
    <bbb v-for="item in items" v-bind:hzy="item"></bbb>
</div>

<script>
    // 定义一个vue组件，组件也就是component
    Vue.component('aaa',{
        template: '<h1>hello template</h1>'
    });

    Vue.component('bbb',{
        // props属性用来传递参数
        props: ['hzy'],
        template: '<li>{{hzy}}</li>>'
    });



    var vm = new Vue({
        el: "#app", // 绑定元素，el是element的意思
        data: {
            items: [
                'java',
                'vue',
                'spring'
            ]
        }
    });
</script>

</body>
</html>

被迫学习Vue——组件学习_导航栏

0 条评论