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輸出：
