02:实用至上主义学VUE3 - 登录与注销界面

承接上节,你最近在学习 VUE3 ,但是你已经能熟练使用 JavaScript 来完成开发需求了,为了对比两者的差异,你准备用一些小项目练练手。

承接上节,你最近在学习 VUE3 ,但是你已经能熟练使用 JavaScript 来完成开发需求了,为了对比两者的差异,你准备用一些小项目练练手。

需求:提供两个界面,登录界面,用户界面

登录界面要求如下:

  • 提供标题
  • 提供账户输入
  • 提供密码输入
  • 提供登录按钮

用户界面要求如下:

  • 提供标题
  • 展示输入的账号
  • 展示输入的密码
  • 提供注销按钮

运行逻辑如下:

  1. 用户通过登录界面输入账号与密码
  2. 点击登录按钮进入后台页面
  3. 后台展示用户输入信息,并展示注销按钮
  4. 点击注释按钮退回登录页面,并清除输入的账号与密码

效果如下

02:实用至上主义学VUE3 - 登录与注销界面

原生 js 实现

 <div id="app"></div>
    <script>
        // 登录界面
        function showLogin() {
            const appDiv = document.getElementById('app');
            appDiv.innerHTML = '';
            const loginDiv = document.createElement('div');
            loginDiv.innerHTML = `
    <h1>欢迎您:请登录</h1>
    <label>
      账户:
      <input type="text" id="account" />
    </label>
    <br />
    <label>
      密码:
      <input type="password" id="password" />
    </label>
    <br />
    <button onclick="login()">登录</button>
  `;

            appDiv.appendChild(loginDiv);
        }

        // 用户界面
        function showUser(account, password) {
            const appDiv = document.getElementById('app');
            appDiv.innerHTML = '';
            const userDiv = document.createElement('div');
            userDiv.innerHTML = `
    <h1>欢迎您:${account}</h1>
    <p>账户名:${account}</p>
    <p>密码:${password}</p>
    <button onclick="logout()">注销</button>
  `;

            appDiv.appendChild(userDiv);
        }

        // 登录函数
        function login() {
            const account = document.getElementById('account').value;
            const password = document.getElementById('password').value;
            // 这里可以处理登录逻辑,如校验账户密码等
            // 验证通过后跳转到用户界面
            showUser(account, password);
        }

        // 注销函数
        function logout() {
            // 处理注销逻辑
            // 注销后返回登录界面
            showLogin();
        }

        // 初始化,显示登录界面
        showLogin();
    </script>

在注释的帮助下,可以很快的看懂其中的意思。基本上就是使用 innerHTML 方法来进行数据展示。

vue3 实现

代码

所有代码如下

<!--载入vue.js-->
  <script src="https://unpkg.com/vue@next"></script>
  <div id="Application">
    <!--显示标题-->
    <h1>欢迎您{{state?":"+userName:",请登录"}}</h1>
    <!--进行if判断-->
    <div v-if="!state">
      账号:<input v-model="userName" type="text" />
      <br>
      密码:<input v-model="password" type="password" />
    </div>
    <div v-else>
      <p>账号:{{userName}}</p>
      <p>密码:{{password}}</p>
    </div>
    <!--展示按钮-->
    <button @click="touch">{{state?"注销":"登录"}}</button>
  </div>
  <script>
    const App = Vue.createApp({
      setup() {
        const userName = Vue.ref("");               //账号
        const password = Vue.ref("");               //密码
        const state = Vue.ref(false);               //登录状态

        //判断是否登录,执行对应功能
        const touch = () => {
          if (!state.value) {
            login();           //登录
          } else {
            loginOut();        //退出
          }
        };

        //登录
        const login = () => {
          if (
            userName.value.length > 0
            &&
            password.value.length > 0
          ) {
            alert(`
            账号:${userName.value}  
            密码:${password.value}
            `
            );                                                //弹窗展示信息
            state.value = !state.value;                       //修改状态
          } else {
            alert('请输入账号密码');                             //提示信息
          }
        };

        //退出登录
        const loginOut = () => {
          state.value = !state.value;      //修改登录状态
          userName.value = "";             //重置信息
          password.value = "";             //重置信息
        }
        return {
          title,
          state,
          userName,
          password,
          touch
        }
      },
    })
    App.mount("#Application")
  </script>

准备变量

我们准备以下几个变量,便于使用

        const userName = Vue.ref("");               //账号
        const password = Vue.ref("");               //密码
        const state = Vue.ref(false);               //登录状态

这里都使用了 ref 方法,将所有的变量都监控起来,使用 value 可以拿到其中的值,例如 userName.value

其中, state 是个布尔值,用于登录状态判断,未登录为 false ,登录为: true

