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

很明显下面是个错误的示范：

<!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>

</head>

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

    <div id="app">

        <!-- <h1>Demo</h1>

        <p> -->

            <!-- 使用指令 v-link 进行导航。 -->

           <!--  <a v-link="{ path: '/' }">Register 1</a>

            <a v-link="{ path: '/reg2' }">Register 2</a>

            <a v-link="{ path: '/login' }">Login</a>

            <a v-link="{ path: '/address' }">Address</a>

        </p> -->

        <!-- 路由外链 -->

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

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

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

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

  2. 如何优雅的使用vue+vux开发app -02

    如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...

  3. Vue+cordova开发App

    Vue+cordova开发App https://www.imooc.com/article/70062

  4. cordova+vue混合式开发App

    应要求第一次使用cordova打包了一下vue写的app项目,期间遇到了不少问题,整理一下流程并记录一下常见问题吧.        cordova打包项目需要的环境配置啥的就不具体讲啦,百度一下很多教 ...

  5. 用vue快速开发app的脚手架工具

    前言 多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本 ...

  6. 如何优雅的使用vue+Dcloud（Hbuild）开发混合app

    如何优雅的使用vue+Dcloud(Hbuild)开发混合app 最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的 ...

  7. 基于Html5 Plus + Vue + Mui 移动App 开发（二）

    基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...

  8. 基于Html5 Plus + Vue + Mui 移动App开发（三）-文件操作（读取、保存、更新数据）

      随着手机的发展,现在越来越多的人选择在手机上看书.无论是专业书籍.文学.英语还是网络小说,在手机上看新闻成了人们处理零碎时间的办法.在智能手机里安装一个资讯APP,可以随时.随地查看自己想看的资讯 ...

  9. vue常见开发问题整理

    1.(webpack)vue-cli构建的项目如何设置每个页面的title 在路由里每个都添加一个meta [{ path:'/login', meta: { title: '登录页面' }, com ...

随机推荐

  1. Method not found : Void System.Data.Objects.ObjectContextOptions.set_UseConsistentNullReferenceBehavior(Boolean)

    找不到方法:“Void System.Data.Objects.ObjectContextOptions.set_UseConsistentNullReferenceBehavior(Boolean) ...

  2. Linux netstat命令详解

    Linux netstat命令详解 一  简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多 ...

  3. 原生JavaScript实现滚动条

    没事找事,明明overflow:scroll|auto就可以,只是难看点(实际上css也能设置).只当练习写拖拽.监听事件.位置检测了. 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根 ...

  4. 搜索引擎 ElasticSearch 之 步步为营2 【基础概念】

    在正式学习 ElasticSearch 之前,首先看一下 ElasticSearch 中的基本概念. 这些概念将在以后的章节中出现多次,所以花15分钟理解一下是非常值得的. 英文好的同学,请直接移步官 ...

  5. js中,var 修饰变量名和不修饰的区别

    js中 允许在定义变量的时候 不加var 修饰符.js会在当前作用域下寻找上下文是否定义了此变量, 如果没有找到则会为这个变量分配内存.当且将其视为window的成员. 也就是全局变量. 如果加了va ...

  6. ubuntu安装packet提示重复冲突问题

    今天装个zip出现: dpkg: error processing archive /var/cache/apt/archives/libc6-dev-i386_2.19-0ubuntu6.5_amd ...

  7. tomcat启动指定项目

    看一下server.xml,conf/localhost/,web.xml是否配置了其他的WEBAPP应用,但实际地址已经被移除,清空WORK目录试试 http://blog.163.com/mous ...

  8. MFC学习随笔（1）

    最近在学习用MFC编写一个简单的界面.其实MFC并不是十分复杂的,经过一段时间的熟悉就可以实现许多基础功能.但是在编写的过程中,经常会遇到林林总总的bug,让人摸不到头脑.今天记录一个过去没有注意过的 ...

  9. 你好，欢迎来到我的博客，我是博主royalmice1

    你好,欢迎来到我的博客,我是博主royalmice

  10. 初入liunx的一些基本的知识

    本系列的博客来自于:http://www.92csz.com/study/linux/ 在此,感谢原作者提供的入门知识 这个系列的博客的目的在于将比较常用的liunx命令从作者的文章中摘录下来,供自己 ...