vonic单页面应用

最新推荐文章于 2021-01-16 12:15:44 发布

弓长张_木子李

最新推荐文章于 2021-01-16 12:15:44 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/qq_21104515/article/details/80832797

版权

HTML 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

vonic

2 篇文章 0 订阅

订阅专栏

Vonic—基于Vue.js和ionic样式的移动端UI框架

先放上源码和demo地址:

　　　　标签演示: https://wangdahoo.github.io/vonic/docs/

　　　　源码: https://github.com/wangdahoo/vonic

需要的js,css文件在 https://unpkg.com 中根据格式要求可以找到:

vonic.min.css

ionicons.woff

jquery-1.11.1.min.js

axios.min.js

vue.min.js

vue-resource.min.js

vue-router.min.js

vuex.min.js

vonic.min.js

index.html

需要注意的是, 在html中使用vue语法绑定属性或者事件时,不能使用简写, 例如:@click, :class等, 必须使用全写 v-on:click, v-bind:class 等, 有些vonic的标签会使vue的语法不起作用, 使用html的标签就好了

关于页面间数据传递,可以参考:https://blog.csdn.net/libin_1/article/details/51775655

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
    <link type="text/css" rel="stylesheet" href="/css/vonic.min.css"/>
    <link type="text/css" rel="stylesheet" href="/css/ionicons.woff"/>
  
</head>
<body>
<!-- mount point -->
<von-app></von-app>

<!-- index -->
<script type="text/x-template" id="index">
    <div class="page has-navbar" v-nav="{title: '标题',showMenuButton:true,showBackButton:true}">
    <div class="page-content padding-top">
      <!-- type: text, password, email, tel -->
      <div class="item item-divider">
        有标签: {{username}}
      </div>
      <von-input type="text" v-model="userName" placeholder="用户名" label="用户名"></von-input>
      <von-input type="password" v-model="passWord" placeholder="密码" label="密码" style="margin-bottom: 5px;"></von-input>

      <div class="padding">
        <button class="button button-positive button-block" v-on:click="change()">确认</button>
      </div>

      <div class="item item-divider">
        无标签: {{tel}}
      </div>
      <von-input type="tel" v-model="tel" placeholder="手机"></von-input>
  </div>

    </div>
</script>

<!--index2-->
<script type="text/x-template" id="index2"> <div class="page has-navbar" v-nav="{title: '标题',showMenuButton:true,showBackButton:true}">     <div class="page-content padding-top">       <!-- type: text, password, email, tel -->       <div class="item item-divider">         有标签: {{username}}       </div>       <von-input type="text" v-model="userName2" placeholder="用户名" label="用户名"></von-input>       <von-input type="password" v-model="passWord2" placeholder="密码" label="密码" style="margin-bottom: 5px;"></von-input>       <div class="padding">         <button class="button button-positive button-block">确认</button>       </div>       <div class="item item-divider">         无标签: {{tel}}       </div>       <von-input type="tel" v-model="tel2" placeholder="手机"></von-input>   </div> </div> </script>

 <script src="/js/jquery-1.11.1.min.js"></script> 
<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
 <script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
 <script src="plugins/vue/vue-resource.min.js"></script> 
<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js">
</script> <script src="https://unpkg.com/vuex@2.2.1/dist/vuex.min.js"></script> 
<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script> 
<script type="text/javascript" src="/js/index.js"></script>\

</body>
</html>

index.js

var index_data={
   userName:'',
   passWord:'',
   tel:''

 } 
var index= { 
    template: '#index',//这里的index是html中的<script type="text/x-template" id="index">的id值 剩下的写法跟vue一样 
    data: function(){ 
            return index_data; 
    },  
    created: function () { 

     }, 
     methods: { 
　　　　　　change:function:{
                 var self = this;
                 localStorage.setItem("data",self.userName);//将要传递个另外一个页面的值存入缓存中, 然后在另一个页面根据key取出
　　　　　　　　　　window.location.href = "index.html#/index2.html";//跳转到index2.html的template
　　　　　 }
    }
}
//=================================================================================================

var index2_data={
   username:'',
   password:'',
   tel:''
}

var index2= { 
    template: '#index2',//这里的index是html中的<script type="text/x-template" id="index2">的id值 剩下的写法跟vue一样 data: function(){ return index2_data;  }, created: function () { var self = this; self.userName = localStorage.getItem("data");  }, methods: { } }

var routes = [ 
　　　　{ path: '/', component: index},//根据这个index找到上面的var index={}  path是请求路径
       { path: '/index2', component: index2}
] 
Vue.use(Vonic.app, { 
　　　　　　routes: routes 
})

请求路径: localhost:8080/index.html 端口号换成自己的,这样就跳到index那个template了

大致的框架就是这样了, 可能还会存在些问题 , 一般就是标签没有闭合, 绑定的属性不对, vonic的标签和vue事件冲突 , js引入不对也会不显示, 在使用跳转的时候如果不成功,改变跳转路径, 多试试, 具体跳转原理还没有深入了解

弓长张_木子李

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vonic单页面应用

Vonic—基于Vue.js和ionic样式的移动端UI框架先放上源码和demo地址:　　　　标签演示: https://wangdahoo.github.io/vonic/docs/　　　　源码: https://github.com/wangdahoo/vonic 需要的js,css文件在 https://unpkg.com 中根据格式要求可以找到: vonic.min.c...
复制链接

扫一扫