按钮触发函数

为了简洁,我们只准备了一个按钮,触发一个函数,但是我们可以根据登录状态 state

实现在不同的状态下,触发同一个函数,执行不同的操作。

        //判断是否登录,执行对应功能
        const touch = () => {
          if (!state.value) {
            login();           //登录
          } else {
            loginOut();        //退出
          }
        };
  • 未登录的时候,state 的值是 false ,我们使用 ! 取反,此时,点击函数 touch() 会执行 login() 函数。
  • 登录后,state 的值是 true ,我们使用 ! 取反,此时,点击函数 touch() 会执行 loginOut() 函数。

登录函数

我们准备登录函数,执行登录中的各种任务。

        //登录
        const login = () => {
          if (
            userName.value.length > 0
            &&
            password.value.length > 0
          ) {
            alert(`
            账号:${userName.value}  
            密码:${password.value}
            `
            );                                                //弹窗展示信息
            state.value = !state.value;                       //修改状态
          } else {
            alert('请输入账号密码');                             //提示信息
          }
        };

首先,我们要判断,用户是否输入了值,通过拿到对应变量的长度,我们就能判断。

若长度大于0,则说明有值。

这里,我们使用了“与”判断,只有两边的值均为 true 时,此判断才为 true

当判断为真,用户按要求填写了账号和密码时

  • 通过 alert 警告框展示相应信息
  • 修改登录状态,此时登录成功了

当判断为假,账号或密码其中之一没有输入时,

  • 通过 alert 警告框进行提示

退出函数

当用户触发退出函数时,我们执行以下操作

        //退出登录
        const loginOut = () => {
          state.value = !state.value;      //修改登录状态
          userName.value = "";             //重置信息
          password.value = "";             //重置信息
        }

分别是:

  • 修改状态
  • 设置账号和密码为空

标题

标题中,我们使用了三元运算符。

    <!--显示标题-->
    <h1>欢迎您{{state?":"+userName:",请登录"}}</h1>

state 的值为 true 时,代表为真,已登录,即展示?后的 ":"+userName内容,

这里采用了拼接的方法,将符号与账号值 userName 进行了拼接。


state 的值为 false 时,代表为假,未登录,即展示:后的 ",请登录"内容,

因为在 HTML 中使用的是经过 return 的值,所以无需 .value 啦。

内容判断

这里使用了 v-ifv-else 进行判断。

使用 v-model 来进行值的双向绑定,也就是填写的值会不断的传给对应的变量。

      <div v-if="!state">
      账号:<input v-model="userName" type="text" />
      <br>
      密码:<input v-model="password" type="password" />
    </div>
    <div v-else>
      <p>账号:{{userName}}</p>
      <p>密码:{{password}}</p>
    </div>

state 的值为 true 时,代表为真,已登录,

经过 ! 取反,值为假,则展示填入的信息

      <p>账号:{{userName}}</p>
      <p>密码:{{password}}</p>

state 的值为 false 时,代表为假,未登录,

经过 ! 取反,值为真,则展示表单信息

      账号:<input v-model="userName" type="text" />
      <br>
      密码:<input v-model="password" type="password" />

按钮判断

这里,我们使用了简写,使用 @ 来代替 v-on。而且,我们还简写了 touch()touch

同样的,我们在按钮上,也使用了 state 状态

    <!--展示按钮-->
    <button @click="touch">{{state?"注销":"登录"}}</button>

state 的值为 true 时,代表为真,已登录,

此时展示 ? 后的内容,即为“注销”。

此时点击触发 touch 函数,因为state 的值为 true ,会执行 loginOut() ,退出函数。


state 的值为 false 时,代表为假,未登录,

此时展示 : 后的内容,即为“登录”。

此时点击触发 touch 函数,因为state 的值为 false ,会执行 login() ,登录函数。

总结

通过这个项目,在代码行数上,还是原生的 JavaScript 占优。

但是 Npcink 却在实现其功能的过程中,嗅到了不一样的味道。

  • 原生 js 更多的使用函数来进行数据渲染
  • VUE3 更多的使用各种方法来实现目标

希望通过本节和上节的两个实际按钮,能帮助到大家体验到其中 JavaScript 和 VUE3 两者间的细微差异。

最新文章

  • 后续文章不定期撰写中,点个关注,获取平台最新文章推送。
  • 技术有限,还望诸位协助勘误,于评论区指出,
  • 常一文多发,最新勘定和增补文章于下方链接给出
  • https://www.npc.ink/277371.html
VUE项目

新手常见的 todo 列表渲染详细拆解 - Vue3新手基础教程

2022-8-20 15:09:02

资源

一些视频

2018-10-13 20:48:27

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索