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

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

最后更新于 2025-06-01

本页目录12 节

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

需求：提供两个界面，登录界面，用户界面

登录界面要求如下：

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

用户界面要求如下：

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

运行逻辑如下：

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

效果如下

原生 js 实现

1
 <div id="app"></div>
2
    <script>
3
        // 登录界面
4
        function showLogin() {
5
            const appDiv = document.getElementById('app');
6
            appDiv.innerHTML = '';
7
            const loginDiv = document.createElement('div');
8
            loginDiv.innerHTML = `
9
    <h1>欢迎您：请登录</h1>
10
    <label>
11
      账户：
12
      <input type="text" id="account" />
13
    </label>
14
    <br />
15
    <label>
16
      密码：
17
      <input type="password" id="password" />
18
    </label>
19
    <br />
20
    <button onclick="login()">登录</button>
21
  `;
22

23
            appDiv.appendChild(loginDiv);
24
        }
25

26
        // 用户界面
27
        function showUser(account, password) {
28
            const appDiv = document.getElementById('app');
29
            appDiv.innerHTML = '';
30
            const userDiv = document.createElement('div');
31
            userDiv.innerHTML = `
32
    <h1>欢迎您：${account}</h1>
33
    <p>账户名：${account}</p>
34
    <p>密码：${password}</p>
35
    <button onclick="logout()">注销</button>
36
  `;
37

38
            appDiv.appendChild(userDiv);
39
        }
40

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

50
        // 注销函数
51
        function logout() {
52
            // 处理注销逻辑
53
            // 注销后返回登录界面
54
            showLogin();
55
        }
56

57
        // 初始化，显示登录界面
58
        showLogin();
59
    </script>

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

vue3 实现

代码

所有代码如下

1
<!--载入vue.js-->
2
  <script src="https://unpkg.com/vue@next"></script>
3
  <div id="Application">
4
    <!--显示标题-->
5
    <h1>欢迎您{{state?"："+userName:"，请登录"}}</h1>
6
    <!--进行if判断-->
7
    <div v-if="!state">
8
      账号：<input v-model="userName" type="text" />
9
      <br>
10
      密码：<input v-model="password" type="password" />
11
    </div>
12
    <div v-else>
13
      <p>账号：{{userName}}</p>
14
      <p>密码：{{password}}</p>
15
    </div>
16
    <!--展示按钮-->
17
    <button @click="touch">{{state?"注销":"登录"}}</button>
18
  </div>
19
  <script>
20
    const App = Vue.createApp({
21
      setup() {
22
        const userName = Vue.ref("");               //账号
23
        const password = Vue.ref("");               //密码
24
        const state = Vue.ref(false);               //登录状态
25

26
        //判断是否登录，执行对应功能
27
        const touch = () => {
28
          if (!state.value) {
29
            login();           //登录
30
          } else {
31
            loginOut();        //退出
32
          }
33
        };
34

35
        //登录
36
        const login = () => {
37
          if (
38
            userName.value.length > 0
39
            &&
40
            password.value.length > 0
41
          ) {
42
            alert(`
43
            账号：${userName.value}
44
            密码：${password.value}
45
            `
46
            );                                                //弹窗展示信息
47
            state.value = !state.value;                       //修改状态
48
          } else {
49
            alert('请输入账号密码');                             //提示信息
50
          }
51
        };
52

53
        //退出登录
54
        const loginOut = () => {
55
          state.value = !state.value;      //修改登录状态
56
          userName.value = "";             //重置信息
57
          password.value = "";             //重置信息
58
        }
59
        return {
60
          title,
61
          state,
62
          userName,
63
          password,
64
          touch
65
        }
66
      },
67
    })
68
    App.mount("#Application")
69
  </script>

准备变量

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

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

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

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

按钮触发函数

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

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

1
        //判断是否登录，执行对应功能
2
        const touch = () => {
3
          if (!state.value) {
4
            login();           //登录
5
          } else {
6
            loginOut();        //退出
7
          }
8
        };

未登录的时候，state 的值是 false ，我们使用 ! 取反，此时，点击函数 touch() 会执行 login() 函数。
登录后，state 的值是 true ，我们使用 ! 取反，此时，点击函数 touch() 会执行 loginOut() 函数。

登录函数

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

1
        //登录
2
        const login = () => {
3
          if (
4
            userName.value.length > 0
5
            &&
6
            password.value.length > 0
7
          ) {
8
            alert(`
9
            账号：${userName.value}
10
            密码：${password.value}
11
            `
12
            );                                                //弹窗展示信息
13
            state.value = !state.value;                       //修改状态
14
          } else {
15
            alert('请输入账号密码');                             //提示信息
16
          }
17
        };

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

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

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

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

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

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

通过 alert 警告框进行提示

退出函数

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

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

分别是：

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

标题

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

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

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

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

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

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

内容判断

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

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

1
      <div v-if="!state">
2
      账号：<input v-model="userName" type="text" />
3
      <br>
4
      密码：<input v-model="password" type="password" />
5
    </div>
6
    <div v-else>
7
      <p>账号：{{userName}}</p>
8
      <p>密码：{{password}}</p>
9
    </div>

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

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

1
      <p>账号：{{userName}}</p>
2
      <p>密码：{{password}}</p>

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

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

1
      账号：<input v-model="userName" type="text" />
2
      <br>
3
      密码：<input v-model="password" type="password" />

按钮判断

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

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

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

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

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

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

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

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

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

总结

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

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

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

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

阅读偏好

工具