去年的时候其实已经把Vue的文档，以及Vue权威指南这本书看的差不多了，也进行了相关的练习，但是由于年底项目比较紧张，所以也没有真正的在iOS项目中使用Vue去写页面。最近开始练习，用Vue写了一个简单的页面，放在了练手app中。具体源码如下：
<template>
<div class="table">
<ul class="table">
<li class="table"><a class="table" href="https://www.baidu.com">分享</a></li>
<li class="table"><a class="table" href="https://www.baidu.com">联系我们</a></li>
<li class="table"><a class="table" href="https://www.baidu.com">使用教程</a></li>
<li class="table"><a class="table" href="https://www.baidu.com">隐私</a></li>
<li class="table"><a class="table" href="jkapp://guidehelper/purchaseThing">恢复购买</a></li>
<li class="table"><a class="table" href="https://www.baidu.com">评价</a></li>
</ul>
</div>
</template>
<script>
export default{
name:'HelloWorld'
}
</script>
<style>
div.table {margin-top: -70px}
ul.table {list-style-type:none;text-align:left;margin-top: 0px;padding: 10px;}
li.table {margin-top:10px;margin-bottom: 10px;border-bottom: 1px solid #e5e5e5;height: 40px}
a.table {text-decoration:none;color: black;font-size: 20px;width: 100%;height: inherit;vertical-align: middle;display: inline-block;-webkit-tap-highlight-color:#ffffff;}
</style>
真机运行后效果如下：
我这边用的比较简单，有几个点需要向大家解释一下。
1，这个页面是更多页面，比较简单，所以先从这个页面开始练手。另外就是里面涉及的url都指向了百度。
2，自定义scheme进行交互 jkapp://guidehelper/purchaseThing
根据我自定义的协议，结合JKRouter这个路由工具，我这边可以调用native的恢复购买的事件。
3，Vue写好的代码，顶部有一段空白
在写好Vue代码后，运行后发现顶部一空白的距离，我这边尝试了很多种方法都没有将空白距离消除，后来实在没办法我这边将偏移量向上移了70
px，具体代码如下： div.table {margin-top: -70px}
如果有哪里写的不好的地方，欢迎大家批评指正。
如果大家对Vue，以及前端感兴趣的话，可以扫码加群哦
更多优质文章，可以微信扫码关注：
