html开发时使用js封装Vue组件（一）

前端开发组件化是个很重要的思想，但是平常只是在node搭建的环境下，使用webpack管理react或
者vue项目时，会自定义组件，然后其他页面引用自定义的组件。但是在普通的html前端页面开发时怎么去使用vue定义可重用组件呢，就像element-ui那样，我们可以不用node环境，而是引用js文件，也可以实现使用各种定义好的组件。
今天由于工作需要，电脑没有搭建vue项目，而是采用引入vue.js的方式开发页面，我需要定义很多页面都可以使用的公共组件，在仔细阅读了vue官网的组件化方面的文档之后，产生了这样的思路。

我在js文件中封装了公共组件，到时候需要使用该组件时，引入该js文件，就可以在相应的html文件中直接使用定义好的公共组件。具体实现如下，把组件的标签元素作为字符串来定义，然后注册vue组件，然后就可以在其他页面使用了。

1. 创建js文件来定义公共组件
   tmpl_list.js

	const list = `
		<ul>
		<h3>{{msg}}</h3>
			<span v-for="(item,i) in list" > 
				<span v-if="i==0" >这是第一行</span>
				<a link="item.name" >{{item.name}} </a>
			<span>
		</ul>`;
		//  定义Vue组件
		var listComponent = Vue.extend({
				template:list,   //定义组件模板
				data(){
					return{msg:'hello,这是自定义的list组件'},
				},   //定义组件的数据
				methods:{},       //定义组件的方法
				props:['list'],  //配置需要传入的属性
		})；
		//注册Vue全局组件
		Vue.component("tmpl-list",listComponent);

2. 创建index.html来测试定义好的组件
   在index.html中引入vue.js来进行开发，也要引用定义好公共组件的js文件；

<script src="vue.js"></script>
<script src="tmpl_list.js"></script>
<div id="app" >
	<tmpl-list :list="arr" ><tmpl-list>
</div>

<script>
	new Vue({
	el:'#app',
	data:{
		arr:[{name:'aaa'},{name:'bbb'},{name:'ccc'},{name:'ddd'}],
	}
	})
</script>