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()里面的数据绑定到页面上: