如何优雅的使用vue+vux开发app -03

还是一个错误的示范，但是离优雅差的不远了。。。

<!DOCTYPE html>

<html>

<head>

    <title>vue-vux</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!--include Vux style-->

    <link rel="stylesheet" href="bower_components/vux/dist/vux.css">

    <!--include Vue yourself-->

    <script src="bower_components/vue/dist/vue.js"></script>

    <!-- vue-router -->

    <script src="bower_components/vue-router/dist/vue-router.js"></script>

    <!-- jquery -->

    <script src="bower_components/jquery/jquery.js"></script>

    <!--include the components you need-->

    <script src="bower_components/vux/dist/components/actionsheet/index.js"></script>

    <script src="bower_components/vux/dist/components/address/index.js"></script>

    <!-- 地址库数据 export addressData-->

    <script src="js/addressData.js"></script>

    <script src="bower_components/vux/dist/components/alert/index.js"></script>

    <script src="bower_components/vux/dist/components/badge/index.js"></script>

    <script src="bower_components/vux/dist/components/blur/index.js"></script>

    <script src="bower_components/vux/dist/components/box/index.js"></script>

    <script src="bower_components/vux/dist/components/button-tab/index.js"></script>

    <script src="bower_components/vux/dist/components/button-tab-item/index.js"></script>

    <script src="bower_components/vux/dist/components/calendar/index.js"></script>

    <script src="bower_components/vux/dist/components/card/index.js"></script>

    <script src="bower_components/vux/dist/components/cell/index.js"></script>

    <script src="bower_components/vux/dist/components/checker/index.js"></script>

    <script src="bower_components/vux/dist/components/checker-item/index.js"></script>

    <script src="bower_components/vux/dist/components/checklist/index.js"></script>

    <script src="bower_components/vux/dist/components/circle/index.js"></script>

    <script src="bower_components/vux/dist/components/clocker/index.js"></script>

    <script src="bower_components/vux/dist/components/color-picker/index.js"></script>

    <script src="bower_components/vux/dist/components/confirm/index.js"></script>

    <script src="bower_components/vux/dist/components/countdown/index.js"></script>

    <script src="bower_components/vux/dist/components/countup/index.js"></script>

    <script src="bower_components/vux/dist/components/date-formatter/index.js"></script>

    <script src="bower_components/vux/dist/components/datetime/index.js"></script>

    <script src="bower_components/vux/dist/components/dev-tip/index.js"></script>

    <script src="bower_components/vux/dist/components/dialog/index.js"></script>

    <script src="bower_components/vux/dist/components/divider/index.js"></script>

    <script src="bower_components/vux/dist/components/flexbox/index.js"></script>

    <script src="bower_components/vux/dist/components/flexbox-item/index.js"></script>

    <script src="bower_components/vux/dist/components/friendly-time/index.js"></script>

    <script src="bower_components/vux/dist/components/group/index.js"></script>

    <script src="bower_components/vux/dist/components/group-title/index.js"></script>

    <script src="bower_components/vux/dist/components/icon/index.js"></script>

    <script src="bower_components/vux/dist/components/inline-calendar/index.js"></script>

    <script src="bower_components/vux/dist/components/inline-desc/index.js"></script>

    <script src="bower_components/vux/dist/components/inview/index.js"></script>

    <script src="bower_components/vux/dist/components/loading/index.js"></script>

    <script src="bower_components/vux/dist/components/masker/index.js"></script>

    <script src="bower_components/vux/dist/components/number-roller/index.js"></script>

    <script src="bower_components/vux/dist/components/offcanvas/index.js"></script>

    <script src="bower_components/vux/dist/components/orientation/index.js"></script>

    <script src="bower_components/vux/dist/components/panel/index.js"></script>

    <script src="bower_components/vux/dist/components/picker/index.js"></script>

    <script src="bower_components/vux/dist/components/popup/index.js"></script>

    <script src="bower_components/vux/dist/components/popup-picker/index.js"></script>

    <script src="bower_components/vux/dist/components/previewer/index.js"></script>

    <script src="bower_components/vux/dist/components/progress/index.js"></script>

    <script src="bower_components/vux/dist/components/qrcode/index.js"></script>

    <script src="bower_components/vux/dist/components/radio/index.js"></script>

    <script src="bower_components/vux/dist/components/range/index.js"></script>

    <script src="bower_components/vux/dist/components/rater/index.js"></script>

    <script src="bower_components/vux/dist/components/scroller/index.js"></script>

    <script src="bower_components/vux/dist/components/search/index.js"></script>

    <script src="bower_components/vux/dist/components/selector/index.js"></script>

    <script src="bower_components/vux/dist/components/shake/index.js"></script>

    <script src="bower_components/vux/dist/components/spinner/index.js"></script>

    <script src="bower_components/vux/dist/components/steps/index.js"></script>

    <script src="bower_components/vux/dist/components/sticky/index.js"></script>

    <script src="bower_components/vux/dist/components/swiper/index.js"></script>

    <script src="bower_components/vux/dist/components/swiper-item/index.js"></script>

    <script src="bower_components/vux/dist/components/switch/index.js"></script>

    <script src="bower_components/vux/dist/components/tab/index.js"></script>

    <script src="bower_components/vux/dist/components/tab-item/index.js"></script>

    <script src="bower_components/vux/dist/components/tabbar/index.js"></script>

    <script src="bower_components/vux/dist/components/tabbar-item/index.js"></script>

    <script src="bower_components/vux/dist/components/timeline/index.js"></script>

    <script src="bower_components/vux/dist/components/timeline-item/index.js"></script>

    <script src="bower_components/vux/dist/components/tip/index.js"></script>

    <script src="bower_components/vux/dist/components/toast/index.js"></script>

    <script src="bower_components/vux/dist/components/wechat-emotion/index.js"></script>

    <script src="bower_components/vux/dist/components/x-button/index.js"></script>

    <script src="bower_components/vux/dist/components/x-header/index.js"></script>

    <script src="bower_components/vux/dist/components/x-img/index.js"></script>

    <script src="bower_components/vux/dist/components/x-input/index.js"></script>

    <script src="bower_components/vux/dist/components/x-number/index.js"></script>

    <script src="bower_components/vux/dist/components/x-textarea/index.js"></script>

    <script>

    // register components

    Vue.component("actionsheet", vuxActionsheet);

    Vue.component("address", vuxAddress);

    Vue.component("alert", vuxAlert);

    Vue.component("badge", vuxBadge);

    Vue.component("blur", vuxBlur);

    Vue.component("box", vuxBox);

    Vue.component("button-tab", vuxButtonTab);

    Vue.component("button-tab-item", vuxButtonTabItem);

    Vue.component("calendar", vuxCalendar);

    Vue.component("card", vuxCard);

    Vue.component("cell", vuxCell);

    Vue.component("checker", vuxChecker);

    Vue.component("checker-item", vuxCheckerItem);

    Vue.component("checklist", vuxChecklist);

    Vue.component("circle", vuxCircle);

    Vue.component("clocker", vuxClocker);

    Vue.component("color-picker", vuxColorPicker);

    Vue.component("confirm", vuxConfirm);

    Vue.component("countdown", vuxCountdown);

    Vue.component("countup", vuxCountup);

    Vue.component("date-formatter", vuxDateFormatter);

    Vue.component("datetime", vuxDatetime);

    Vue.component("dev-tip", vuxDevTip);

    Vue.component("dialog", vuxDialog);

    Vue.component("divider", vuxDivider);

    Vue.component("flexbox", vuxFlexbox);

    Vue.component("flexbox-item", vuxFlexboxItem);

    Vue.component("friendly-time", vuxFriendlyTime);

    Vue.component("group", vuxGroup);

    Vue.component("group-title", vuxGroupTitle);

    Vue.component("icon", vuxIcon);

    Vue.component("inline-calendar", vuxInlineCalendar);

    Vue.component("inline-desc", vuxInlineDesc);

    Vue.component("inview", vuxInview);

    Vue.component("loading", vuxLoading);

    Vue.component("masker", vuxMasker);

    Vue.component("number-roller", vuxNumberRoller);

    Vue.component("offcanvas", vuxOffcanvas);

    Vue.component("orientation", vuxOrientation);

    Vue.component("panel", vuxPanel);

    Vue.component("picker", vuxPicker);

    Vue.component("popup", vuxPopup);

    Vue.component("popup-picker", vuxPopupPicker);

    Vue.component("previewer", vuxPreviewer);

    Vue.component("progress", vuxProgress);

    Vue.component("qrcode", vuxQrcode);

    Vue.component("radio", vuxRadio);

    Vue.component("range", vuxRange);

    Vue.component("rater", vuxRater);

    Vue.component("scroller", vuxScroller);

    Vue.component("search", vuxSearch);

    Vue.component("selector", vuxSelector);

    Vue.component("shake", vuxShake);

    Vue.component("spinner", vuxSpinner);

    Vue.component("steps", vuxSteps);

    Vue.component("sticky", vuxSticky);

    Vue.component("swiper", vuxSwiper);

    Vue.component("swiper-item", vuxSwiperItem);

    Vue.component("switch", vuxSwitch);

    Vue.component("tab", vuxTab);

    Vue.component("tab-item", vuxTabItem);

    Vue.component("tabbar", vuxTabbar);

    Vue.component("tabbar-item", vuxTabbarItem);

    Vue.component("timeline", vuxTimeline);

    Vue.component("timeline-item", vuxTimelineItem);

    Vue.component("tip", vuxTip);

    Vue.component("toast", vuxToast);

    Vue.component("wechat-emotion", vuxWechatEmotion);

    Vue.component("x-button", vuxXButton);

    Vue.component("x-header", vuxXHeader);

    Vue.component("x-img", vuxXImg);

    Vue.component("x-input", vuxXInput);

    Vue.component("x-number", vuxXNumber);

    Vue.component("x-textarea", vuxXTextarea);

    </script>

    <style type="text/css">

    /* 过度动画 */

    .expand-transition {

        transition: all .5s ease;

        background-color: #eee;

        overflow: hidden;

        margin-left: 0;

    }

    /* .expand-enter 定义进入的开始状态 */

    /* .expand-leave 定义离开的结束状态 */

    .expand-enter,

    .expand-leave {

        height: 0px;

        padding: 0 10px;

        opacity: 0;

        margin-left: 100%;

    }

    /*头像样式*/

    .round_photo {

        text-align: center;

        cursor: pointer;

    }

    .round_photo img {

        border: 4px solid #ddddde;

        -moz-border-radius: 59px;

        -webkit-border-radius: 59px;

        border-radius: 59px;

    }

    </style>

