一、下载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. 【bzoj3038】上帝造题的七分钟2

    *题目描述: XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. “第一分钟,X说,要有数列,于是便给定了一个正整数数列. 第二分钟,L说,要能修改,于是便有了对一段数中每个数都开平 ...

  2. input 的 type 等于 file

    高版本浏览器由安全问题没法获得文件的绝对路径, 因此使用浏览器自制播放器只能使用其他的手段实现. 使用相对路径, 把浏览器与文件放在同一路径下即可使用.通用性受到限制.

  3. C++用参数返回结果与用返回值返回结果的思考

    /*** *xvkBuffer作为参数比写为返回值的好处是: *1,xvkBuffer可以是堆变量或栈变量,若写为返回值则只能是堆上申请,因为必须保证它的永久性 *2,xvkBuffer或作为栈变量返 ...

  4. React-Native 之 GD （五）属性声明和属性确认 及 占位图

    1.在 React-Native 创建的自定义组件是可以复用的,而开发过程中一个组件可能会由多个人同时开发或者多个人使用一个组件,为了让开发人员之间减少沟通成本,我们会对某些必要的属性进行属性声明,让 ...

  5. PJSIP Socket 模型

    前些日子为解决项目中问题调试到PJSIP Socket收发数据部分 ,好记性不如烂笔头,记录下 PJSIP 使用的Socket 模型 ,以备后用. 不同平台下PJSIP采用不同的 Socket模型,W ...

  6. HTML-空格字符实体

      不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格.在HTML中,如果你用空格键产生此空格,空格是不会累加的(只 ...

  7. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_1_File类的概述

  8. unittest框架扩展（自动生成用例）自动化-上

    一.思想: 基于数据驱动和代码驱动结合的自动化测试框架. 二.自动化测试框架步骤: 1.获取用例,用例格式:.ymal 2.调用接口 3.校验结果 4.发送测试报告 5.异常处理 6.日志模块 三.基 ...

  9. 一个有关Golang Deferred Function 执行顺序的问题

    先看一下一段关于defer的解释, 引自<Go程序设计语言> Syntactically, a defer statement is an ordinary function or met ...

  10. java配置详解

    JAVA_HOMED:\JavaTools\Java\jdk1.7.0_80\ D:\JavaEnvironment\Java\jdk1.7.0_71D:\JavaEnvironment\Java\j ...