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引入不对也会不显示, 在使用跳转的时候如果不成功,改变跳转路径, 多试试, 具体跳转原理还没有深入了解

vonic单页面应用的更多相关文章

  1. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  2. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  3. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  4. AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

  5. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  6. 单页面实现之hash

    至学了angularJs后,发现这个单页面应用不知道在没有angularJs的情况下怎么实现. 所以就此对这个思考与资料并行,终于知道这个的实现基本原理. 首先angularJs的实现是hash值的变 ...

  7. 浅谈HTML5单页面架构（三）—— 回归本真：自定义路由 + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...

  8. 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  9. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

随机推荐

  1. Thread类(线程)

    操作系统通过线程对程序的执行进行管理,当操作系统运行一个程序的时候,首先,操作系统将为这个准备运行的程序分配一个进程,以管理这个程序所需要的各种资源.在这些资源之中,会包含一个称为主线程的线程数据结构 ...

  2. C#基础知识总结(二)

    摘要 第二篇主要讲:变量.连接符占位符等.转义字符.数据的计算.数据的转换.try-catch的简单熟悉.复合运算符和自加自减 一.变量 1.数据存储在内存中:内存叫做RAM,内存被分隔为一小格一小格 ...

  3. 先装IIS后装.Net Framework

    1.动态页面和静态页面的区别 动态页面(动态网站):通过C#代码(或别的语言)与服务器的交互的实现(比如新建一个ashx一般处理程序中的C#代码就可以和服务器实现交互,修改数据库,上传图片等都属于和服 ...

  4. linux系统mysql主从配置

    一.原理 mysql主从配置的流程大体如图: 1)master会将变动记录到二进制日志里面: 2)master有一个I/O线程将二进制日志发送到slave; 3) slave有一个I/O线程把mast ...

  5. Java 文件流操作.

    一.概念 在Java中,文件的输入和输出是通过流(Stream)来实现的.一个流,必有源端和目的端,它们可以是计算机内存的某些区域,也可以是磁盘文件,甚至可以是 Internet 上的某个 URL.对 ...

  6. C#设计模式之七桥接模式（Bridge Pattern）【结构型】

    一.引言 今天我们要讲[结构型]设计模式的第二个模式,该模式是[桥接模式],也有叫[桥模式]的,英文名称:Bridge Pattern.大家第一次看到这个名称会想到什么呢?我第一次看到这个模式根据名称 ...

  7. JavaScript是如何工作的：Service Worker的生命周期及使用场景

    摘要: 理解Service Worker. 原文:JavaScript 是如何工作的:Service Worker 的生命周期及使用场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...

  8. canvas-a10isPointPath.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. H5和PC实现点击复制当前文字的功能，兼容ios,安卓

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 用js实现超链接导航菜单点击切换选中时的状态

    项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...