vuejs初步了解了一個多星期，也做了個比較復雜的頁面桑腮，總體感受是很不錯的泉哈，用MVVM的模式去開發(fā)，開發(fā)效率跟后期維護效率都有不少提升
上周寫的那個頁面自我感覺比較low的一點就是沒用到模板破讨，多層級迭代的時候都是一級一級的手寫丛晦。。到后期的vue開發(fā)完整的項目提陶，必須使用的就是模板烫沙，避免寫重復的代碼
簡單的介紹一下模板的原理:
所需元素：一個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應該由調(diào)用模板的地方指定撑柔，可以是任意值瘸爽，但是必須有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里的第一個參數(shù)，這里盡量不要用-去命名铅忿，因為會跟駝峰相互轉(zhuǎn)換
//例如：如果component里命名為projectShow那么標簽需要打成<project-show>
//template里的project由這里projects迭代出來的p賦值剪决！
<project_show :project="p"></project_show>
</div>
</div>
<script>
//注冊組件(模板)，第一個參數(shù)是最終調(diào)用模板的標簽名
Vue.component('project_show',{
//指定模板
template: '#project_show_template',
// 提前定義好模板使用的變量和類型
props: {
project: Object
},
methods: {
// 模板內(nèi)可調(diào)用的方法
do_console: function(){
console.log(this.project)
}
}
})
// 基本的vue元素及數(shù)據(jù)
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>
簡單定義一下樣式檀训，結(jié)果如下柑潦，當然點擊每個tr都會有l(wèi)og輸出：
