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. 【golang-GUI开发】struct tags系统（二）qt的自定义组件和构造函数

    今天我们来讲讲自定义组件和它的构造函数. 在前面的文章里我们已经接触了好几个自定组件,这次的示例是一个自定义对话框,他有一个about按钮,点击按钮可以显示出Qt的信息或者用户输入的信息.这是效果图: ...

  2. angularjs_百度地图API_根据经纬度定位_示例

    百度API--Demo地址:   http://lbsyun.baidu.com/jsdemo.htm#i8_4 本例是在angular.js使用的百度地图根据经纬度定位的API:(正常的页面写法基本 ...

  3. 第一册：lesson sixty five.

    原文: Not a baby. A:What are you going to do this evening Jill? B:I'm going to meet some friends, dad. ...

  4. Updatepanel 后端返回后，在 Updatepanel 内控件的前端 js 失效问题

    实际情况:点击下箭头弹出列表,点击列表上的隐藏按钮隐藏列表. 背景:模块没有使用Js或者Jquery的Ajax功能,而是使用Asp.Net的Ajax控件--UpdatePanel + ScriptMa ...

  5. 从零开始学安全(二十)●PHP辅助函数

  6. vue IE 报错 引用babel-polyfill

    一.vue 项目报错 vuex requires a Promise polyfill in this browser     在网上找到下面三篇文章,然而和我的项目都不太一样. 我的项目基于 基础模 ...

  7. vb.net 数字大写

    Private Function RMBChinese(ByVal Rmb As Double) As String Dim Rmbexp As String  Dim Rmbda As String ...

  8. 解决org.hibernate.exception.SQLGrammarException:could not insert

    今天在使用hibernate搭建项目时碰到了这个错误,找了好半天没能发现错误的原因, 上网求助了一下 发现出现这个bug的原因是因为数据表使用了数据库的关键字(保留字) 然后检查了一下,发现字段名称都 ...

  9. mybatis笔记02

    目录 0. 文章目录 1. Mybatis映射文件 1.1 输入映射 1.2 输出映射 1.3 resultMap 2. 动态SQL 2.1 if和where 2.2 foreach循环 2.3 sq ...

  10. SpringBoot打包报错没有主清单

    1,如果你的POM是继承spring-boot-starter-parent的话,只需要下面的指定就行. <properties> <!-- The main class to st ...