Vonic—基于Vue.js和ionic样式的移动端UI框架
先放上源码和demo地址:
标签演示: https://wangdahoo.github.io/vonic/docs/
源码: https://github.com/wangdahoo/vonic
需要的js,css文件在 https://unpkg.com 中根据格式要求可以找到:
jquery-1.11.1.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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/js/jquery-1.11.1.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="plugins/vue/vue-resource.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"> </script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vuex@2.2.1/dist/vuex.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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引入不对也会不显示, 在使用跳转的时候如果不成功,改变跳转路径, 多试试, 具体跳转原理还没有深入了解
版权声明：
作者：弓长张&木子李
出处：http://www.cnblogs.com/gczmn/
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