vue 移動端開發筆記2 頁面開發

2021-10-17 07:33:02 字數 1432 閱讀 9570

各個模組的頁面開發

一、登入頁面 布局

二、總結

• 能實現登入頁面的布局

• 能實現基本登入功能

• 能掌握 vant 中 toast 提示元件的使用

• 能理解 api 請求模組的封裝

• 能理解傳送驗證碼的實現思路

• 能理解 vant form 實現表單驗證的使用 2:

示例:

"login-container"

>

<

!-- 登入 --

>

<

!-- @click-left=

"$router.back()" 從**來回那裡去--

>

"登入/註冊" left-arrow @click-left=

"$router.back()" class=

/>

<

!-- field 輸入框 --

>

<

!-- field 是基於 cell 實現的,可以使用 cellgroup 作為容器來提供外邊框。 --

>

"van-cell-group"

>

"user.mobile" placeholder=

"請輸入手機號"

/>

"user.code" placeholder=

"請輸入密碼"

>

"small" round type=

"primary"

>傳送驗證碼<

/van-button>

<

/template>

<

/van-field>

<

/van-cell-group>

<

!-- 登入按鈕 --

>

"info" size=

"large" class=

"botton-login" @click=

"onlogin"

>登入<

/van-button>

"botton-zhuc"

>

忘記密碼<

/p>

註冊<

/p>

<

/div>

<

/div>

<

/template>

import from "../../api/user"

;export default,}

;},created()

, methods:

catch

(err)},

},};

<

/script>

vue開發筆記

1.node.js安裝成功後 在鍵盤按下 win r 鍵,輸入cmd,然後回車,開啟cmd視窗,輸入node v和npm v即可顯示當前安裝的版本號,即表示安裝成功 2.安裝cnpm npm install g cnpm registry 然後等待。3.安裝vue cli 命令 npm instal...

移動端 h5 開發筆記

1.禁止縮放 禁止快取 2.webkit 定製css 更多參考 webkit touch callout none webkit user select none webkit text size adjust none webkit tap highlight color rgba 0,0,0,1...

移動WEB開發筆記

布局視口 layout viewport 字太小,手動縮放網頁 視覺視口 visual viewport 左右滑動看 理想視口 ideal viewport 理想視口 物理畫素 物理畫素比 dpr 物理畫素 螢幕顯示的最小顆粒 螢幕解析度 物理畫素比 1px能顯示的物理畫素點的個數 背景縮放back...