VUEJS实战之构建基础并渲染出列表(1)


Posted in Javascript onJune 13, 2016

前言

我的JavaScript水平比较一般.好吧,是相当的一般.因此,对于最新的前端框架技术,实在是有点困难,但现实让我必须面对.因此,学习是唯一的出路.

纵向比较了N款前端框架,最终选择了VUE,为什么呢?理由如下:
 1.angular 前途不明,1.x学习曲线高,并且好像被放弃了,而2则还没有正式推出.
 2.react 比较厉害,但是没接触.
 3.VUE简单,通过上手,比较适合我的思维和水平.
 4.vue有中文文档,我看起来比较舒服.

既然决定学习vue,那么最好的学习方法就是实战.偶然看到 cNodeJs.Org 论坛有公开的api可以使用,这太方便了.于是,我决定用这个公开的api来写一个demo.

接口简介

这是 cNodeJs.Org 公开提供的的接口.当然,他不仅仅是用来给我们前端用的.可以用在各种程序上.接口地址是http://cnodejs.org/api 通过这个页面,详细介绍了相关的内容.

VUEJS实战之构建基础并渲染出列表(1)

他们提供的接口是完全的,也就是说我们可以通过这些接口再做一个他们这样的论坛.

项目计划
 1.做一个列表页面,可以读取cNodeJs的列表内容.
 2.做一个详情页面,在列表页面点击链接,进入详情页面.
 3.采用ssi技术实现html代码的复用.相关内容搜索ssi+shtml了解.
 4.css代码使用sass预编译. 

文件目录

├─index.shtml          渲染列表页面
├─content.shtml        渲染详情页面
├─inc                  碎片文件
│   ├─bar.html             侧边栏代码
│   ├─footer.html          版权部分代码
│   ├─head.html            head区域调用js等代码
│   └─header.html          页头logo以及导航代码
└─res                  资源文件
    ├─image
    ├─js
    │  ├─common             我的代码目录
    │  │  ├─common.js           公共执行js
    │  │  └─method.js           自定义方法js
    │  ├─jquery             jquery源码目录
    │  ├─plugins            其他插件目录
    │  │  └─laypage             laypage 分页插件
    │  └─vue                VUE源码目录
    └─style
        ├─style.scss        sass源文件
        ├─style.css         编译好的css 文件
        ├─base
        └─scss

下载我的源文件 https://github.com/fengcms/vue-cNodeJsOrgTest

开始写代码

首先是按照上面的文件目录设计,开始往里面写文件.res里面是资源目录,你可以稍微看下,或者知道里面是什么就可以了.

其实重点就是 index.shtml和content.shtml两个文件而已.

准备首页列表html文件

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>title</title>
 <link rel="stylesheet" href="res/style/style.css">
</head>
<body>
 <header class="header">
 <h1 class="logo">
 <a href="index.html" title="cnNodeJs.Org Home By FungLeo">cnNodeJs.Org Home By FungLeo</a>
 </h1>
 <nav class="nav">
 <ul>
 <li>导航列表</li>
 </ul>
 </nav>
 </header>
 <section class="home">
 <section class="main">
 <ul class="list">
 <li>
 <i class="user_ico">
 <img src="#头像url" alt="用户名">
 <span>用户名</span>
 </i>
 <time class="time">发表于 5 天前</time>
 <a class="talk" href="content.html?链接ID">帖子标题</a>
 </li>
 </ul>
 <div class="page"></div>
 </section>
 <aside class="bar">
 <h3>本页说明</h3>
 ...
 </aside>
 </section>
 <footer class="copy">
 版权说明
 </footer>
 <div class="go_top"></div>
</body>
</html>

如上代码,是我首先写出来的静态页面.配合我的css,效果如下图所示:

VUEJS实战之构建基础并渲染出列表(1)

完整代码请从github 里面获取
 引入vue&jquery等js文件

<script src="res/js/jquery/jquery-2.2.3.min.js"></script>
<script src="res/js/vue/vue.min.js"></script>
<script src="res/js/common/common.js"></script>

从接口获取数据

首先,无论怎么样,我们先要从接口拿到数据才能接着往下干.我们通过jQuery用ajax方法把数据拿过来再说.

如下代码:

$(function(){
 $.ajax({
 type:'get',
 url:"http://cnodejs.org/api/v1/topics",
 dataType: 'json',
 success: function(data){
 if (data.success){
 console.log(data)
 }else{
 alert(JSON.stringify(data));
 }
 },
 error: function(data){
 alert(JSON.stringify(data));
 }
 });
})

代码如上,我们看下浏览器控制台,截图如下:

