v-for :key=“index" 提升性能, 但频繁排序用index也不好，具体待查

v-if v-show 区别

watch 侦听器

computed 

v-on:click @click  绑定事件

v-bind:title :title  绑定属性

v-text="msg" v-html="msg" 

v-model  双向绑定

dock1111

v-if  控制dom元素存在与否

v-show控制dom元素展示与否

v-for控制一组数组循环展示，类似于for循环

<template>

<!-- 引入elementui的container布局 -->

<el-container class="home-container">

<!-- 头部 -->

<el-header>

<div>

<img src="../../assets/img/HomeLogo.jpg" alt />    

<span>我的管理平台</span>

</div>

<el-button type="info" @click="logout">退出</el-button>

</el-header>

<!-- 中间主体 -->

<el-container>

<!-- 侧边栏 -->

<el-aside width="200px">

<el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff">

<!-- 一级菜单 -->

<el-submenu index="1">

<template slot="title">

<i class="el-icon-location"></i>

<span>导航一</span>

</template>

<!-- 二级菜单 -->

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

<template slot="title">

<i class="el-icon-location"></i>

<span>二级菜单</span>

</template>

</el-menu-item>                                  

</el-submenu>    

</el-menu>

</el-aside>

<!-- 主体内容 -->

<el-main>Main</el-main>

</el-container>

</el-container>

</template>

<script>

export default {

date(){

return {

// 菜单列表

menuList:[],

}

},

// onload 事件

created(){

// 查询menuList

this.getMenuList();

},

methods: {

logout(){

window.sessionStorage.clear(); // 清除session

this.$router.push("/"); // 跳转到登录页面

},

// 获取导航菜单方法

async getMenuList(){

const {data:res} = await this.$http.get("menus");

console.log(res)

}

}

}

</script>

<style scoped>

.home-container{

height: 100%;

}

.el-header{

background-color: #373d41;

display: flex;

justify-content: space-between;  /* 左右贴边*/

padding-left: 0%;   /* 左边界*/

color: #fff;

font-size: 20px;

/* display: flex; */

align-items: center;

}

.el-aside{

background-color: #333744;

}

.el-main{

background-color: #eaedf1;

}

img{

width:55px;

height:55px

}

</style>

<template>

<!-- 引入elementui的container布局 -->

<el-container class="home-container">

<!-- 头部 -->

<el-header>

<div>

<img src="../../assets/img/HomeLogo.jpg" alt />    

<span>我的管理平台</span>

</div>

<el-button type="info" @click="logout">退出</el-button>

</el-header>

<!-- 中间主体 -->

<el-container>

<!-- 侧边栏 -->

<el-aside width="200px">

<el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff">

<el-submenu index="1">

<template slot="title">

<i class="el-icon-location"></i>

<span>导航一</span>

</template>

<el-menu-item index="1-1">选项1</el-menu-item>

</el-submenu>    

</el-menu>

</el-aside>

<!-- 主体内容 -->

<el-main>Main</el-main>

</el-container>

</el-container>

</template>

<script>

export default {

methods: {

logout(){

window.sessionStorage.clear(); // 清除session

this.$router.push("/"); // 跳转到登录页面

}

}

}

</script>

<style scoped>

.home-container{

height: 100%;

}

.el-header{

background-color: #373d41;

display: flex;

justify-content: space-between;  /* 左右贴边*/

padding-left: 0%;   /* 左边界*/

color: #fff;

font-size: 20px;

/* display: flex; */

align-items: center;

}

.el-aside{

background-color: #333744;

}

.el-main{

background-color: #eaedf1;

}

img{

width:55px;

height:55px

}

</style>

<template>

<div class="login-container">

<div class="login-ck">登录系统</div>

<div class="login-box">

<!-- 表单块 -->

<el-form ref="loginForm"

:rules="loginRules"

:model="loginForm"

class="login-form"

label-width="0">

<!-- 用户名 -->

<el-form-item prop="username">

<el-input v-model="loginForm.username"></el-input>

</el-form-item>

<!-- 密码 -->

<el-form-item prop="password">

<el-input v-model="loginForm.password" type="password"></el-input>

</el-form-item>

<!-- 登录按钮 -->

<div class="login-btn">

<el-button type="primary" @click="loginDr()">登录</el-button>

<el-button type="info" @click="loginReset()">重置</el-button>

</div>

</el-form>

</div>

</div>

</template>

<script>

export default {

data(){

return{

loginForm:{

username:"201437",

password:"lt201437",

},

loginRules:{

username:[

{required:true, message:"请输入用户名称", trigger:"blur"},

{min:3, max:15, message:"长度在3到15个字节", trigger:"blur"}

],

password:[

{required:true, message :"请输入密码", trigger :"blur"},

{min:6, max:16, message:"长度在3到16个字节", trigger:"blur"}

],

},

};

},

methods: {

// 重置表单内容

loginReset(){

this.$refs.loginForm.resetFields();

},

// 登录方法

loginDr(){

// 验证校验规则

this.$refs.loginForm.validate(async valid => {

if(!valid) return; // 验证失败

// alert("ok!!!")

const {data:res} = await this.$http.post("Login",this.loginForm); // 访问后台

// console.log(res);

if(res.flag == "hello world!!!"){ // 校验是否相等

this.$message.success("成功！！！"); // 成功

window.sessionStorage.setItem("username", res.username); // 存储res里的username对象

this.$router.push({path:"/home"}); // 跳转首页

}else{

this.$message.error("失败！！！"); // 失败

}

})

}

}

}

</script>

<style scoped>

.login-container{

position: relative;

background:url(../../assets/img/BackGround.jpg);

background-attachment: fixed;

background-position: center;

background-size: cover;

opacity: 50%;

width:100%;

height:100%;

}

.login-ck{

position: absolute;

top:50%;

width:100%;

margin-top: -200px;

text-align: center;

font-size: 30px;

font-weight: 600;

color:#fff;

}

.login-box{

position: absolute;

left: 50%;

top:50%;

width:300px;

height:160px;

margin-left: -190px;

margin-top:-130px;

padding: 40px;

border-radius: 5px;

background-color:#fff

}

.login-btn{

text-align: left;

}

.login-btn button{

width: 47%;

height:36px;

}

</style>

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import "babel-polyfill"

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import './assets/img/loginBackground.jpg'

import './assets/img/BackGround.jpg'

import './assets/css/global.css'

// 导入axios

import axios from 'axios'

// 挂载axios

Vue.prototype.$http = axios

// 设置访问根路径

axios.defaults.baseURL = "http://localhost:9000"

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App },

template: '<App/>'

})

import Vue from 'vue'

import Router from 'vue-router'

// import HelloWorld from '@/components/HelloWorld'

import Login from '@/pages/Login/login'

import Home from '@/pages/Home/home'

import VueRouter from 'vue-router';

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'login',

component: Login

},

{

path:'/home',

name: 'home',

component: Home

}

]

})

/*全局样式表*/

html,

body,

#app{

height: 100%;

margin: 0;

padding: 0;

}