Vue 与移动端优先开发

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完全可以抛弃后端语言自带的模板文件书写方式。
而服务器端，完完全全变成只有数据管理、组织、输出的任务的模块，只需要关注数据和业务逻辑的组织；完全将组织数据输出界面的功能托管给前端，而这样，前端工程师编码、调试将变的非常简单，只需要约定好接口规范，前端可以组织测试数据即可对界面进行完全的测试。