1.v-form 組件具有 three 功能,可以通過在該組件上設置 ref 來訪問它們。 ref 允許我們訪問組件上的內部方法,例如 <v-form ref="form">。this.$refs.form.validate() 將驗證所有輸入並返回所有輸入是否有效。 this.$refs.form.reset() 將清除所有輸入並重置其驗證錯誤。this.$refs.form.resetValidation() 將僅重置輸入驗證,而不會更改其狀態。
2.<v-navigation-drawer> 導航抽屜
3.<v-overlay>遮罩層
4.打印屬性類
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
5. col-x 例如:col-2表示兩格
text-truncate 超出的省略號顯示
6.display 對應的值
.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg and xl
value屬性可以為下列之一
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
7.display:none 和visibility:hidden同時可以起到隱藏的總用。
不同點:visibility:none依然占據空間
8.邊距
{property}{direction}-{size} 例如:mx-2
property:
m- 用來設置外邊距
p-用來設置內邊距
direction:指定屬性所應用的方向
t - 應用 margin-top 和 padding-top 的間距。
b - 應用 margin-bottom 和 padding-bottom 的間距。
l - 適用 margin-left 和 padding-left 的間距。
r - 應用 margin-right 和 padding-right 的間距。
s - 應用 margin-left/padding-left (LTR mode) 和 margin-right/padding-right (RTL mode)
e - 應用 margin-right/padding-right (LTR model) 和 margin-left/padding-left (RTL model)
x - 同時對應*-left和*-right屬性
y - 同時對應*-top和*-bottom屬性
a - 在所有方向應用該屬性的間距。
size:
0 - 消除所有 margin 或者 padding 並設置為 0
1 - 設置 margin 或者 padding 到 4px
2 - 設置 margin 或者 padding 到 8px
3 - 設置 margin 或者 padding 到 12px
4 - 設置 margin 或者 padding 到 16px
5 - 設置 margin 或者 padding 到 20px
6 - 設置 margin 或者 padding 到 24px
7 - 設置 margin 或者 padding 到 28px
8 - 設置 margin 或者 padding 到 32px
9 - 設置 margin 或者 padding 到 36px
10 - 設置 margin 或者 padding 到 40px
11 - 設置 margin 或者 padding 到 44px
12 - 設置 margin 或者 padding 到 48px
n1 - 將負的 margin 設置到 4px
n2 - 將負的 margin 設置到 8px
n3 - 將負的 margin 設置到 12px
n4 - 將負的 margin 設置到 16px
n5 - 將負的 margin 設置到 20px
n6 - 將負的 margin 設置到 24px
n7 - 將負的 margin 設置到 28px
n8 - 將負的 margin 設置到 32px
n9 - 將負的 margin 設置到 36px
n10 - 將負的 margin 設置到 40px
n11 - 將負的 margin 設置到 44px
n12 - 將負的 margin 設置到 48px
auto - 設置邊距為 auto
設置豎直水平居中:class="mx-auto my-auto px-auto"
9.purple 紫色
darken- 例如:darken-2
text-"value" 里面有 left center right bottom top
text--"顏色" 例如:text--white
10.elevation 海拔 0-24分25個級別
11.#pannel {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
在vuetify中可以定義為 d-flex flex-row
基本的類有:
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
12.v-ripple 波紋
<div
v-ripple
class="text-center elevation-2 pa-12 headline"
>
HTML element with v-ripple
</div>
(2) v-ripple="{ center: true }"
