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的更多相关文章

  1. 一个简单的 vue.js 实践教程

    https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...

  2. VSCode配置简单的vue项目

    VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...

  3. 搭建Vue.js环境,建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  4. 使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  5. 三、使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  6. 简单配置Vue路由

    简单配置Vue路由 1.  创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...

  7. 手把手教你从零写一个简单的 VUE

    本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...

  8. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  9. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  10. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

随机推荐

  1. 悟空模式-java-单例模式

    [那座山,正当顶上,有一块仙石.其石有三丈六尺五寸高,有二丈四尺围圆.三丈六尺五寸高,按周天三百六十五度:二丈四尺围圆,按政历二十四气.上有九窍八孔,按九宫八卦.四面更无树木遮阴,左右倒有芝兰相衬.盖 ...

  2. ZooKeeper 节点

    ZNode zk 中的每一个数据节点称为 ZNode ,所有的 ZNode 按层次化结构进行组织,形成一棵树(与Linux文件系统相似).节点可以写入数据,也可以在节点下面创建子节点. 节点类型: 1 ...

  3. win10完美去除小箭头

    1.去掉小箭头 reg add /d "%systemroot%\system32\imageres.dll,197" /t reg_sz /f taskkill /f /im e ...

  4. <Android 基础(二十五)> Frame Animation

    简介 Frame Animation, 逐帧动画,通过定义一系列的Drawable对象来实现动画效果,可以用来作为视图的背景. Frame Animation在代码中体现为AnimationDrawa ...

  5. 【Python】Java程序员学习Python(六)— 流程控制、异常处理

    和Java语言一样,Python也有基本的流程控制,简单了解下即可. 一.流程控制的元素 条件 条件就是布尔值或者布尔值的表达式,要么是True要么是False. 代码块 在Python中,代码块不是 ...

  6. Pig foreach用法举例

    foreach:一行一行的遍历数据,处理一行的数据,然后返回一个tuple. users = load '/users.data';   1)别名引用 f = foreach users genera ...

  7. 记录一次测试环境遇到的push消息记录

    测试环境测试push消息,调用消息中心同事的api接口,感觉怎么都调用不通.纠结了一天,最终发现原因:一是版本的问题,不同的测试包有不同的版本,不同的版本 可能push的消息不同.二是 用户有没有 开 ...

  8. 第一章 数据库和SQL

    1-1 数据库是什么?   一.数据库的含义 数据库是将大量数据保存起来,通过计算机加工而成的可以进行高效访问的数据集合. 数据库DB   二.数据库管理系统 DBMS 用来管理数据库的计算机系统称为 ...

  9. 关于Nodejs开发桌面应用。NW.js 和 Electron 优缺点分析对比

    从开发角度来说,选择用 nw.js 还是 election ,区别其实不是很大.大部分工作还是在自己的 javascript 和 HTML 上.国内比较有名的,比如微信web开发工具.钉钉都是基于 n ...

  10. C# 队列(Queue) 和堆栈(Stack)

    队列 (Queue)                                                                                          ...