被迫学习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>

在这里插入图片描述

发布了459 篇原创文章 · 获赞 298 · 访问量 8万+

猜你喜欢

转载自blog.csdn.net/HeZhiYing_/article/details/104862167
今日推荐