vue.js是一個(gè)web前端JS框架；

vue 10 Second Example

使用這套框架使得了在前端使用“模板”成為可能；正如上圖Vue官網(wǎng)的“10 Second Example”所示；按照格式書寫dom之后；數(shù)據(jù)源（input 控件）的值改變的時(shí)候，綁定的控件顯示值跟著發(fā)生了變化，而這種刷新完全由vue托管；當(dāng)按照格式完成對(duì)view的書寫后，model層數(shù)據(jù)的變化自動(dòng)映射到view；
這意味著什么？意味著如果服務(wù)器后端提供API，web前端完全可以以全靜態(tài)文件發(fā)布；
在移動(dòng)端優(yōu)先的開發(fā)中，如果優(yōu)先開發(fā)API，在API接口寫完之后；后續(xù)需要寫對(duì)應(yīng)客戶端界面的H5界面、微信界面；后端幾乎不用新增動(dòng)態(tài)代碼；
例如在不使用vue以及類似的前端框架中；我們需要寫一個(gè)H5的界面；需要新增一個(gè)新的動(dòng)態(tài)地址，在后臺(tái)查詢數(shù)據(jù)后，在前端用模板輸出html。以rails為例，新增后端代碼后，前端的模板里面會(huì)有類似下圖的代碼，放在.erb后綴結(jié)尾的模板文件里面(@items是rails后端查詢出來的數(shù)組)；

<%= @items.each do |item|%>
  <div>
   <%=item.name%>
   ...
  </div>
<%end%>

而使用vue之后；如果API已經(jīng)完成的情況下，可以只需要新增一個(gè)純HTML文件：

<div id='demo'>
  <div v-for="item in items"> 
    {{ item.name}}
    ...
  </div>
</div>

然后用js請(qǐng)求API接口獲取數(shù)據(jù)即可

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() 
    } 
  }
})

這樣的另一個(gè)好處是，無須考慮后端語言；因?yàn)椴煌暮蠖苏Z言的模板文件書寫格式不一致；如果使用vue完全可以拋棄后端語言自帶的模板文件書寫方式。
而服務(wù)器端，完完全全變成只有數(shù)據(jù)管理、組織、輸出的任務(wù)的模塊，只需要關(guān)注數(shù)據(jù)和業(yè)務(wù)邏輯的組織；完全將組織數(shù)據(jù)輸出界面的功能托管給前端，而這樣，前端工程師編碼、調(diào)試將變的非常簡(jiǎn)單，只需要約定好接口規(guī)范，前端可以組織測(cè)試數(shù)據(jù)即可對(duì)界面進(jìn)行完全的測(cè)試。