手機站首頁散文詩歌雜文隨筆日記小小說

散文網 » 科技 »學習 » 02：實用至上主義學VUE3 - 登錄與注銷界面

02：實用至上主義學VUE3 - 登錄與注銷界面

2023-07-08 19:03 作者:Npcink_牧澤 0人讀過 | 我要投稿

承接上節(jié)，你最近在學習 VUE3 ，但是你已經能熟練使用 JavaScript 來完成開發(fā)需求了，為了對比兩者的差異，你準備用一些小項目練練手。

需求：提供兩個界面，登錄界面，用戶界面

登錄界面要求如下：

提供標題
提供賬戶輸入
提供密碼輸入
提供登錄按鈕

用戶界面要求如下：

提供標題
展示輸入的賬號
展示輸入的密碼
提供注銷按鈕

運行邏輯如下：

用戶通過登錄界面輸入賬號與密碼
點擊登錄按鈕進入后臺頁面
后臺展示用戶輸入信息，并展示注銷按鈕
點擊注釋按鈕退回登錄頁面，并清除輸入的賬號與密碼

效果如下

原生 js 實現(xiàn)

<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);
? ? ? ?}
? ? ? ?// 登錄函數(shù)
? ? ? ?function login() {
? ? ? ? ? ?const account = document.getElementById('account').value;
? ? ? ? ? ?const password = document.getElementById('password').value;
? ? ? ? ? ?// 這里可以處理登錄邏輯，如校驗賬戶密碼等
? ? ? ? ? ?// 驗證通過后跳轉到用戶界面
? ? ? ? ? ?showUser(account, password);
? ? ? ?}
? ? ? ?// 注銷函數(shù)
? ? ? ?function logout() {
? ? ? ? ? ?// 處理注銷邏輯
? ? ? ? ? ?// 注銷后返回登錄界面
? ? ? ? ? ?showLogin();
? ? ? ?}
? ? ? ?// 初始化，顯示登錄界面
? ? ? ?showLogin();
? ?</script>

在注釋的幫助下，可以很快的看懂其中的意思?；旧暇褪鞘褂?innerHTML?方法來進行數(shù)據(jù)展示。

vue3 實現(xiàn)

代碼

所有代碼如下


?<script src="https://unpkg.com/vue@next"></script>
?<div id="Application">
? ?
? ?<h1>歡迎您{{state?"："+userName:"，請登錄"}}</h1>
? ?
? ?<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); ? ? ? ? ? ? ? //登錄狀態(tài)
? ? ? ?//判斷是否登錄，執(zhí)行對應功能
? ? ? ?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; ? ? ? ? ? ? ? ? ? ? ? //修改狀態(tài)
? ? ? ? ?} else {
? ? ? ? ? ?alert('請輸入賬號密碼'); ? ? ? ? ? ? ? ? ? ? ? ? ? ? //提示信息
? ? ? ? ?}
? ? ? ?};
? ? ? ?//退出登錄
? ? ? ?const loginOut = () => {
? ? ? ? ?state.value = !state.value; ? ? ?//修改登錄狀態(tài)
? ? ? ? ?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); ? ? ? ? ? ? ? //登錄狀態(tài)

這里都使用了?ref?方法，將所有的變量都監(jiān)控起來，使用?value?可以拿到其中的值，例如?userName.value

其中，?state?是個布爾值，用于登錄狀態(tài)判斷，未登錄為?false?，登錄為：?true?。

按鈕觸發(fā)函數(shù)

為了簡潔，我們只準備了一個按鈕，觸發(fā)一個函數(shù)，但是我們可以根據(jù)登錄狀態(tài)?state?，

實現(xiàn)在不同的狀態(tài)下，觸發(fā)同一個函數(shù)，執(zhí)行不同的操作。

? ? ? ?//判斷是否登錄，執(zhí)行對應功能
? ? ? ?const touch = () => {
? ? ? ? ?if (!state.value) {
? ? ? ? ? ?login(); ? ? ? ? ? //登錄
? ? ? ? ?} else {
? ? ? ? ? ?loginOut(); ? ? ? ?//退出
? ? ? ? ?}
? ? ? ?};

