系列文章目录
第一章
论vue3.0和vue2.0区别之编程方式及例子详解
第二章
同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令
第三章
vue3.0项目实战 - ElementUI框架版
第四章
【TypeScript】在vue3中遇到的问题及解决方案,未完待续
第五章
vue3.0项目实战系列文章 - 登录页面
第六章
vue3.0项目实战系列文章 - 使用周期函数
目录
系列文章目录
前言
一、关于setup?
1.Vue3 的一大特性函数 ---- setup
2.为什么使用setup?
二、登录页面两种写法
1.展示
2.普通的
3.使用单文件组件
总结
前言
坑千千万,踩好才有完美的框架~
一、关于setup?
1.Vue3 的一大特性函数 ---- setup
setup函数是处于 生命周期函数 beforeCreate 和 Created 之前的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的setup函数是 Composition API(组合API)的入口在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法在模板中使用
2.为什么使用setup?
data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而,当我们的组件变得更大时,逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解,尤其是对于那些一开始就没有编写这些组件的人来说简直是噩梦。而通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑了。写一个大型组件时,逻辑关注点的列表很长,不利于维护和阅读;所以需要把一个逻辑关注点的代码收集在一起会更好,由此诞生组合式API,即vue中用到的setup。
二、登录页面两种写法
1.展示
一定要明确好使用哪套,两套并不是内容、特性通用!
2.普通的
一个组件选项,在组件被创建之前,props 被解析之后执行。它是组合式 API 的入口。注意此种写法需要return
export default {
setup() {
}
}
整体代码
Tips : 用户名和密码随便填。
import {
ref,
reactive
} from "vue";
import {
useStore
} from "vuex";
import {
useRouter
} from "vue-router";
import {
ElMessage
} from "element-plus";
import {
roleList
} from "../request/api.js";
export default {
setup() {
const router = useRouter();
const ruleForm = reactive({
username: "admin",
password: "123123",
});
const rules = {
username: [{
required: true,
message: "请输入用户名",
trigger: "blur",
}],
password: [{
required: true,
message: "请输入密码",
trigger: "blur"
}],
}; // 一个普通对象,修改后不会被proxy拦截,进而页面也不会动态更新
const ruleFormRef = ref('');
const submitForm = async (formEl) => {
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
submitFormLink();
} else {
ElMessage.error("登录失败");
return false;
}
});
};
// 使用响应式函数reactive构建proxy响应式对象
const params = reactive({
pageNum: 1,
pageSize: 10,
systemFlag: 'water'
})
const submitFormLink = () => {
roleList(params).then(res => {
if (res.code == 0) {
ElMessage({
showClose: true,
message: '登录成功',
type: 'success',
})
// ElMessage.success('登录成功')
localStorage.setItem("ms_username", ruleForm.username);
router.push("/");
} else if (res.code !== 0) {
ElMessage.error(res.msg)
}
})
};
const store = useStore();
store.commit("clearTags");
// 使用时,要把对象return出去,才能在template中使用
return {
ruleForm,
rules,
ruleFormRef,
submitForm,
params,
submitFormLink
};
},
};
3.使用单文件组件
当使用
动态组件:由于组件被引用为变量而不是作为字符串键来注册的,在
整体代码
Tips : 用户名和密码随便填。
import {
ref,
reactive
} from "vue";
import {
useStore
} from "vuex";
import {
useRouter
} from "vue-router";
import {
ElMessage
} from "element-plus";
import {
roleList
} from "../../request/api.js";
const router = useRouter();
const ruleForm = reactive({
username: "admin",
password: "123123",
});
const rules = {
username: [{
required: true,
message: "请输入用户名",
trigger: "blur",
}],
password: [{
required: true,
message: "请输入密码",
trigger: "blur"
}],
}; // 一个普通对象,修改后不会被proxy拦截,进而页面也不会动态更新
const ruleFormRef = ref('');
const submitForm = async (formEl) => {
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
submitFormLinkFree();
} else {
ElMessage.error("登录失败");
return false;
}
});
};
// 使用响应式函数reactive构建proxy响应式对象
const params = reactive({
pageNum: 1,
pageSize: 10,
systemFlag: 'water'
})
const submitFormLink = () => {
roleList(params).then(res => {
if (res.code == 0) {
ElMessage({
showClose: true,
message: '登录成功',
type: 'success',
})
// ElMessage.success('登录成功')
localStorage.setItem("ms_username", ruleForm.username);
router.push("/");
} else if (res.code !== 0) {
ElMessage.error(res.msg)
}
})
};
const submitFormLinkFree = () => {
ElMessage({
showClose: true,
message: '登录成功',
type: 'success',
})
localStorage.setItem("ms_username", ruleForm.username);
router.push("/");
};
const store = useStore();
store.commit("clearTags");
.login-wrap {
position: relative;
width: 100%;
height: 100%;
background: url(../../assets/img/login-bg.jpg) no-repeat;
background-size: 100% 100%;
}
.ms-title {
width: 100%;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
border-bottom: 1px solid #ddd;
}
.ms-login {
position: absolute;
left: 50%;
top: 50%;
width: 350px;
margin: -190px 0 0 -175px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.3);
overflow: hidden;
}
.ms-content {
padding: 30px 30px;
}
.login-btn {
text-align: center;
}
.login-btn button {
width: 100%;
height: 36px;
margin-bottom: 10px;
}
.login-tips {
font-size: 12px;
line-height: 30px;
color: #fff;
}
总结
以上就是今天要讲的内容,本文仅仅简单介绍了登录页面的使用,未完待续。
推荐阅读
发表评论