Vue can customize the component to set their own content components
Note: Since the name of the custom components can not be effective unless there is a capital letter! ! !
Vue.component use custom components defined in the script tag to define it has two parameters, the first is a custom component name, the second is an object which kept some information about this object to customize component contains some attributes commonly used are: template attribute that represents a custom component content (HTML Code) props attribute represents the data received to achieve the two-way binding because it can not access the data directly to the data of our new Vue defined in the variable value. front-end can get the value of the new Vue 'in the data so it is necessary to pass these values to it by the front end (it sounds very hard to pronounce carefully to understand what is your Vue.component can not get new Vue values of the variables and HTML can get to the front before this property value is required by the front end of a binding property passed to the custom component to carefully look at the following example is understood)
<div id='d2'>
<myconponent v-for="book in bookList" v-bind:field='book'></myconponent>
</div>
<script>
//自定义组件的名字不能有大写字母 否则无效！！！
Vue.component('myconponent',{
props : ['field'],
template : '<li>{{field}}</li>'
});
var v = new Vue({
el : '#d2',
data : {
bookList : ['数据库基础','Linux','数据结构与算法','Hadoop']
}
})
</script>
