1.做登錄框

步驟：

（1） 創(chuàng)建vue項(xiàng)目，使用vite方式創(chuàng)建；npm init vue@latest

（2）項(xiàng)目結(jié)構(gòu)：

•  src：代碼書(shū)寫(xiě)位置；
• app.vue：根組件；
• main.js：將根組件與首頁(yè)進(jìn)行連接；
• index.html：首頁(yè)；
• package-lock.json:項(xiàng)目配置，安裝依賴，啟動(dòng)命令的配置；
• vite.config.js：vite的配置文件；

（3）書(shū)寫(xiě)登錄組件

components：規(guī)范情況，將組件書(shū)寫(xiě)components下；

組件：一個(gè)vue文件，我們把這個(gè)vue組件稱之為單文件組件 SFC（Signed File Component） 格式：Login.vue（文件名是大駝峰式命名規(guī)則）；

Tips:

（1）設(shè)置了display:flex后，容器中所有的項(xiàng)目都會(huì)變成內(nèi)聯(lián)塊；

（2）在輸入用戶名目密碼的表單元素上做數(shù)據(jù)的雙向綁定，v-model="響應(yīng)式變量"；

（3）使用修飾符.trim 取消輸入內(nèi)容前后的空格；

（4）在按鈕上取消默認(rèn)行為（.prevent，相當(dāng)于事件對(duì)象event.defaultPrevent()），并綁定click 事件（v-on:click 簡(jiǎn)寫(xiě)成@click）,當(dāng)點(diǎn)擊時(shí)，觸發(fā)login函數(shù)login；

（5）方法，響應(yīng)式數(shù)據(jù)是data函數(shù)，返回一個(gè)對(duì)象。 methods是一個(gè)對(duì)象 ，在對(duì)象內(nèi)部書(shū)寫(xiě)各種函數(shù)；

（6)login方法的實(shí)現(xiàn)

       (a)在methods中創(chuàng)建login方法

? ? ? ? ? ? ?methods:{
? ? ? ? ? ? ? ? login() {
? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ?}

       (b)判斷輸入的數(shù)據(jù)是否為空

在方法中，可以通過(guò)this來(lái)獲取響應(yīng)式數(shù)據(jù)

如果為空：

如果出錯(cuò)：

注： isShow：用來(lái)控制 類樣式tip，isShow=true,就顯示class='tip',否則，class='', 通過(guò)isShow控制提示框的顯示和隱藏，使用v-show命令；

（c）跳轉(zhuǎn)界面

（4）啟動(dòng)項(xiàng)目，打開(kāi)頁(yè)面，直接進(jìn)入login頁(yè)面

（a)  登陸成功后，讓頁(yè)面進(jìn)行跳轉(zhuǎn)，跳轉(zhuǎn)到Index組件 Index.vue的內(nèi)容如下 ：

Index.vue所在位置：

  (b) 創(chuàng)建路由

在router目錄下，創(chuàng)建index.js文件，編寫(xiě)路徑與組件的映射關(guān)系；

1）怎么進(jìn)入登錄？通過(guò)在router目錄的index.js中配置登錄路徑與登錄組件的映射；

2）但是，輸入的路徑如果不對(duì)，頁(yè)面就會(huì)顯示空白。這樣不友好。因此，當(dāng)路徑不存在時(shí)，顯示 404。如何做呢？

3）HobbyOne.vue   （HobbyTwo.vue，HobbyThree.vue同理）（此處為本人無(wú)聊制作而成，并無(wú)其他意義?。。。?/p>

4）NotFound.vue    （此處為本人無(wú)聊制作而成，并無(wú)其他意義?。。。?/p>

（c）告訴app應(yīng)用，使用路由。

（5）在App.vue中通過(guò)標(biāo)簽進(jìn)行指定。

總結(jié)

到此這篇關(guān)于如何利用vue實(shí)現(xiàn)登陸界面及其跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)vue登陸界面及跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論