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

太过爱你忘了你带给我的痛 2022-03-28 10:36 372阅读 0赞

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

很明显下面是个错误的示范：  
![213419-20160628125928718-1838409055.png][]

<!DOCTYPE html>
    <html>
    <head>
        <title>vue-vux</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" href="bower_components/vux/dist/vux.css">
        
        <script src="bower_components/vue/dist/vue.js"></script>
        
        <script src="bower_components/vue-router/dist/vue-router.js"></script>
        
        <script src="bower_components/jquery/jquery.js"></script>
        
        <script src="bower_components/vux/dist/components/actionsheet/index.js"></script>
        <script src="bower_components/vux/dist/components/address/index.js"></script>
        
        <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>
    </head>
    <body style="margin-top: -1em;">
        <div id="app">
            
                
               
            
            <router-view></router-view>
        </div>
        <style type="text/css">
        .v-link-active {
            color: blue;
        }
        </style>
        <script type="text/javascript">
        var Reg1 = Vue.extend({
            template: 
                '<group v-if="show">' +
                    '<x-header :left-options="{showBack: false}">注册</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="$router.go(\'/reg2\')">CONTINUE</x-button>' +
                '</group>',
            data: function() {
                return {
                    show: true,
                    user_name: "",
                    DOB: "1986-12-07",
                    gender: [],
                    gneder_list: [["男", "女"]]
                }
            }
        });
    
        var Reg2 = Vue.extend({
            template: 
                '<group v-if="show">' +
                    '<x-header>注册</x-header>' +
                    '<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="$router.go(\'/login\')">CONTINUE</x-button>' +
                '</group>',
            data: function() {
                return {
                    show: true,
                    user_name: "",
                    DOB: "1986-12-07",
                    gender: "",
                    gneder_list: ["男", "女"]
                }
            }
        });
    
        var Login = Vue.extend({
            template: 
                '<group v-if="show">' +
                    '<x-header>登录</x-header>' +
                    '<x-input :value.sync="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="$router.go(\'/\')">CONTINUE</x-button>' +
                '</group>',
            data: function() {
                return {
                    show: true
                }
            },
            methods: {
    
            }
        });
    
        var Address = Vue.extend({
            template: 
                '<group v-if="show">' +
                    '<x-header>address demo</x-header>' +
                    '<address :title="title" :value.sync="value" :list="addressData"></address>' +
                    '<cell title="上面value值" :value="value | json"></cell>' +
                    '<address :title="title2" :value.sync="value2" raw-value :list="addressData"></address>' +
                    '<address title="二级省市" :value.sync="value3" raw-value :list="addressData"></address>' +
                    '<x-button type="primary" @click="changeData">改变数据</x-button>' +
                '</group>',
            data: function() {
                return {
                    show: true,
                    title: '默认为北京',
                    value: [],
                    title2: '手动设定',
                    value2: ['广东省', '深圳市', '南山区'],
                    value3: ['海南省', '儋州市', '--'],
                    addressData: addressData
                }
            },
            methods: {
                changeData() {
                    this.value2 = ['430000', '430400', '430407']
                },
            }
        });
    
        var App = Vue.extend({});
        var router = new VueRouter();
        router.map({
            '/'/*'/reg1'*/: {
                component: Reg1
            },
            '/reg2': {
                component: Reg2
            },
            '/login': {
                component: Login
            },
            '/address': {
                component: Address
            }
        });
        router.start(App, '#app');
        </script>
    </body>
    
    </html>

[213419-20160628125928718-1838409055.png]: /images/20220328/53a93539088648cb97c531a885b2f0cd.png