未登錄的時候，state?的值是?false?，我們使用?!?取反，此時，點擊函數(shù)?touch()?會執(zhí)行?login()?函數(shù)。
登錄后，state?的值是?true?，我們使用?!?取反，此時，點擊函數(shù)?touch()?會執(zhí)行?loginOut()?函數(shù)。

登錄函數(shù)

我們準備登錄函數(shù)，執(zhí)行登錄中的各種任務。

? ? ? ?//登錄
? ? ? ?const login = () => {
? ? ? ? ?if (
? ? ? ? ? ?userName.value.length > 0
? ? ? ? ? ?&&
? ? ? ? ? ?password.value.length > 0
? ? ? ? ?) {
? ? ? ? ? ?alert(`
? ? ? ? ? ?賬號：${userName.value} ?
? ? ? ? ? ?密碼：${password.value}
? ? ? ? ? ?`
? ? ? ? ? ?); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//彈窗展示信息
? ? ? ? ? ?state.value = !state.value; ? ? ? ? ? ? ? ? ? ? ? //修改狀態(tài)
? ? ? ? ?} else {
? ? ? ? ? ?alert('請輸入賬號密碼'); ? ? ? ? ? ? ? ? ? ? ? ? ? ? //提示信息
? ? ? ? ?}
? ? ? ?};

首先，我們要判斷，用戶是否輸入了值，通過拿到對應變量的長度，我們就能判斷。

若長度大于0，則說明有值。

這里，我們使用了“與”判斷，只有兩邊的值均為?true?時，此判斷才為?true

當判斷為真，用戶按要求填寫了賬號和密碼時

通過?alert?警告框展示相應信息
修改登錄狀態(tài)，此時登錄成功了

當判斷為假，賬號或密碼其中之一沒有輸入時，

通過?alert?警告框進行提示

退出函數(shù)

當用戶觸發(fā)退出函數(shù)時，我們執(zhí)行以下操作

? ? ? ?//退出登錄
? ? ? ?const loginOut = () => {
? ? ? ? ?state.value = !state.value; ? ? ?//修改登錄狀態(tài)
? ? ? ? ?userName.value = ""; ? ? ? ? ? ? //重置信息
? ? ? ? ?password.value = ""; ? ? ? ? ? ? //重置信息
? ? ? ?}

分別是：

修改狀態(tài)
設置賬號和密碼為空

標題

標題中，我們使用了三元運算符。

? ?
? ?<h1>歡迎您{{state?"："+userName:"，請登錄"}}</h1>

當?state?的值為?true?時，代表為真，已登錄，即展示?后的?"："+userName內容，

這里采用了拼接的方法，將符號：與賬號值?userName?進行了拼接。

當?state?的值為?false?時，代表為假，未登錄，即展示:后的?"，請登錄"內容，

因為在 HTML 中使用的是經過 return 的值，所以無需 .value 啦。

內容判斷

這里使用了?v-if?和?v-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?狀態(tài)

? ?
? ?<button @click="touch">{{state?"注銷":"登錄"}}</button>

當?state?的值為?true?時，代表為真，已登錄，

此時展示???后的內容，即為“注銷”。

此時點擊觸發(fā)?touch?函數(shù)，因為state?的值為?true?，會執(zhí)行?loginOut()?，退出函數(shù)。

當?state?的值為?false?時，代表為假，未登錄，

此時展示?:?后的內容，即為“登錄”。

此時點擊觸發(fā)?touch?函數(shù)，因為state?的值為?false?，會執(zhí)行?login()?，登錄函數(shù)。

總結

通過這個項目，在代碼行數(shù)上，還是原生的 JavaScript 占優(yōu)。

但是 Npcink 卻在實現(xiàn)其功能的過程中，嗅到了不一樣的味道。

原生 js 更多的使用函數(shù)來進行數(shù)據(jù)渲染
VUE3 更多的使用各種方法來實現(xiàn)目標

希望通過本節(jié)和上節(jié)的兩個實際按鈕，能幫助到大家體驗到其中 JavaScript 和 VUE3 兩者間的細微差異。

五月天青色头像情侣网名,国产亚洲av片在线观看18女人,黑人巨茎大战俄罗斯美女,扒下她的小内裤打屁股