vuejs--component

vuejs初步了解了一个多星期，也做了个比较复杂的页面，总体感受是很不错的，用MVVM的模式去开发，开发效率跟后期维护效率都有不少提升

上周写的那个页面自我感觉比较low的一点就是没用到模板，多层级迭代的时候都是一级一级的手写。。到后期的vue开发完整的项目，必须使用的就是模板，避免写重复的代码

简单的介绍一下模板的原理:
所需元素：一个template，一个component，一个html元素+vue绑定
<pre>
// template具体模板，有个固定id: 'project_show_template'，会在component里被指定
<script type="text/x-template" id="project_show_template">
<table>
//component里定义的方法
<tr v-on:click="do_console()">
<th>name</th>
//模板里的project应该由调用模板的地方指定，可以是任意值，但是必须有props先指定好类型
<td>{{project.name}}</td>
<th>address</th>
<td>{{project.address}}</td>
<th>year</th>
<td>{{project.year}}</td>
</tr>
</table>
</script>
// 需要真正在页面显示的地方
<div id="projects">
<div v-for="p in projects">
//标签名为component里的第一个参数，这里尽量不要用-去命名，因为会跟驼峰相互转换
//例如：如果component里命名为projectShow那么标签需要打成<project-show>
//template里的project由这里projects迭代出来的p赋值！
<project_show :project="p"></project_show>
</div>
</div>
<script>
//注册组件(模板)，第一个参数是最终调用模板的标签名
Vue.component('project_show',{
//指定模板
template: '#project_show_template',
// 提前定义好模板使用的变量和类型
props: {
project: Object
},
methods: {
// 模板内可调用的方法
do_console: function(){
console.log(this.project)
}
}
})
// 基本的vue元素及数据
var projects = new Vue({
el: '#projects',
data: {
projects:[
{name:'项目1',address:'上海',year: '2017'},
{name:'项目2',address:'北京',year: '2015'},
{name:'项目3',address:'天津',year: '2014'},
{name:'项目4',address:'重庆',year: '2012'},
]
}
})
</script>
</pre>
简单定义一下样式，结果如下，当然点击每个tr都会有log输出：

Paste_Image.png