-
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;
}
查看全部 -
this.list.push=查看全部
舉報