承接上節(jié)，你最近在學(xué)習(xí) VUE3 ，但是你已經(jīng)能熟練使用 JavaScript 來(lái)完成開(kāi)發(fā)需求了，為了對(duì)比兩者的差異，你準(zhǔn)備用一些小項(xiàng)目練練手。
需求：提供兩個(gè)界面，登錄界面，用戶界面
登錄界面要求如下：
- 提供標(biāo)題
- 提供賬戶輸入
- 提供密碼輸入
- 提供登錄按鈕
用戶界面要求如下：
- 提供標(biāo)題
- 展示輸入的賬號(hào)
- 展示輸入的密碼
- 提供注銷按鈕
運(yùn)行邏輯如下：
- 用戶通過(guò)登錄界面輸入賬號(hào)與密碼
- 點(diǎn)擊登錄按鈕進(jìn)入后臺(tái)頁(yè)面
- 后臺(tái)展示用戶輸入信息，并展示注銷按鈕
- 點(diǎn)擊注釋按鈕退回登錄頁(yè)面，并清除輸入的賬號(hào)與密碼
效果如下
原生 js 實(shí)現(xiàn)
<div id="app"></div>
<script>
// 登錄界面
function showLogin() {
const appDiv = document.getElementById('app');
appDiv.innerHTML = '';
const loginDiv = document.createElement('div');
loginDiv.innerHTML = `
<h1>歡迎您：請(qǐng)登錄</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;
// 這里可以處理登錄邏輯，如校驗(yàn)賬戶密碼等
// 驗(yàn)證通過(guò)后跳轉(zhuǎn)到用戶界面
showUser(account, password);
}
// 注銷函數(shù)
function logout() {
// 處理注銷邏輯
// 注銷后返回登錄界面
showLogin();
}
// 初始化，顯示登錄界面
showLogin();
</script>在注釋的幫助下，可以很快的看懂其中的意思。基本上就是使用 innerHTML 方法來(lái)進(jìn)行數(shù)據(jù)展示。
vue3 實(shí)現(xiàn)
代碼
所有代碼如下
<!--載入vue.js-->
<script src="https://unpkg.com/vue@next"></script>
<div id="Application">
<!--顯示標(biāo)題-->
<h1>歡迎您{{state?"："+userName:"，請(qǐng)登錄"}}</h1>
<!--進(jìn)行if判斷-->
<div v-if="!state">
賬號(hào)：<input v-model="userName" type="text" />
<br>
密碼：<input v-model="password" type="password" />
</div>
<div v-else>
<p>賬號(hào)：{{userName}}</p>
<p>密碼：{{password}}</p>
</div>
<!--展示按鈕-->
<button @click="touch">{{state?"注銷":"登錄"}}</button>
</div>
<script>
const App = Vue.createApp({
setup() {
const userName = Vue.ref(""); //賬號(hào)
const password = Vue.ref(""); //密碼
const state = Vue.ref(false); //登錄狀態(tài)
//判斷是否登錄，執(zhí)行對(duì)應(yīng)功能
const touch = () => {
if (!state.value) {
login(); //登錄
} else {
loginOut(); //退出
}
};
//登錄
const login = () => {
if (
userName.value.length > 0
&&
password.value.length > 0
) {
alert(`
賬號(hào)：${userName.value}
密碼：${password.value}
`
); //彈窗展示信息
state.value = !state.value; //修改狀態(tài)
} else {
alert('請(qǐng)輸入賬號(hào)密碼'); //提示信息
}
};
//退出登錄
const loginOut = () => {
state.value = !state.value; //修改登錄狀態(tài)
userName.value = ""; //重置信息
password.value = ""; //重置信息
}
return {
title,
state,
userName,
password,
touch
}
},
})
App.mount("#Application")
</script>準(zhǔn)備變量
我們準(zhǔn)備以下幾個(gè)變量，便于使用
const userName = Vue.ref(""); //賬號(hào)
const password = Vue.ref(""); //密碼
const state = Vue.ref(false); //登錄狀態(tài)這里都使用了 ref 方法，將所有的變量都監(jiān)控起來(lái)，使用 value 可以拿到其中的值，例如 userName.value
其中， state 是個(gè)布爾值，用于登錄狀態(tài)判斷，未登錄為 false ，登錄為： true 。
按鈕觸發(fā)函數(shù)
為了簡(jiǎn)潔，我們只準(zhǔn)備了一個(gè)按鈕，觸發(fā)一個(gè)函數(shù)，但是我們可以根據(jù)登錄狀態(tài) state ，
實(shí)現(xiàn)在不同的狀態(tài)下，觸發(fā)同一個(gè)函數(shù)，執(zhí)行不同的操作。
//判斷是否登錄，執(zhí)行對(duì)應(yīng)功能
const touch = () => {
if (!state.value) {
login(); //登錄
} else {
loginOut(); //退出
}
};- 未登錄的時(shí)候，
state的值是false，我們使用!取反，此時(shí)，點(diǎn)擊函數(shù)touch()會(huì)執(zhí)行login()函數(shù)。 - 登錄后，
state的值是true，我們使用!取反，此時(shí)，點(diǎn)擊函數(shù)touch()會(huì)執(zhí)行loginOut()函數(shù)。
登錄函數(shù)
我們準(zhǔn)備登錄函數(shù)，執(zhí)行登錄中的各種任務(wù)。
//登錄
const login = () => {
if (
userName.value.length > 0
&&
password.value.length > 0
) {
alert(`
賬號(hào)：${userName.value}
密碼：${password.value}
`
); //彈窗展示信息
state.value = !state.value; //修改狀態(tài)
} else {
alert('請(qǐng)輸入賬號(hào)密碼'); //提示信息
}
};首先，我們要判斷，用戶是否輸入了值，通過(guò)拿到對(duì)應(yīng)變量的長(zhǎng)度，我們就能判斷。
若長(zhǎng)度大于0，則說(shuō)明有值。
這里，我們使用了“與”判斷，只有兩邊的值均為 true 時(shí)，此判斷才為 true
當(dāng)判斷為真，用戶按要求填寫(xiě)了賬號(hào)和密碼時(shí)
- 通過(guò)
alert警告框展示相應(yīng)信息 - 修改登錄狀態(tài)，此時(shí)登錄成功了
當(dāng)判斷為假，賬號(hào)或密碼其中之一沒(méi)有輸入時(shí)，
- 通過(guò)
alert警告框進(jìn)行提示
退出函數(shù)
當(dāng)用戶觸發(fā)退出函數(shù)時(shí)，我們執(zhí)行以下操作
//退出登錄
const loginOut = () => {
state.value = !state.value; //修改登錄狀態(tài)
userName.value = ""; //重置信息
password.value = ""; //重置信息
}分別是：
- 修改狀態(tài)
- 設(shè)置賬號(hào)和密碼為空
標(biāo)題
標(biāo)題中，我們使用了三元運(yùn)算符。
<!--顯示標(biāo)題-->
<h1>歡迎您{{state?"："+userName:"，請(qǐng)登錄"}}</h1>當(dāng) state 的值為 true 時(shí)，代表為真，已登錄，即展示?后的 "："+userName內(nèi)容，
這里采用了拼接的方法，將符號(hào)：與賬號(hào)值 userName 進(jìn)行了拼接。
當(dāng) state 的值為 false 時(shí)，代表為假，未登錄，即展示:后的 "，請(qǐng)登錄"內(nèi)容，
因?yàn)樵?HTML 中使用的是經(jīng)過(guò) return 的值，所以無(wú)需 .value 啦。
內(nèi)容判斷
這里使用了 v-if 和 v-else 進(jìn)行判斷。
使用 v-model 來(lái)進(jìn)行值的雙向綁定，也就是填寫(xiě)的值會(huì)不斷的傳給對(duì)應(yīng)的變量。
<div v-if="!state">
賬號(hào)：<input v-model="userName" type="text" />
<br>
密碼：<input v-model="password" type="password" />
</div>
<div v-else>
<p>賬號(hào)：{{userName}}</p>
<p>密碼：{{password}}</p>
</div>當(dāng) state 的值為 true 時(shí)，代表為真，已登錄，
經(jīng)過(guò) ! 取反，值為假，則展示填入的信息
<p>賬號(hào)：{{userName}}</p>
<p>密碼：{{password}}</p>當(dāng) state 的值為 false 時(shí)，代表為假，未登錄，
經(jīng)過(guò) ! 取反，值為真，則展示表單信息
賬號(hào)：<input v-model="userName" type="text" />
<br>
密碼：<input v-model="password" type="password" />按鈕判斷
這里，我們使用了簡(jiǎn)寫(xiě)，使用 @ 來(lái)代替 v-on。而且，我們還簡(jiǎn)寫(xiě)了 touch() 為 touch。
同樣的，我們?cè)诎粹o上，也使用了 state 狀態(tài)
<!--展示按鈕-->
<button @click="touch">{{state?"注銷":"登錄"}}</button>當(dāng) state 的值為 true 時(shí)，代表為真，已登錄，
此時(shí)展示 ? 后的內(nèi)容，即為“注銷”。
此時(shí)點(diǎn)擊觸發(fā) touch 函數(shù)，因?yàn)?code>state 的值為 true ，會(huì)執(zhí)行 loginOut() ，退出函數(shù)。
當(dāng) state 的值為 false 時(shí)，代表為假，未登錄，
此時(shí)展示 : 后的內(nèi)容，即為“登錄”。
此時(shí)點(diǎn)擊觸發(fā) touch 函數(shù)，因?yàn)?code>state 的值為 false ，會(huì)執(zhí)行 login() ，登錄函數(shù)。
總結(jié)
通過(guò)這個(gè)項(xiàng)目，在代碼行數(shù)上，還是原生的 JavaScript 占優(yōu)。
但是 Npcink 卻在實(shí)現(xiàn)其功能的過(guò)程中，嗅到了不一樣的味道。
- 原生 js 更多的使用函數(shù)來(lái)進(jìn)行數(shù)據(jù)渲染
- VUE3 更多的使用各種方法來(lái)實(shí)現(xiàn)目標(biāo)
希望通過(guò)本節(jié)和上節(jié)的兩個(gè)實(shí)際按鈕，能幫助到大家體驗(yàn)到其中 JavaScript 和 VUE3 兩者間的細(xì)微差異。
最新文章
- 后續(xù)文章不定期撰寫(xiě)中，點(diǎn)個(gè)關(guān)注，獲取平臺(tái)最新文章推送。
- 技術(shù)有限，還望諸位協(xié)助勘誤，于評(píng)論區(qū)指出，
- 常一文多發(fā)，最新勘定和增補(bǔ)文章于下方鏈接給出
- http://m.kartiktrivedi.com/277371.html