Vue.js注册和使用Vue Component

Vue Components 组件化

以组件为单位构建页面,一个页面由一个或者多个Vue component构成。
使用组件构成的的vue页面通常是这样的:

<div id='app'>
  <app-nav></app-nav>
  <app-view>
    <app-slide></app-slide>
    <app-content></app-content> 
  </app-view>
</div>

组件化的好处

1.每个组件都是独立的,更加简洁,逻辑更清晰,更容易维护
2.组件可复用,减少无效代码

使用Vue.component注册vue

<div id='app'>
   <ul>
     <todo-item v-for='todo in todos' v-bind='todo.id' v-bind:todo='todo'></todo-item>
   <ul>
</div>

//注册vue组件
Vue.conponent('todo-item',{
  props: ['todo'],
  template: '<li>{{todo.name}},{{todo.time}} </li>'
});

var app = new Vue({
el: '#app',
data :{
  todos: [
    { id: 1, name: '吃饭', time: '7:00'},
    { id: 2, name: '睡觉', time: '8:00'},
    { id: 3, name: '打豆豆', time: '9:00'},
  ],
},
});

总结

1. Vue.component(…)要写在new Vue(…)之前
2. 每一个vue component都是一个实例
3. 组件之间可以嵌套,通过props传递属性