使用vue来与后台进行数据交互非常的方便,在这里我用json模拟了后台返回的数据然后使用vue来进行渲染。
知识点:
v-cloak:防止页面加载时出现 vuejs 的变量名 渲染完之后自动去掉(不要忘记加样式)
v-for:列表渲染
ajax:封装了get和post的方法。
css代码
* { padding: 0; margin: 0; } ul { width: 690px; float: left; font-size: 12px; color: #838383; list-style: none; } a { color: #000; text-decoration: none; } [v-cloak] { display: none; } li { list-style: none; margin-bottom: 20px; padding: 10px; background-color: #F6F6F6; box-shadow: 1px 3px 9px #ccc; border-radius: 4px; overflow: hidden; } h2 { font-size: 15px; color: #312424; font-weight: bold; } .dateview { padding: 8px 0px 8px 18px; margin-top: 4px; font-size: 12px; } .dateview span { margin-right: 20px; } .es_img { width: 183px; float: left; overflow: hidden; } .es_img a { display: block; } .es_img img { width: 100%; } .es { float: left; width: 475px; margin: 10px 0px 0 10px; line-height: 20px; } .es a { background: #fd8a61; color: #fff; padding: 5px 10px; float: right; margin: 20px 0 0 0; border-radius: 3px; }
html代码
<ul id="list-vm" v-cloak> <li v-for="item in test"> <h2>{{item.title}}</h2> <p class="dateview"> <span>{{item.time}}</span> <span>作者:{{item.name}}</span> <span>分类:[<a href="###">{{item.type}}</a>]</span> </p> <div class="es_img"> <a v-bind:href='item.url==""?"javascript:":item.url'> <img v-bind:src="item.img"> </a> </div> <div class="es"> <p>{{item.cont_describe}}</p> <a href="###" target="_blank">阅读全文</a> </div> </li> </ul>
javascript代码
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> var config = { url: '', //若是线上服务器上这个作为域名 } //get封装 分别是地址、要传的参数、成功、失败 var get = function (site, data, successfun, errorfun) { var temp_errorfun = function (xhr, type) { console.log('Ajax error!'); console.log(xhr); console.log(type); }; if (errorfun) { temp_errorfun = errorfun; } $.ajax({ type: 'GET', url: config.url + site + ".json", data: data, dataType: 'json', timeout: 5000, success: successfun, error: temp_errorfun }); }; // post封装 var post = function (site, data, successfun, errorfun) { var temp_errorfun = function (xhr, type) { console.log('Ajax error!'); console.log(xhr); console.log(type); }; if (errorfun) { temp_errorfun = errorfun; } $.ajax({ type: 'POST', url: config.url + site + ".json", data: data, dataType: 'json', timeout: 5000, success: successfun, error: temp_errorfun }); }; var list_vm = new Vue({ el: '#list-vm', data: { test: [] }, methods: { } }); get('test', {}, function (data) { if (data.code == '0') { list_vm.test = data.data; } else { alert("获取失败") } }, function () { alert("网络错误") }); </script>
json(和html同级)
{ "data": [ { "url": "", "title": "kali linux 安装nodejs", "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg", "name": "夕雨夕雾", "time": "2016-06-16 18:36:10", "type": "linux", "cont_describe": "kali linux 安装nodejs,kali是一个基于Debian的Linux发行版, 设计用于数字取证和渗透测试。" }, { "url": "http://www.chijianfeng.com/", "title": "gulp笔记--编译less", "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg", "name": "夕雨夕雾", "time": "2016-06-03 17:50:48", "type": "gulp", "cont_describe": "Less 是一门 CSS 预处理语言,它对 CSS 增加了诸如变量、混合" }, { "url": "", "title": "gulp笔记--安装", "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg", "name": "夕雨夕雾", "time": "2016-05-31 20:01:53", "type": "gulp", "cont_describe": "gulp 在windows 环境下的安装" }, { "url": "http://www.chijianfeng.com/", "title": "avalon2实例--获取选中文字", "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg", "name": "夕雨夕雾", "time": "2016-05-31 19:17:09", "type": "avalonJs", "cont_describe": "avalon获取选中文字,兼容到ie9" }, { "url": "", "title": " CSS3 笔记(三)", "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg", "name": "夕雨夕雾", "time": "2016-05-16 12:39:52", "type": "css", "cont_describe": "css3 的变形、过渡、动画的基本属性及其用法" }, { "url": "", "title": "CSS3笔记(二)", "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg", "name": "夕雨夕雾", "time": "2016-05-16 13:10:32", "type": "css", "cont_describe": "css3中的文字效果,例如阴影、颜色填充、自动换行、文字描边、文字裁剪等" } ], "code": 0, "msg": "操作成功" }
实现之后的效果
需要注意的是 测试的时候要放在本地或者线服务器进行测试。