VUEJS实战之构建基础并渲染出列表（1）
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
VUEJS实战之构建基础并渲染出列表（1）
前⾔
我的JavaScript⽔平⽐较⼀般.好吧,是相当的⼀般.因此,对于最新的前端框架技术,实在是有点困难,但现实让我必须⾯对.因此,学习是唯⼀的出路.
纵向⽐较了N款前端框架,最终选择了VUE，为什么呢？理由如下:
1.angular 前途不明,1.x学习曲线⾼,并且好像被放弃了,⽽2则还没有正式推出.
2.react ⽐较厉害,但是没接触.
3.VUE简单,通过上⼿,⽐较适合我的思维和⽔平.
4.vue有中⽂⽂档,我看起来⽐较舒服.
既然决定学习vue,那么最好的学习⽅法就是实战.偶然看到 论坛有公开的api可以使⽤,这太⽅便了.于是,我决定⽤这个公开的api来写⼀个demo.
接⼝简介
他们提供的接⼝是完全的,也就是说我们可以通过这些接⼝再做⼀个他们这样的论坛.
项⽬计划
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
开始写代码
⾸先是按照上⾯的⽂件⽬录设计,开始往⾥⾯写⽂件.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=" Home By FungLeo"> 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,效果如下图所⽰:
完整代码请从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:"/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));
}
});
})
代码如上,我们看下浏览器控制台,截图如下:
如上图所⽰,我们成功的拿到了数据.
分析数据
如上图所⽰,数据⾥⾯包含了如下内容
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 = "/api/v1/topics";
getJson(url,function(data){
console.log(data);
});
});
修改成这样之后,我们再来看下,看看能不能打印出来我们所需要的数据?如下图所⽰:
没有任何问题,我们依然获得了数据.我们在把这个回调的函数再封装⼀下,改成下⾯的代码
$(function(){
var url = "/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
JS代码部分
function pushDom(data){
var vm = new Vue({
el: '.list',
data: data
});
}
我们来看⼀下效果:
好,⾮常兴奋,短短的⼏⾏代码,我们就成功⽤vue将列表给渲染出来了.
⼩结
1.ajax获取数据是关键
2.了解⼀点点vue的内容,就可以上⼿了.
3.构建项⽬时,代码和⽂件⼀定要清晰明了.
附录
本⽂已被整理到了《》，欢迎⼤家学习阅读。
关于vue.js组件的教程，请⼤家点击专题进⾏学习。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。