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 src="/js/jquery-1.11.1.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="plugins/vue/vue-resource.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js">
</script> <script src="https://unpkg.com/[email protected]/dist/vuex.min.js"></script>
<script src="https://unpkg.com/[email protected]/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引入不对也会不显示, 在使用跳转的时候如果不成功,改变跳转路径, 多试试, 具体跳转原理还没有深入了解