一、下载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. Python学习笔记(二)Sublime Text 3 安装Package Control

    原来Subl3安装Package Control很麻烦,现在简单的方法来了 一.简单的安装方法 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: ...

  2. (实战)多边形,梯形盒阴影css实现技巧

    一般情况下,我们给块状元素(四边形)添加阴影样式,直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就可以了,但是总有一些需求是那么的特别,例如下图: ...

  3. 关于linux中移动目录和到指定目录和移动目录中的数据到指定目录

    #这里表示将目录node-v12.13.1-linux-x64移动到/usr/local/中重命名为node,所以node目录可以不存在[root@alone ~]# mv node-v12.13.1 ...

  4. JS - 事件循环和任务队列

    栈.堆和队列 栈:函数调用形成栈 堆:对象的内容分配在堆中 队列:一个 JavaScript 运行时包含了一个待处理的消息队列.在事件循环期间依次处理队列中的消息 事件循环 之所以称之为事件循环,是因 ...

  5. 测开之路一百零七:bootstrap排版

    引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...

  6. 《计算机程式设计》Week2 课堂笔记

    本笔记记录自 Coursera课程 <计算机程式设计> 台湾大学 刘邦锋老师 Week2 Control Structure 2-1 If-then-else if then 判断 if ...

  7. spring boot 整合 RabbitMQ 错误

    1.错误 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'org.spr ...

  8. 20190827 On Java8 第十四章 流式编程

    第十四章 流式编程 流的一个核心好处是,它使得程序更加短小并且更易理解.当 Lambda 表达式和方法引用(method references)和流一起使用的时候会让人感觉自成一体.流使得 Java ...

  9. Symmetric Tree(对称二叉树)

    来源:https://leetcode.com/problems/symmetric-tree Given a binary tree, check whether it is a mirror of ...

  10. SSM框架—Spring+SpringMVC+MyBatis

    1.环境搭建 1.1概念 Spring是一个Java应用的开源框架,Bean/Context/Core/IOC/AOP/MVC等是其重要组件,IOC控制反转,AOP面向切面编程,各种注入方式,实现方式 ...