码迷,mamicode.com
首页 > 其他好文 > 详细

简单说说Vue

时间:2018-07-13 20:18:17      阅读:433      评论:0      收藏:0      [点我收藏+]

标签:sel   后台   erro   项目   metro   好用   query   mvc   span   

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。

 

简单说说Vue

标签:sel   后台   erro   项目   metro   好用   query   mvc   span   

原文地址:https://www.cnblogs.com/youcong/p/9306845.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!