vue.js是一個web前端JS框架；
vue 10 Second Example
使用這套框架使得了在前端使用“模板”成為可能；正如上圖Vue官網的“10 Second Example”所示；按照格式書寫dom之后；數據源（input 控件）的值改變的時候，綁定的控件顯示值跟著發生了變化，而這種刷新完全由vue托管；當按照格式完成對view的書寫后，model層數據的變化自動映射到view；
這意味著什么？意味著如果服務器后端提供API，web前端完全可以以全靜態文件發布；
在移動端優先的開發中，如果優先開發API，在API接口寫完之后；后續需要寫對應客戶端界面的H5界面、微信界面；后端幾乎不用新增動態代碼；
例如在不使用vue以及類似的前端框架中；我們需要寫一個H5的界面；需要新增一個新的動態地址，在后臺查詢數據后，在前端用模板輸出html。以rails為例，新增后端代碼后，前端的模板里面會有類似下圖的代碼，放在.erb后綴結尾的模板文件里面(@items是rails后端查詢出來的數組)；
<%= @items.each do |item|%>
<div>
<%=item.name%>
...
</div>
<%end%>
而使用vue之后；如果API已經完成的情況下，可以只需要新增一個純HTML文件：
<div id='demo'>
<div v-for="item in items">
{{ item.name}}
...
</div>
</div>
然后用js請求API接口獲取數據即可
var apiURL = 'https://xxx.com/api?xxx=xxx'
var demo = new Vue({ el: '#demo',
data: { items: null },
created: function () { this.fetchData() },
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this xhr.open('GET', apiURL)
xhr.onload = function () {
self.items = JSON.parse(xhr.responseText)
}
xhr.send()
}
}
})
這樣的另一個好處是，無須考慮后端語言；因為不同的后端語言的模板文件書寫格式不一致；如果使用vue完全可以拋棄后端語言自帶的模板文件書寫方式。
而服務器端，完完全全變成只有數據管理、組織、輸出的任務的模塊，只需要關注數據和業務邏輯的組織；完全將組織數據輸出界面的功能托管給前端，而這樣，前端工程師編碼、調試將變的非常簡單，只需要約定好接口規范，前端可以組織測試數據即可對界面進行完全的測試。
