一、下载vue2.x，下载element-ui.js以及css

二、html文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/element-ui.css"/>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css">

            body{

                margin:0;

                padding:0;

            }

            .el-container{

                max-width:1200px;

                margin:0 auto;

            }

            .el-menu-item{

                width:25%;

                text-align:center;

                font-size:1.075rem;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <el-container>

              <el-header>

                  <el-menu :default-active="common.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

                    <el-menu-item index="0">section1</el-menu-item>

                    <el-menu-item index="1">section2</el-menu-item>

                    <el-menu-item index="2">section3</el-menu-item>

                    <el-menu-item index="3">section4</el-menu-item>

                  </el-menu>

              </el-header>

              <el-main>

                  <section v-show="common.activeIndex=='0'">main1</section>

                  <section v-show="common.activeIndex=='1'">main2</section>

                  <section v-show="common.activeIndex=='2'">main3</section>

                  <section v-show="common.activeIndex=='3'">main4</section>

              </el-main>

            </el-container>

        </div>

        <script type="text/javascript">

            ;(function(){

                new Vue({

                    el:"#app",

                    data(){

                        return {

                            common:{

                                activeIndex:"0",

                            },

                            main1:{

                            },

                            main2:{

                            },

                            main3:{

                            },

                            main4:{

                            },

                        }

                    },

                    methods:{

                        handleSelect(key, keyPath) {

                            const hash = ["section1","section2","section3","section4"];

                            window.location.hash = hash[parseInt(key)];

                            this.common.activeIndex = key;

                        }

                    },

                    created() {

                        let hash = window.location.hash;

                        const hashArr = ["#section1","#section2","#section3","#section4"];

                        let hashIndex = hashArr.indexOf(hash);

                        this.common.activeIndex = (hashIndex==-1?0:hashIndex).toString();

                    },

                    mounted() {

                    }

                })

            })();

        </script>

    </body>

</html>

基于cdn方式的vue+element-ui的单页面架构的更多相关文章

  1. vue踩坑：vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  2. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  3. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  4. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  5. 使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

    世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...

  6. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  7. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  8. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  9. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

随机推荐

  1. 支持向量机(一)----总述（点到平面的距离，Lagrange函数，Lagrange对偶）

    概述:在对支持向量机的学习和使用过程中,遇到了许许多多的问题,通过查阅各种资料,也是逐一攻克了遇到的问题.感悟颇多,写此博文的目的是想以一个学习者的身份从一个刚接触支持向量机的角度去记录模型推到过程中 ...

  2. SpringBoot项目属性配置-第二章

    SpringBoot入门 1. 相信很多人选择Spring Boot主要是考虑到它既能兼顾Spring的强大功能,还能实现快速开发的便捷.我们在Spring Boot使用过程中,最直观的感受就是没有了 ...

  3. 170815-关于Session知识点

    Cookie:实际上就是一个头.               服务器会创建Cookie,并且将Cookie以一个响应头的形式发送给浏览器               浏览器收到Cookie以后,会保存 ...

  4. vux组件样式大合集

    1.Actionsheet 2.Alert 3.badge 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. ...

  5. Mybatis一对一关联查询

    有两张表,老师表teacher和班级表class,一个class班级对应一个teacher,一个teacher对应一个class 需求是根据班级id查询班级信息(带老师的信息) 创建teacher和c ...

  6. php 判断访问是否是手机或者pc

    php代码 function isMobile() { $user_agent = $_SERVER['HTTP_USER_AGENT']; $mobile_agents = Array(" ...

  7. Ehrenfeucht–Fraïssé game back-and-forth games

    w https://en.wikipedia.org/wiki/Ehrenfeucht–Fraïssé game

  8. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_08 转换流_5_InputStreamReader介绍&代码实现

    强转chart:类型 GBK

  9. linux下mysql 5.7编写存储过程一直报错说Mysql server version for the right syntax

    首先看下可以正确执行的. 再来看保存时提示出错的 我唯一的区别就是在传参的类型那里有了变化,然而,报错如下 难道是我的类型不支持了吗,最后在一个无意识操作下,直接在类型里面限定长度. 可以运行啦.经过 ...

  10. 分布式 vs 集群 主从 vs 集群

      理解 分布式 一个业务拆分成多个子业务,部署在不同的服务器上 集群 同一个业务部署在多个服务器上   更新 主从 服务器之间更新是异步的,从服务器可能和主服务器不一致 集群 更新是同步的,数据节点 ...