4.7. 用户登录界面

2.5

3.0 2.6 2.5

V01 Vue.js 实战教程 - 基础篇 /

本教程最新版为 2.6，当前版本已放弃维护，请阅读最新版本！

简介

本小节中，我们将新建一个登录页面，同时优化路由配置的代码，并在首页添加登录成功的提示。

新建登录页面

在 src/views/auth 新建 Login.vue 文件，复制贴入以下代码：

src/views/auth/Login.vue

<template>
  <div class="row">
    <div class="col-md-4 col-md-offset-4 floating-box">
      <Message :show.sync="msgShow" :type="msgType" :msg="msg"/>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">请登录</h3>
        </div>

        <div class="panel-body" data-validator-form>
          <div class="form-group">
            <label class="control-label">用户名</label>
            <input v-model.trim="username" v-validator.required="{ title: '用户名' }" type="text" class="form-control" placeholder="请填写用户名">
          </div>
          <di...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质，我们需要对课程进行收费。付费后才能观看剩余内容。购买

4.7. 用户登录界面

2.5

3.0 2.6 2.5

简介

新建登录页面

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

4.7. 用户登录界面 2.5 3.0 2.6 2.5

简介

新建登录页面

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

4.7. 用户登录界面

2.5

3.0 2.6 2.5