vue高階總結二

2021-09-29 23:35:38 字數 2970 閱讀 1949

上篇僅僅談論到介面資料渲染,這篇主要是使用過程中的demo

解決方法:1、路由配置檔案router/index.js 跳轉路由前判斷是否登入2、關於涉及許可權頁面元件載入函式判斷

router.

beforeeach

((to,

from

, next)

=>

else

else}}

);export

default router;

mounted()

,methods:

,}

"testform"

:rules=

"testrulesyzm"

:model=

"testform"

>

"手機號" prop=

"phonenum"

>

"" v-model=

"testform.phonenum" placeholder=

"手機號"

>

<

/el-input>

<

/el-form-item>

"15"

>

"pyzm"

>

"testform.pyzm" placeholder=

"簡訊驗證碼" style=

"width: 100%;"

>

<

/el-input>

<

/el-form-item>

<

/el-col>

"2">

<

/el-col>

"7">

"isyzm" @click=

"getyzm()" type=

"primary" style=

"width: 100%;"

>傳送驗證碼<

/el-button>

else disabled @click=

"getyzm()" type=

"primary" style=

"width: 100%;"

>傳送驗證碼<

/el-button>

<

/el-col>

<

/el-row>

"新密碼" prop=

"newpwd"

>

"password" v-model=

"testform.newpwd" placeholder=

"請輸入新密碼"

>

<

/el-input>

<

/el-form-item>

"確認密碼" prop=

"dnewpwd"

>

"password" v-model=

"testform.dnewpwd" placeholder=

"請輸入確認密碼"

>

<

/el-input>

<

/el-form-item>

"issub" @click=

'setpwd()' type=

"primary"

>提交<

/el-button>

else disabled @click=

'setpwd()' type=

"primary"

>提交<

/el-button>

"login()" style=

"float: right;" type=

"text"

>登入<

/el-button>

}<

/el-form>

資料data:

data()

, testrulesyzm:,]

, pyzm:[,

],newpwd:[,

,], dnewpwd:[,

]},}

}

這樣的觸發,啟用輸入框然後blur,提交表單的時候觸發驗證:this.$refs[『testform』].validate((valid)=>{}

methods:

else

}else})

;},}

'contents'

>

<

/div>

"citylist"

:height=

"tableheight" style=

"width: 100%;"

>

"province" label=

"省" width=

"80"

>

<

/el-table-column>

"areas" label=

"市">

"citylist"

>

"margin:0 5px" v-

for=

"(v,index) in citylist.row.areas" type=

"primary"

:key=

'index'

>

"selcity(v.id,v.name)" style=

"color:#0074d9;cursor: pointer;"

>

}<

/a>

<

/span>

<

/slot>

<

/el-table-column>

<

/el-table>

vue高階總結三

請求介面返回的字段,渲染的時候需要拼接部分字串,起初盲目for迴圈拼接,下班後回想起總感覺不對勁,果然,哈哈,vue變數字串拼接是各種支援的呢 渲染,行資料單獨處理 slot scope scope 站點logo width 180 scope png width 80 template el ta...

Vue高階之元件(二)

這一篇主要是講slot。我的另一篇在 另外文章開頭還是要說一下,這一篇文章借鑑了很多 這個博主寫的vue真的很好,包括畫的流程圖,示意圖都很好。官網api的說法是 注意兩點 元件不知道它的掛載點會有什麼內容。掛載點的內容是由的父元件決定的。元件很可能有它自己的模版。為了讓元件可以組合,我們需要一種方...

VUE學習總結(二)

1 計算屬性 computerd set function newvalue 2 class繫結 data computed methods,表示式較長或邏輯複雜,優先使用computed。例項data中給出 isactive iserror的值 class條件過多時 超過兩個 也可以繫結計算屬性,...