vue简单概括及登录界面实现

一、Vue概述
Vue是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（[SPA]）提供驱动。（百度百科）

​

1、认识前端

1. 前端三要素

• HTML(结构)
• CSS（表现样式）
• Javascript（行为）

2、CSS预处理器
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。“用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的css文件，以供项目使用 ”
常用css预处理器： SASS、LESS（基于nodejs，常用）
JavaScript框架
JQuery：熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能
Angular：Google收购的前端框架，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念。
React：Facebook出品，高性能的JS前端框架，特点是提出了新概念（虚拟DOM）来减少真实dom操作，在内存中模拟DOM操作
Vue：一款渐进式JavaScript框架，如实现模块化开发、路由、状态管理等新特性 ，结合了Angular、React的优点。
Axios：前端通信框架
JavaScript构建工具
Babel
WebPack
 

二、实现登陆界面 

1、vue实现登录界面 

 

相关代码： 

<template>
    <div class="content"> 
          <div class="content-box">
             <vue-particles
                   class="login-bg"
                   color="#f4f4f4"
                   :particleOpacity="0.7"
                   :particlesNumber="100"
                   shapeType="circle"
                   :particleSize="4"
                   linesColor="#f4f4f4"
                   :linesWidth="1"
                   :lineLinked="true"
                   :lineOpacity="0.4"
                   :linesDistance="150"
                   :moveSpeed="3"
                   :hoverEffect="true"
                   hoverMode="grab"
                   :clickEffect="true"
                   clickMode="push"
              />
              <div class="content-login">
                     <div class="content-login-info">
                         <div class="content-title">Login</div>
                         <van-form ref="loginForm">
                         <div style="margin:25px 0px">
                             <van-field
                            v-model="username"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                          />
                         </div>
                         <van-field
                            v-model="password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                          />
                         <div style="margin: 26px;">
                             <van-button round block type="primary" @keyup.enter.native="loginBtn" @click="loginBtn">登录</van-button>
                         </div>
                         <div class="content-bottom">
                             <div @click="topassword">忘记密码？</div>
                             <div @click="toregister">注册</div>
                         </div>
                   </van-form>
                     </div>
              </div>
          </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
              username: '',
              password: '',
              loginData:[]
        }
    },
    methods:{
         loginBtn() {
             this.$refs.loginForm.validate().then(()=>{
                 console.log(JSON.parse(localStorage.getItem('userinfo')))
                   
                   if(JSON.parse(localStorage.getItem('userinfo'))==null){
                       this.$toast.fail('还未注册！')
                   }else{
                       this.loginData=JSON.parse(localStorage.getItem('userinfo'))
                       let lis = Array.prototype.slice.call(this.loginData);
                       if(lis&&lis.length>0){
                       lis.forEach((item)=>{
                          if(this.username == item.name && this.password == item.password){
                                 this.$toast.success('登录成功!')
                                 this.$router.push({name:'Home'})
                          }
                          if(this.username == item.name && this.password !== item.password){
                                 this.$toast.fail('用户密码不对!')
                          }
                          if(this.username !== item.name && this.password == item.password){
                                 this.$toast.fail('用户名字不对!')
                          }   
                       })
                   }
                   }
             })
            },
         toregister(){
                   this.$router.push({name:'register'})
         },
         topassword(){
                   this.$toast.fail('功能暂未开放!')
         }
    }
}
</script>
<style>
 .content{
     width: 100%;
     height: 711px;
     background-image: url('../assets/img/背景图4.jpg');
     background-size:cover ;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .login-bg{
     position:absolute;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
 }
 .content-title{
     text-align: center;
     font-size:25px;
     color:#fff
 }
 .content-login{
     position: fixed;
     top:26%;
     left:36.5%;
     width: 400px;
     height: 300px;
     background: rgba(223,219,219,0.2);
     display: flex;
     border-radius: 5px;
     justify-content: center;
     align-items: center;
     box-shadow: 0 25px 35px rgba(0,0,0,0.8);
 }
 .content-login-info{
     width: 90%;
 }
 .content-bottom{
     display: flex;
     justify-content: space-between;
     color: blue;
     font-size:14px
 }
 .content-bottom :hover{
      cursor: pointer;
 }
</style>