vonic 环境配置_vonic单页面应用

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

先放上源码和demo地址:

需要的js,css文件在

jquery-1.11.1.min.js

index.html

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

html>

index

确认

无标签: {{tel}}

有标签: {{username}}

确认

无标签: {{tel}}

index.js

var index_data={

userName:'',

passWord:'',

tel:''}

var index= {

template: '#index',//这里的index是html中的

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中的

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 环境配置_vonic单页面应用相关推荐

vonic 环境配置_Vonic 2.0 全新文档站上线
VONIC Mobile UI Components, based on Vue.js and ionic CSS. 介绍什么是 vonic ? 一个基于 vue.js 和 ionic 样式的 UI ...
Vue第七章：项目环境配置及单文件组件 vue脚手
第七章:项目环境配置及单文件组件 vue脚手架回顾: 组件之间的通信父传子:正向传递 vue允许自动触发 props 1.先在子组件中定义期待的属性名和类型 2.在父组件中调用子组件 ...
pc2环境配置指南（windows）
文章目录 pc^2^配置指南运行环境环境配置(单服务器) 服务器 1.sever 2.admin 3.judge 4.scoreboard 5.feeder 6.balloonUtil Team端 ...
【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面
在上篇文章我们已经搭建好了基础的开发环境,接下来会介绍如何引入 DVA 和 ANTD ,以及在引入过程中需要注意的问题.这里只会详细的书写部分组件,其他的组件都是大同小异.你可以在 github仓库 ...
Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
nginx配置解决vue单页面打包文件大，首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建）
From: https://blog.csdn.net/u012907049/article/details/72764151 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
Vue入坑——vue-router单页面多路由配置
2019独角兽企业重金招聘Python工程师标准>>> 上一篇:vue-router如何传递参数一起学vue--vue学习总路线 ----------^~^我是萌萌哒分割线^~^- ...
Ice飞冰页面配置菜单配置日志打印环境配置《六》
页面配置框架为页面级组件提供了一些特殊的配置项,让页面级组件可以快速拥有一些能力. 页面滚动# scrollToTop:用于渲染页面前是否需要将当前页面滚动至顶部,这个配置用于嵌套路由的应用场景. ...

vonic 环境配置_vonic单页面应用

vonic 环境配置_vonic单页面应用相关推荐

最新文章

热门文章