承接上節，你最近在學習 VUE3 ，但是你已經能熟練使用 JavaScript 來完成開發需求了，為了對比兩者的差異，你準備用一些小項目練練手。
需求：提供兩個界面，登錄界面，用戶界面
登錄界面要求如下：
- 提供標題
- 提供賬戶輸入
- 提供密碼輸入
- 提供登錄按鈕
用戶界面要求如下：
- 提供標題
- 展示輸入的賬號
- 展示輸入的密碼
- 提供注銷按鈕
運行邏輯如下：
- 用戶通過登錄界面輸入賬號與密碼
- 點擊登錄按鈕進入后臺頁面
- 后臺展示用戶輸入信息，并展示注銷按鈕
- 點擊注釋按鈕退回登錄頁面，并清除輸入的賬號與密碼
效果如下
原生 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-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 狀態
<!--展示按鈕-->
<button @click="touch">{{state?"注銷":"登錄"}}</button>當 state 的值為 true 時，代表為真，已登錄，
此時展示 ? 后的內容，即為“注銷”。
此時點擊觸發 touch 函數，因為state 的值為 true ，會執行 loginOut() ，退出函數。
當 state 的值為 false 時，代表為假，未登錄，
此時展示 : 后的內容，即為“登錄”。
此時點擊觸發 touch 函數，因為state 的值為 false ，會執行 login() ，登錄函數。
總結
通過這個項目，在代碼行數上，還是原生的 JavaScript 占優。
但是 Npcink 卻在實現其功能的過程中，嗅到了不一樣的味道。
- 原生 js 更多的使用函數來進行數據渲染
- VUE3 更多的使用各種方法來實現目標
希望通過本節和上節的兩個實際按鈕，能幫助到大家體驗到其中 JavaScript 和 VUE3 兩者間的細微差異。
最新文章
- 后續文章不定期撰寫中，點個關注，獲取平臺最新文章推送。
- 技術有限，還望諸位協助勘誤，于評論區指出，
- 常一文多發，最新勘定和增補文章于下方鏈接給出
- http://m.kartiktrivedi.com/277371.html