</head>

<body style="margin-top: -1em;">

    <div id="app">

        <component :is="currentView" keep-alive></component>

        <my-address></my-address>

    </div>

    <!-- address 演示代码 -->

    <template id="myaddress">

        <group :value.sync="value">

            <x-header>address demo</x-header>

            <address title="地址" :value.sync="value" :list="addressData"></address>

            <cell title="上面value值" :value="value | json"></cell>

            <x-button type="primary" @click="changeData">改变数据</x-button>

        </group>

    </template>

    <script type="text/javascript">

    Vue.component("myAddress", {

        template: "#myaddress",

        props: [

            'title',

            'value'

        ],

        data: function() {

            return {

                addressData: addressData

            }

        },

        methods: {

            changeData: function() {

                console.log('change data of address..');

            }

        }

    });

    </script>

    <!-- home页 -->

    <template id="home">

        <group transition="expand">

            <x-header :left-options="{showBack: false,preventGoBack:true}">Home</x-header>

            <div style="height:250px;"></div>

            <x-button type="primary" style="margin-top: 20px;" @click="goNext('Reg1')">注册</x-button>

            <x-button type="primary" style="margin-top: 20px;" @click="goNext('Login')">登录</x-button>

        </group>

    </template>

    <script type="text/javascript">

    Vue.component("Home", {

        template: "#home",

        methods: {

            goNext: function(view) {

                changeView(view);

            }

        }

    });

    </script>

    <!-- 注册页面 1 -->

    <template id="reg1">

        <group :user_name.sync="user_name" :DOB.sync="DOB" :gender.sync="gender" transition="expand">

            <x-header :left-options="{showBack: true,preventGoBack:true}">注册</x-header>

            <x-input :value.sync="user_name" placeholder="姓名"></x-input>

            <calendar :value.sync="DOB" title="出生日期"></calendar>

            <popup-picker title="性别" :data="gneder_list" :value.sync="gender"></popup-picker>

            <x-button type="primary" style="margin-top: 20px;" @click="goNext">CONTINUE</x-button>

        </group>

    </template>

    <script type="text/javascript">

    Vue.component("Reg1", {

        props: ['user_name', 'DOB', 'gender'],

        template: "#reg1",

        data: function() {

            return {

                gneder_list: [

                    ["男", "女"]

                ]

            }

        },

        methods: {

            goNext: function() {

                changeView('Reg2');

            }

        },

        events: {

            onClickBack: function() {

                console.log('onClickBack');

            }

        }

    });

    </script>

    <!-- 注册页面 1 -->

    <template id="reg1">

        <group :re_email.sync="re_email" :email.sync="email" :password.sync="password" transition="expand">

            <x-header>注册</x-header>

            <div title="修改头像" @click="OpenCamera" class="round_photo"><img style="width:100px;height:100px;" src="img/user.jpg"></div>

            <x-input :value.sync="email" is-type="email" placeholder="邮箱"></x-input>

            <x-input :value.sync="re_email" is-type="email" placeholder="确认邮箱"></x-input>

            <x-input :value.sync="password" placeholder="密码" type="password"></x-input>

            <x-button type="primary" style="margin-top: 20px;" @click="goNext">CONTINUE</x-button>

        </group>

    </template>

    <script type="text/javascript">

    Vue.component('Reg2', {

        props: ['re_email', 'email', 'password'],

        template: '#reg1',

        methods: {

            goNext: function() {

                changeView('Login');

            },

            OpenCamera: function() {

                console.log('using camera..');

            }

        }

    });

    </script>

    <!-- Login 页面 -->

    <template id="login">

        <group :email.sync="email" :log_password.sync="log_password" transition="expand">

            <x-header>登录</x-header>

            <x-input :value.sync="email" is-type="email" placeholder="邮箱"></x-input>

            <x-input :value.sync="log_password" placeholder="密码" type="password"></x-input>

            <x-button type="primary" style="margin-top: 20px;" @click="goNext">CONTINUE</x-button>

        </group>

    </template>

    <script type="text/javascript">

    Vue.component("Login", {

        props: ['email', 'log_password'],

        template: '<group :email.sync="email" :log_password.sync="log_password" transition="expand">' +

            '<x-header>登录</x-header>' +

            '<x-input :value.sync="email" is-type="email" placeholder="邮箱"></x-input>' +

            '<x-input :value.sync="log_password" placeholder="密码" type="password"></x-input>' +

            '<x-button type="primary" style="margin-top: 20px;" @click="goNext">CONTINUE</x-button>' +

            '</group>',

        methods: {

            goNext: function() {

                changeView('Luck');

            }

        }

    });

    </script>

    <!-- Luck主页面 -->

    <template id="luck">

        <group :email="email" :log_password="log_password" transition="expand">

            <x-header>幸运大转盘</x-header>

            <x-input :value.sync="email" is-type="email" placeholder="邮箱"></x-input>

            <x-input :value.sync="log_password" placeholder="密码" type="password"></x-input>

            <x-button type="primary" style="margin-top: 20px;" @click="goNext">CONTINUE</x-button>

        </group>

    </template>

    <script type="text/javascript">

    Vue.component("Luck", {

        props: ['email', 'log_password'],

        template: '#luck',

        methods: {

            goNext: function() {

                changeView('Home');

            }

        }

    });

    </script>

    <!-- 入口 -->

    <script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            currentView: 'Home',

            user_name: "",

            DOB: "",

            gender: [],

            email: "",

            re_email: "",

            password: "",

            log_password: ""

        },

        events: {

            onClickBack: function() {

                console.log('on-click-back...');

            }

        }

    });

    // 在路由处理器中切换页面

    app.currentView = 'Home';

    function changeView(view) {

        app.currentView = view;

    }

    </script>

