文末
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。
name: ‘Login’,
component: Login
}
]
})
当登录成功时的路由切换
3.登录界面的实现
由于需求分析里说可以使用element-ui 实现。
所以就用了,但是不知道为什么,修改不了ele-input的背景颜色,所以在输入框的实现我还是用了原生的input。
其中登陆界面的功能如下:
(1)密码输入框有 两个功能,当用户输入时候如果坚持caps lock处于开启状态。 右侧出现提示 caps lock is on
(2) 当用户点击右侧的眼睛图标的时候, 可以明文和密文的方式显示密码
(3)点击login的时候 如果用户名或密码为空,需要把 对应的输入框变红,并且该输入框下方提示提示用户名或密码不能为空
(4)完成输入后, 需要把数据通过ajax(建议使用fetch或者axios第三方库)发送出去到服务器端,后台检测用户名和密码 ,用户名和密码admin/P@ss1234表示登陆成功, 页面切换为成功页面如果不是,在当前页面提示用户名和密码错误
(5)切换页面的时候浏览器不可以刷新, 参考vue-router
(6)成功页面需要显示欢迎 username
登陆, 但是用户名不可以是hardcode的。参考vuex.
这里就不再多解释了,直接先上代码:
Login Form
![](../../static/img/user.png)
![](../../static/img/lock.png)
<input class=“my-input” placeholder=“密码” type=“password”
v-model=“userForm.password” ref=“password” @keyup=“onHCapitalize($event)”/>
<img src=“…/…/static/img/eyesclosed.png” id=“eyes-img” ref=“eyes” @click=“show()”>
大写锁已打开
<el-button type=“primary” @click.native.prevent=“login(‘userForm’)”>Login
4.axios的使用过程
1.在项目cmd输入npm install vue-axios --save 安装axios
2.安装成功后,在main.js页面引用
在组件调用
5.vuex使用
科普:什么是vuex?vuex 是一个专门为vue.js应用程序开发的状态管理模式。
vuex中,有默认的五种基本的对象:
state:存储状态(变量)
getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 s o t r e . g e t t e r s . f u n ( ) m u t a t i o n s : 修 改 状 态 , 并 且 是 同 步 的 。 在 组 件 中 使 用 sotre.getters.fun() mutations:修改状态,并且是同步的。在组件中使用 sotre.getters.fun()mutations:修改状态,并且是同步的。在组件中使用store.commit(’’,params)。这个和我们组件中的自定义事件类似。
actions:异步操作。在组件中使用是$store.dispath(’’)
modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。
本次的开发只用到了state,mutations。
下载安装vuex
(1) 通过此命令安装 npm install vuex --save
(2)新建如图
引用
在main.js引用
index.js
import Vue from ‘vue’
import Vuex from ‘vuex’
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
state:{
//存放的键值对就是所要管理的状态
name:‘这位可爱的游客’
},
mutations: {
前端面试题汇总
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总