Vue自定义标签 component组件

Vue可以自定义组件 在组件中自己设置组件内容

注意 ：自定义组件的名字不能有大写字母 否则无效！！！

自定义组件在script标签中定义 使用Vue.component来定义 它有两个参数，第一个是自定义组件的名字，第二种是一个对象 里面存放一些自定义组件的信息 这个对象中有一些属性 常用的有 ： template属性 它表示自定义组件中的内容（HTML代码）. props属性 代表接受的数据 因为要实现数据的双向绑定 它无法直接访问到我们new Vue中定义的 data中的变量值 而前端可以拿到 new Vue’中 data的值 所以需要通过前端来向它传递这些值 （听起来很拗口 仔细理解一下 就是 你Vue.component中 无法获取 new Vue中的变量值 而前前端HTML可以获取到 所以需要通过前端绑定一个属性 将这个属性值传递给自定义组件中去 仔细看一下下面这个例子 理解一下）

<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>