Vue.js是这次我们公司迭代项目使用的前端框架之一。我们前端使用的是一个叫Metronic的。Metronic的可以说是bootstrap系列的集合。
当然也用到一个叫layui的，layui的话就不说了，我最喜欢的还是layui的弹出层，看起来挺不错的。
对于实际开发中，使用该弹出层的话，可以更好的简化页面，使其一个界面的功能可以分为好几个页面这样一来，利于界面简单明了，不繁杂，维护方便。
而且学习起来相对容易，当然我也一再强调过，不能只学习于表面，在具有丰富的使用经验的基础上，可以看看源码之类的，看人家是怎么实现的。
当然了，layui是完全开源的，方便使用者深入学习。
我学习Vue.js的时候，是通过下列教程:
http://www.runoob.com/vue2/vue-tutorial.html
这个教程以练习为主，可以让你轻松的熟悉它使用它。
这比一昧的看文档要好的多，编程毕竟是一门实践类的科学。
当然了，文档不是不重要的，对于从未接触过的人来说，实践第一，理论第二。
当然了，学习Vue.js的话，个人建议初学者，必须具有HTML、CSS、JS、jQuery方面的知识。
这样可以让你触类旁通。
我喜欢Vue的模板和条件及其循环，
因为这三者比较常用，对于现在的我来说，Vue.js模板的与之前使用的jsp,jsp对于使用MVC模式开发，需要视图解析器，这个比较麻烦，因为使用jsp,意味着界面就可能增加很多难以维护的玩意。
虽然说jsp作为表现层，渲染页面显示对应的数据，本质上还是Servlet，Servlet通过out.print输出HTML,所以视图归根接底还是HTML。
Vue.js模板语言挺好用的。
贴贴代码来讲解:
<div class="col-md-4" v-for="item in items"> <div class="m-portlet"> <div class="m-portlet__head"> <div class="m-portlet__head-caption"> <div class="m-portlet__head-title"> <h3 class="m-portlet__head-text"> {{item.resourceId}} </h3> </div> </div> <div class="m-portlet__head-tools"> <ul class="m-portlet__nav"> <li class="m-portlet__nav-item"> <a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon"> <i class="la la-close"></i> </a> </li> <li class="m-portlet__nav-item"> <a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon"> <i class="la la-refresh"></i> </a> </li> <li class="m-portlet__nav-item"> <a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon"> 发布 </a> </li> </ul> </div> </div> <div class="m-portlet__body"> <p>{{item.areaCode}}</p> <p>{{item.address}}</p> </div> </div> </div>
js代码为:
$.ajax({
url:ZL.url.api.selectCompanyCodeGetResourceInfo,
type:"GET",
data : {"companyCode":companyCode,"status":status},
dataType : 'json',
success:function(data){
//将从后台获取的List装入apps中
var apps = data.resourceList;
new Vue({
el:"#markingCenter",
data:
{
items:apps
}
});
},error:function(){
alert("失败");
}
});
简单的如上表示，我就能循环遍历数据。相比传统的jQuery的foreach、each或者js的for in或者for循环等，用Vue来实现显得很简单易维护。
因为有的时候<div>块比较庞大，如果将其放入js文件中，用for循环或者each来遍历，相关的html()方法或者append()方法装载的太多，还不如用vue来的爽快。
当然了，实际开发中，我是混合用的，Vue+jQuery。
