Vue学习笔记2、组件

Vue可以通过组件自定义标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>the Second vue program</h1>
    
    <div id="app">
        <!--形参和实参绑定-->
        <dzy v-for="argument in items" v-bind:parameter="argument"></dzy>
    </div>

    <script src="vue/vue.js"></script>
    <script>
        Vue.component("dzy", {
            props: ['parameter'],   // 接受的参数
            template: '<li>{{parameter}}</li>'  // 模板
        });

        var vm = new Vue({
            el: "#app", // el就是element的意思
            data:{
                items:["item1", "item2", "item3"]
            }
        });
    </script>
</body>
</html>
发布了41 篇原创文章 · 获赞 2 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/dzydzy7/article/details/105158712