{"action":"closed","issue":{"url":"https://api.github.com/repos/f2ecjb/blog/issues/7","repository_url":"https://api.github.com/repos/f2ecjb/blog","labels_url":"https://api.github.com/repos/f2ecjb/blog/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/f2ecjb/blog/issues/7/comments","events_url":"https://api.github.com/repos/f2ecjb/blog/issues/7/events","html_url":"https://github.com/f2ecjb/blog/issues/7","id":175650534,"number":7,"title":"vue.js初实践--使用数据绑定制作服务支持页","user":{"login":"f2ecjb","id":18107310,"avatar_url":"https://avatars.githubusercontent.com/u/18107310?v=3","gravatar_id":"","url":"https://api.github.com/users/f2ecjb","html_url":"https://github.com/f2ecjb","followers_url":"https://api.github.com/users/f2ecjb/followers","following_url":"https://api.github.com/users/f2ecjb/following{/other_user}","gists_url":"https://api.github.com/users/f2ecjb/gists{/gist_id}","starred_url":"https://api.github.com/users/f2ecjb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/f2ecjb/subscriptions","organizations_url":"https://api.github.com/users/f2ecjb/orgs","repos_url":"https://api.github.com/users/f2ecjb/repos","events_url":"https://api.github.com/users/f2ecjb/events{/privacy}","received_events_url":"https://api.github.com/users/f2ecjb/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-09-08T02:25:58Z","updated_at":"2016-09-23T07:36:07Z","closed_at":"2016-09-23T07:36:07Z","body":"Vue.js是一个轻量级的、专注于视图模型(ViewModal)的框架。\r\n接触vue不久，便尝试在项目中使用它来制作PC端的产品服务支持页，但最后发现这玩意不支持IE8，就放弃了。当然，vue本身就为移动而生。\r\n\r\n以下代码均新手所写，不喜勿喷，乐见建言。\r\n\r\n先看一下效果图：\r\n![image](https://cloud.githubusercontent.com/assets/18107310/18334648/86a3ef8c-75ab-11e6-9b7d-e71a5598be49.png)\r\n仿照的是小米、魅族和乐檬的服务支持页。\r\n内容不多也不复杂，主要使用的是vue最基本的数据渲染、数据绑定、组件化制作等。\r\n\r\n\r\n完整代码如下（直接复制可本地打开看效果）：\r\n````\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<meta charset=\"utf-8\">\r\n\t<title></title>\r\n\t<style type=\"text/css\">\r\n\t\t*{padding: 0;margin: 0;}\r\n\t\ta{text-decoration: none;}\r\n\t\tbody{background: #f1f1f1;margin-bottom: 50px;font-family: \"Microsoft Yahei\";}\r\n\t\t/*自助服务产品支持*/\r\n    \t.service{width: 1200px;margin: 0 auto;}\r\n    \t.service ul{background: #fff;}\r\n    \t.service h2{font-size: 24px;color: #666;line-height: 80px;padding-top: 20px;font-weight: 500;}\r\n    \t.service li{display: inline-block;text-align: center;border-left: 1px solid #f5f5f5;box-sizing: border-box;cursor: pointer;margin-left: -1px;}\r\n    \t.service li a{display: block;padding: 30px 0;}\r\n    \t.service li a:hover{text-decoration: none;}\r\n    \t.service li img{display: inline-block;width: 80px;}\r\n    \t.service li span{display: block;color: #757575;font-size: 16px;line-height: 28px;}\r\n    \t.service li:hover span{color: #488ff7;}\r\n    \t#selfService li{width: 25%;}\r\n    \t#productSupport li{width: 33.33%;}\r\n    \t/*动画*/\r\n    \t.service li:hover img,.service li:hover span{-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}\r\n    \t#selfService li:hover img,#selfService li:hover span{-moz-transform:translate(0,-5px);-webkit-transform:translate(0,-5px);-o-transform:translate(0,-5px);-ms-transform:translate(0,-5px);transform:translate(0,-5px);}\r\n    \t#productSupport li:hover img{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}\r\n    \t\r\n    \t/*常见问题*/\t\r\n    \t.commonProblem_box{background: #fff;overflow: hidden;}\r\n    \t.commonProblem_box dl{width: 25%;float: left;min-height: 265px;padding: 30px;text-align: center;border-left: 1px solid #f5f5f5;border-top: 1px solid #f5f5f5;box-sizing: border-box;margin-left: -1px;}\r\n    \t.commonProblem_box dt{display: block;font-size: 18px;line-height: 36px;color: #333;padding-bottom: 5px;}\r\n    \t.commonProblem_box dd{display: block;font-size: 14px;line-height: 28px;}\r\n    \t.commonProblem_box dd a{color: #757575;}\r\n    \t.commonProblem_box dd a:hover{text-decoration:none;color: #488ff7;}\r\n    \t\r\n    \t/*联系我们*/\r\n    \t.contactCustomer_box{padding: 30px 0;background: #fff;overflow: hidden;}\r\n    \t.customer{float: left;width: 50%;border-left: 1px solid #F5F5F5;box-sizing: border-box;margin-left: -1px;}\r\n    \t.customer i{display:inline-block;width:100px;height:100px;margin: 0 20px 0 130px;background:url(https://github.com/f2ecjb/blog/blob/master/img/7/icon.png?raw=true) no-repeat 0 0;}\r\n    \t.customer i.phone{background-position:0 -109px;}\r\n    \t.customer .customer_main{display: inline-block;vertical-align: top;}\r\n    \t.customer .customer_main h3{font-size: 18px;line-height: 36px;color: #333;font-weight: normal;}\r\n    \t.customer .customer_main p{font-size: 14px;line-height: 24px;color: #757575;}\r\n    \t.customer .customer_main a{display: inline-block;margin-top: 10px;width: 180px;line-height: 38px;font-size: 16px;text-align: center;background: #E4566C;color: #fff;cursor: pointer;}\r\n    \t.customer .customer_main a:hover{text-decoration: none;background: #ea3f56;}\r\n\r\n    </style>\r\n</head>\r\n<body>\r\n\r\n\t<img src=\"https://github.com/f2ecjb/blog/blob/master/img/7/banner_service.jpg?raw=true\" style=\"width:100%\">\r\n\t<div class=\"service\">\r\n\t\t<div id='selfService'></div>\r\n\t\t<div id='productSupport'></div>\r\n\t\t<div id=\"commonProblem\"></div>\r\n\t\t<div id='contactCustomer'>\r\n\t\t\t<h2>联系我们</h2>\r\n\t\t\t<div class=\"contactCustomer_box\">\r\n\t\t\t\t<div class=\"customer\">\r\n\t\t\t\t\t<i></i>\r\n\t\t\t\t\t<div class=\"customer_main\">\r\n\t\t\t\t\t\t<h3>在线客服</h3>\r\n\t\t\t\t\t\t<p>24小时，为您解决遇到的问题</p>\r\n\t\t\t\t\t\t<a href=\"###\">立即咨询</a>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"customer\">\r\n\t\t\t\t\t<i class=\"phone\"></i>\r\n\t\t\t\t\t<div class=\"customer_main\">\r\n\t\t\t\t\t\t<h3>400-600-4580</h3>\r\n\t\t\t\t\t\t<p>周一至周日 9:00 至 18:30</p>\r\n\t\t\t\t\t\t<p>24小时全国服务热线</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</body>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js\" type=\"text/javascript\" ></script>\r\n<script type=\"text/javascript\">\r\n\tVue.config.delimiters = ['${', '}'];//修改定界符\r\n\t\r\n\t//公共模板组件\r\n\tvar tm='<h2>${section}</h2>'+\r\n\t\t\t'<ul>'+\r\n\t\t\t\t'<li v-for=\"item in items\">'+\r\n\t\t\t\t\t'<a v-bind:href=\"item.href\" target=\"_blank\">'+\r\n\t\t\t\t\t\t'<img v-bind:src=\"item.src\"/>'+\r\n\t\t\t\t\t\t'<span>${item.t}</span>'+\r\n\t\t\t\t\t'</a>'+\r\n\t\t\t\t'</li>'+\r\n\t\t\t'</ul>';\r\n\r\n\t//自助服务\t\r\n\tvar selfService=new Vue({\r\n\t\tel:'#selfService',\r\n\t\ttemplate:tm,\r\n\t\treplace:false,\r\n\t\tdata:{\r\n\t\t\tsection:'自助服务',\r\n\t\t\titems:[\r\n\t\t\t\t{t:\"申请售后\",href:\"###\",src:\"https://github.com/f2ecjb/blog/blob/master/img/7/service-icon-wangdian.png?raw=true\"},\r\n\t\t\t\t{t:\"订单查询\",href:\"###\",src:\"https://github.com/f2ecjb/blog/blob/master/img/7/service-icon-wangdian.png?raw=true\"},\r\n\t\t\t\t{t:\"个人信息\",href:\"###\",src:\"https://github.com/f2ecjb/blog/blob/master/img/7/service-icon-wangdian.png?raw=true\"},\r\n\t\t\t\t{t:\"XXXX\",href:\"###\",src:\"https://github.com/f2ecjb/blog/blob/master/img/7/service-icon-wangdian.png?raw=true\"}\r\n\t\t\t]\r\n\t\t}\r\n\t})\r\n\t//产品支持\r\n\tvar productSupport=new Vue({\r\n\t\tel:'#productSupport',\r\n\t\ttemplate:tm,\r\n\t\treplace:false,\r\n\t\tdata:{\r\n\t\t\tsection:'产品支持',\r\n\t\t\titems:[\r\n\t\t\t\t{t:\"乐檬miniStation\",href:\"###\",src:\"https://github.com/f2ecjb/blog/blob/master/img/7/Lenovo.png?raw=true\"},\r\n\t\t\t\t{t:\"创维miniStation\",href:\"###\",src:\"https://github.com/f2ecjb/blog/blob/master/img/7/Skyworth.png?raw=true\"},\r\n\t\t\t\t{t:\"无线手柄\",href:\"###\",src:\"https://github.com/f2ecjb/blog/blob/master/img/7/haddle.png?raw=true\"}\r\n\t\t\t]\r\n\t\t}\r\n\t})\r\n\t//常见问题\r\n\tvar contactCustomer=new Vue({\r\n\t\tel:'#commonProblem',\r\n\t\ttemplate:'<h2>${section}</h2>'+\r\n\t\t\t\t'<div class=\"commonProblem_box\">'+\r\n\t\t\t\t\t'<dl v-for=\"item in items\">'+\r\n\t\t\t\t\t\t'<dt>${item.dt}</dt>'+\r\n\t\t\t\t\t\t'<dd  v-for=\"d in item.dd\"><a v-bind:href=\"d.href\" target=\"_blank\">${d.t}</a></dd>'+\r\n\t\t\t\t\t'</dl>'+\r\n\t\t\t\t'</div>',\r\n\t\treplace:false,\r\n\t\tdata:{\r\n\t\t\tsection:'常见问题',\r\n\t\t\titems:[\r\n\t\t\t\t{\r\n\t\t\t\t\tdt:\"购物指南\",\r\n\t\t\t\t\tdd:[{\r\n\t\t\t\t\t\tt:\"支付方式\",href:\"http://www.baidu.com\"},{\r\n\t\t\t\t\t\tt:\"配送说明\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"付款帮助\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"包邮政策\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"产品参数\",href:\"http://www.sina.com\"}\r\n\t\t\t\t\t]\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tdt:\"订单操作\",\r\n\t\t\t\t\tdd:[{\r\n\t\t\t\t\t\tt:\"查询发货进度\",href:\"http://www.baidu.com\"},{\r\n\t\t\t\t\t\tt:\"取消订单\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"查询物流信息\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"查询订单信息\",href:\"http://www.sina.com\"}\r\n\t\t\t\t\t]\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tdt:\"售后服务\",\r\n\t\t\t\t\tdd:[{\r\n\t\t\t\t\t\tt:\"售后申请\",href:\"http://www.baidu.com\"},{\r\n\t\t\t\t\t\tt:\"售后进度查询\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"售后政策\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"返厂邮寄注意事项\",href:\"http://www.sina.com\"}\r\n\t\t\t\t\t]\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tdt:\"固件相关\",\r\n\t\t\t\t\tdd:[{\r\n\t\t\t\t\t\tt:\"创维APP下载\",href:\"http://www.baidu.com\"},{\r\n\t\t\t\t\t\tt:\"联想乐檬APP下载\",href:\"http://www.sina.com\"}\r\n\t\t\t\t\t]\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tdt:\"技术支持\",\r\n\t\t\t\t\tdd:[{\r\n\t\t\t\t\t\tt:\"如何刷机\",href:\"http://www.baidu.com\"},{\r\n\t\t\t\t\t\tt:\"无法开机\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"信号问题\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"黑屏无法亮起\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"无法充电\",href:\"http://www.sina.com\"}\r\n\t\t\t\t\t]\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tdt:\"特色服务\",\r\n\t\t\t\t\tdd:[{\r\n\t\t\t\t\t\tt:\"礼包换取\",href:\"http://www.baidu.com\"},{\r\n\t\t\t\t\t\tt:\"意外保障服务\",href:\"http://www.baidu.com\"},{\r\n\t\t\t\t\t\tt:\"VIP服务\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"建议留言\",href:\"http://www.sina.com\"}\r\n\t\t\t\t\t]\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tdt:\"社区模块\",\r\n\t\t\t\t\tdd:[{\r\n\t\t\t\t\t\tt:\"社区公告\",href:\"http://www.baidu.com\"},{\r\n\t\t\t\t\t\tt:\"玩机攻略\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"游戏资源\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"同城专区\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"综合交流\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"产品反馈\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"积分投资\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"搜索社区\",href:\"http://www.sina.com\"}\r\n\t\t\t\t\t]\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tdt:\"游戏分类\",\r\n\t\t\t\t\tdd:[{\r\n\t\t\t\t\t\tt:\"动作冒险\",href:\"http://www.baidu.com\"},{\r\n\t\t\t\t\t\tt:\"飞行射击\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"体育竟速\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"休闲棋牌\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"多人游戏\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"手柄专区\",href:\"http://www.sina.com\"},{\r\n\t\t\t\t\t\tt:\"其它应用\",href:\"http://www.sina.com\"}\r\n\t\t\t\t\t]\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t}\r\n\t})\r\n</script>\r\n</html>\r\n````"}}
{"actor":{"display_login":"f2ecjb"}}