Vue.js(Ⅱ）

最新推荐文章于 2024-09-19 20:02:26 发布

zhanghuali2019

最新推荐文章于 2024-09-19 20:02:26 发布

阅读量144

点赞数

本文介绍Vue.js中组件的注册过程，并演示了如何通过Vue.component()进行组件定义及如何利用v-for和v-bind将数据绑定到这些组件上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js中注册一个组建。

1. vue.js如何注册一个组建？

（1)首先我们要引入vue.js这个库。

（2)然后我们写如下的代码，我们就可以在页面中看到“这是我注册的新组建”。

<body>
    <div id="app">
        <todo-item></todo-item>
    </div>
    <script>
        Vue.component('todo-item',{
            template:"<div>这是我注册新组建</div>"
        });
        new Vue({
            el:"#app",
        })
    </script>
</body>

(3）我们将Vue()里面的数据绑定到页面上：

<body>
    <div id="app">
        <todo-item v-for="data in student" v-bind:todo="data"></todo-item>
    </div>
    <script>
        Vue.component('todo-item',{
            props:["todo"],
            template:"<div>{{todo.name}}</div>"
        });
        new Vue({
            el:"#app",
            data: {
                    student: [
                        { id: 0,name: '张三' },
                        { id: 1,name: '李四' },
                        { id: 2,name: '王五' }
                    ]
            }
        })
    </script>
</body>

（4）我们如何将Vue.component()里面的数据绑定到页面上：