如何练就Vue组件？

任意类型的应用界面都可以抽象为一个组件树，犹如一层一层平面倒映到一个平面，构成整个平面

一个组件本质上是一个拥有预定义选项的一个 Vue 实例

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})

//todo-item可用于构建另一个组件模板
<ol>

<todo-item></todo-item>
</ol>

组件之间的关系及父类作用域传递

Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

<div id="app-7">
<ol>

<todo-item
v-for="item in groceryList"
//把item绑定到todo变量中
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>

var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})

在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。

<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>