</body>

</html>

如何优雅的使用vue+vux开发app -03的更多相关文章

如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
如何优雅的使用vue+vux开发app -01
如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...
Vue+cordova开发App
Vue+cordova开发App https://www.imooc.com/article/70062
cordova+vue混合式开发App
应要求第一次使用cordova打包了一下vue写的app项目,期间遇到了不少问题,整理一下流程并记录一下常见问题吧. cordova打包项目需要的环境配置啥的就不具体讲啦,百度一下很多教 ...
用vue快速开发app的脚手架工具
前言多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本 ...
如何优雅的使用vue+Dcloud（Hbuild）开发混合app
如何优雅的使用vue+Dcloud(Hbuild)开发混合app 最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的 ...
基于Html5 Plus + Vue + Mui 移动App 开发（二）
基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...
基于Html5 Plus + Vue + Mui 移动App开发（三）-文件操作（读取、保存、更新数据）
随着手机的发展,现在越来越多的人选择在手机上看书.无论是专业书籍.文学.英语还是网络小说,在手机上看新闻成了人们处理零碎时间的办法.在智能手机里安装一个资讯APP,可以随时.随地查看自己想看的资讯 ...
vue常见开发问题整理
1.(webpack)vue-cli构建的项目如何设置每个页面的title 在路由里每个都添加一个meta [{ path:'/login', meta: { title: '登录页面' }, com ...

随机推荐

C++builder中使用TScrollBox 以后，让scrollBox相应鼠标的上下滑动
1.在窗口的事件里搜索 mouseWheel的方法 2.在.cpp文件里实现下面的代码 void __fastcall TForm1::mouseWheel(TObject *Sender, TShi ...
60行以内写mvc
标题党.几天前看到一个30行写mvc的文章,东施效颦,也动手写了个60行的,功能上略微扩充一些,记录下来,后面有时间可以继续优化. mvc其实是一个观察者模式.view来监听model,所以当mode ...
「2014-5-31」Z-Stack - Modification of Zigbee Device Object for better network access management
写一份赏心悦目的工程文档,是很困难的事情.若想写得完善,不仅得用对工具(use the right tools),注重文笔,还得投入大把时间,真心是一件难度颇高的事情.但,若是真写好了,也是善莫大焉: ...
pundit
gem "pundit" Include Pundit in your application controller: class ApplicationController &l ...
[Python] Removing a non-empty folder
Removing a non-empty folder You will get an ‘access is denied’ error when you attempt to use os.remo ...
mybatis按时间条件搜索
dto接受前台字符串时间格式 @DateTimeFormat(pattern = "yyyy-MM-dd") private Date contractStartDt; @Date ...
EXCEL设置选中单元格样式
你想这样啊,试试这段代码看行不:右键工作表名称--查看代码,在空白处粘贴就可以 Private Sub Worksheet_SelectionChange(ByVal Target As Range) ...
DateTime与DateTime?赋值问题以及null类型的如何赋值问题
解决方案: //主要用到向下兼容原理,DateTime?继承于DateTime: string req = "为字符串的参数"; DateTime? dt = null; Date ...
css各项水平居中
当被设置元素为块状元素时用text-align:center就不起作用了,这也分两种情况,定宽块状元素和不定宽块状元素. 一.定宽块状元素:快状元素的宽度width为固定值,之后我们可以将左右marg ...
C++容器之Vector
vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被认为是一个容器,是因为它能够像容器一样存放各种类型的对象,简单地说vect ...

如何优雅的使用vue+vux开发app -03

如何优雅的使用vue+vux开发app -03

如何优雅的使用vue+vux开发app -03的更多相关文章

随机推荐

热门专题