VUEJS实战之构建基础并渲染出列表(1)

如上图所示,我们成功的拿到了数据.

分析数据

VUEJS实战之构建基础并渲染出列表(1)

如上图所示,数据里面包含了如下内容
 1.作者
1.作者头像url
2.作者用户名
 2.作者ID
 3.帖子内容
 4.发布时间
 5.是否是精华
 6.帖子ID
 7.最后回复时间
 8.回复数量
 9.归属标签
 10.帖子标题
 11.是否置顶
 12.浏览统计 

数据接口如上.当然,如果是做全功能的论坛的话,这些数据都是有作用的.而在我的项目中,有很多是用不到的.我们来看下我需要那些.

<li>
 <i class="user_ico">
 <img src="#头像url" alt="用户名">
 <span>用户名</span>
 </i>
 <time class="time">发表于 5 天前</time>
 <a class="talk" href="content.html?链接ID">帖子标题</a>
</li>

如上代码所示,我们需要循环的内容包括
 1.作者头像url
 2.作者用户名
 3.发布时间
 4.帖子ID
 5.帖子标题 

没有问题,我们所需要的内容,接口全部都是有的.

封装 ajax 代码

ajax 代码虽然不长,但是我看着还是比较难受.因此,我用下面的代码进行封装

// ajax get json 方法
function getJson(url,func){
 $.ajax({
 type:'get',
 url:url,
 dataType: 'json',
 success: function(data){
 if (data.success){
 func(data);
 }else{
 alert("接口调用失败");
 }
 },
 error: function(data){
 alert(JSON.stringify(data));
 }
 });
}

如上,在需要的地方,我们只需要用 getJson(url,func) 这个函数就可以了.

引用封装好的代码

$(function(){
 var url = "http://cnodejs.org/api/v1/topics";
 getJson(url,function(data){
 console.log(data);
 });
});

修改成这样之后,我们再来看下,看看能不能打印出来我们所需要的数据?如下图所示:

VUEJS实战之构建基础并渲染出列表(1)

没有任何问题,我们依然获得了数据.我们在把这个回调的函数再封装一下,改成下面的代码

$(function(){
 var url = "http://cnodejs.org/api/v1/topics";
 getJson(url,pushDom);
});
function pushDom(data){
 console.log(data);
}

好,如果没有出错的话,绝对还是能够打印出来接口数据的.这样操作后,我们的代码就无比的简练,并且可阅读性大大增加了.而我们下面要做的事情,就是在 pushDom(data) 这个函数里面去做就好了.

vue 渲染代码

首先,我们需要在页面中用 vue 的方法写入我们要插入的数据.

html代码部分

<li v-for="info in data">
 <i class="user_ico">
 <img src="{{ info.author.avatar_url }}" alt="{{ info.author.loginname }}">
 <span>{{ info.author.loginname }}</span>
 </i>
 <time class="time">{{ info.create_at }}</time>
 <a class="talk" href="content.html?{{ info.id }}">{{ info.title }}</a>
</li>1

vue知识点
循环数据 http://vuejs.org.cn/api/#v-for

JS代码部分

function pushDom(data){
 var vm = new Vue({
 el: '.list',
 data: data
 });
}

我们来看一下效果:

VUEJS实战之构建基础并渲染出列表(1)

好,非常兴奋,短短的几行代码,我们就成功用vue将列表给渲染出来了.

小结
 1.ajax获取数据是关键
 2.了解一点点vue的内容,就可以上手了.
 3.构建项目时,代码和文件一定要清晰明了.

 附录

本文由FungLeo原创

首发地址:http://blog.csdn.net/FungLeo/article/details/51649074

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 #Javascript
多种jQuery绑定事件的实现方式
Jun 13 #Javascript
JS Ajax请求如何防止重复提交
Jun 13 #Javascript
JavaScript判断微信浏览器实例代码
Jun 13 #Javascript
JavaScript判断是否是微信浏览器
Jun 13 #Javascript
JavaScript_object基础入门(必看篇)
Jun 13 #Javascript
js 连续赋值的简单实现
Jun 13 #Javascript
You might like
PHP入门速成教程
2007/03/19 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
javascript定义函数的方法
2010/12/06 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
js继承实现方法详解
2016/12/16 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
python paramiko实现ssh远程访问的方法
2013/12/03 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
python中实现词云图的示例
2020/12/19 Python
预备党员表决心书
2014/03/11 职场文书
法律进学校实施方案
2014/03/15 职场文书
运动会开幕式主持词
2014/03/28 职场文书
4s店活动策划方案
2014/08/25 职场文书
团队拓展活动方案
2014/08/28 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS