一、下载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. Move Controller UE4键位

    工作中需要,就总结了一下,如下图:

  2. CG-CTF | MD5

    渣渣今天写了一题misc,第一次学习md5的python写法,赶紧记录一波 背景知识: import hashlib md51=hashlib.md5() md52=hashlib.md5() # [ ...

  3. linux 杀掉僵尸进程 (zombie process, defunct)

    本文说明为什么会出现僵尸进程 (zombie process, defunct),以及如何杀掉僵尸进程 1. 为什么有僵尸进程 僵尸进程出现在父进程没有回收子进程的 PCB 的时候,这个时候子进程已经 ...

  4. Redis hash 是一个 string 类型的 field 和 value 的映射表.它的添加、删除操作都是 O(1)（平均）。

    2.3 hashes 类型及操作 Redis hash 是一个 string 类型的 field 和 value 的映射表.它的添加.删除操作都是 O(1)(平均).hash 特别适合用于存储对象.相 ...

  5. 如何吸引用户打开自己发送的EDM邮件

    一般来说,邮件发送到用户的收件箱,但用户不一定会阅读.因为每个用户收到的邮件都很多.那么,究竟应该如何吸引读者打开自己的EDM邮件呢? 只有当用户认识并信任发件人的时候,此时邮件的打开率是最高的,可以 ...

  6. 错误 warning: LF will be replaced by CRLF in README.md.

    问题类型 windows中的换行符为 CRLF, 而在Linux下的换行符为LF,所以在执行add . 时出现提示:warning: LF will be replaced by CRLF in RE ...

  7. python-笔记（六）模块操作以及常用模块简介

    模块.包 什么是模块? 模块实质上就是一个python文件,它是用来组织代码的,意思是说把python代码写到里面,文件名就是模块的名称,例如:model.py model就是模块名称. 什么是包? ...

  8. 读取资源中的GIF文件相应像素宽高度

    代码参考了如下网页的实现: https://www.cnblogs.com/zy791976083/p/9921069.html 整理成一个函数: BOOL GetResGifSize(long nR ...

  9. 【Unity Shader】---CG标准函数库

    1.CG标准函数库 和C的标准函数库类似,CG也提供了一系列的内建函数库,这些函数用于计算数学上的通用计算或算法(如纹理映射).例如:求取入射光线的反射光线用Reflect函数,求折射光线用Refla ...

  10. 使用K近邻算法改进约会网站的配对效果

    1 定义数据集导入函数 import numpy as np """ 函数说明:打开并解析文件,对数据进行分类:1 代表不喜欢,2 代表魅力一般,3 代表极具魅力 Par ...