|
文章目录" l, u( X( N. R6 P4 d, G$ ^
前言一、ref属性的使用二、props配置三、mixin混合语法1.简介2.使用方法3.注意点4.结合实例使用①全局混入②局部混入# {$ ]$ h* g$ B9 @- Y
: i3 N5 c; n* E0 [( P$ r! G$ ^3 ? 四、插件的使用1.插件语法①定义插件②引入插件并使用: @( ?& c3 ~! B5 |
2.上手插件
5 Y0 c, x; E! n9 s9 k 五、样式混合问题
I" z/ Q; N1 F& I+ l- ~+ } ! h: B0 V+ `/ M6 ^" s% s
4 {; W! H/ g1 \: ~# N+ I前言 + b7 v: l( o, |' l
?& b1 V2 |% ]
在前面介绍到了Vue的一些基本概念与如何使用Vue,并通过node中的npm 使用vue脚手架(vue-cli)搭建了一个简单的Vue应用,其实所有的Vue项目搭建的时候都是换汤不换药。今天将会介绍几个Vue中常用的配置,他们的大致功能如下:
3 l w: H+ b$ y/ K( U
) `/ G* M! x2 L; \ref 作用是将dom元素选择出来,对普通标签来说与document.getElementById(“xxx”)是一回事,对自定义组件来说会将Vue Componentd对象选择出来,获取到VC对象也就可以获取到其中的dom元素了。props 作用是父组件向子组件传递数据(当父组件有更新的时候子组件也会有更新)mixin 将组件公共部分提取出来,哪里用到就在哪里引用插件 别人写好的js文件,我们只需引入并use即可(这里要区分好组件与插件)样式混合 如果给组件的style不加scoped将会导致样式的混乱
G3 P, O, S' @- a有了大概的预览之后就可以进行深一步的学习了,将会配合一些代码实例进行叙述。/ q5 S, v- C* y( j# w' i
' U& i9 O$ P3 [
一、ref属性的使用
+ I% Y- T3 U( x7 U9 g
& C' |$ R% ?: k& e 大家在学习css的时候学过各种选择器,也学过使用css选择器将dom元素选择出来,这个属性的话起到的作用就是将想要的dom元素选择出来,根据ref属性可以很轻松的找到dom元素。- X5 |* N4 E# ]" y5 a/ a6 ]0 ]7 {
' I% P8 t7 ~& Y. E
9 y) ?! u9 y+ z- n2 m4 y[ol]被用来给元素或子组件注册引用信息(可以认为是id的替代者)标记在html标签上可以获取真实DOM元素标记在组件标签上可以获取组件实例对象(vc)一句实例对象可以进行自己想要的操作使用方式:
! L! h+ Z% k3 u0 y8 U7 l [ol]给元素打标识:" k$ V6 q/ i% Y" A* E
①. .....
0 d3 j# w/ d- ] ②. 2 b& ~* h! C4 \6 _
③. 获取元素:this.$refs.xxx[/ol] [/ol] 7 I- a5 q+ d c; u: Q: O6 T/ u
结合以下实例代码:5 E- k) F5 H: C( K- v# `3 B
App.vue7 Z7 b& C8 H! d
3 a5 y1 h6 M# P; T! X2 H" |: ^8 c5 s) G. h2 Q# `
6 u4 Z" ^- u7 k Hello World% H7 `5 x+ O& X; U) h' f1 y, U' N
( Z) c! R1 M" Z C7 w# r5 K4 c
点我体验ref# v' Q2 I% W4 J
! a: y6 Q! {( Q' |2 `# q7 ?. T
: [+ H. O ?+ I; R1 d8 y! L6 q7 q, R* A0 X
: b9 G6 o7 Z' P' p. A1 i% u. [& s/ k
* E ^3 L* p2 n. [Student.vue
" S( F) c* b% j& t/ z8 k: \ 7 z+ W- D" C$ R3 N2 _* Z
1 E* J) [7 \7 q; K+ u/ y8 L
我的名字是:{{name}}7 l9 F/ ]' p4 ?3 i6 M$ |. ^* C* m
我的年龄是:{{age}}$ D, M* [8 C8 f7 t. c) f& K
! R8 ~, P3 P- ^1 A& p" W
[img][/img]
- K' M" k+ ^" K9 P8 |7 u+ e( _1 w
$ `$ E+ E9 q" e 4 J7 o7 n) ^7 x5 Z& v1 h. r
6 Y* l( q( i/ o8 J. F. V& Z
3 t1 d4 ?, i8 }% E0 n& Y.demo{
2 [- N, x8 }# G* V: s$ f G background-color: rgb(173, 167, 167);1 P, _, X. Q8 [0 U4 `
}) L& J, P4 H$ L1 S' c8 X
# ^$ I9 ]6 F0 x8 W# R5 M
20221246.png
8 y! W( u! ]' ~) |
7 M$ j- I6 V p" [ Z
20221247.png
5 E# N. G8 B% o1 b$ ~! j6 m5 q8 i
+ @1 i! L0 Z! I" m% `
二、props配置 1 b2 n. K7 M/ r
[ol]功能:让组件接收外部传过来的数据传递数据:接收数据: 3 b6 t7 J x9 J
[ol]第一种方式(只接收):props:['name'] 第二种方式(限制类型):props:{name:String}第三种方式(限制类型、限制必要性、指定默认值):props:{
0 v. O) V3 i z( B# k9 t) B( N name:{
9 j c$ s! t5 u+ ]2 _( L type:String, //类型0 D9 m5 y0 v" P
required:true, //必要性
; }2 q9 Q9 V& b9 `5 M6 w+ @+ Y default:'老王' //默认值7 H2 e7 a, @: ?# f
}
5 D* B5 N9 V, M}) |! ^, {4 z# R* ^: m, o, X
[/ol] , v1 T* y) V. d0 _& y( d
% {) ~$ z6 J9 e! F! I/ U4 R; f/ E
注意:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制(将数据复制到其他对象内)props的内容到data中一份,然后去修改data中的数据。props接收到的对象被替换掉会有waring 但是props对象内部的属性被替换掉编译器不会发现,但是我们一般不这么做。因为存在隐患。
0 z/ ]$ G w1 J, S* g" |9 P
$ b( ~9 ?; C; m+ [ M [/ol]
: u) Q( D; d: d. z. ?* w- x! d3 `当父组件中传给子组件的属性发生改变时,会触发模板的重新解析,如图所示。改变的是父组件传过去的name,会引起子组件接受到的属性发生改变。
2 N1 e* R: i" ~9 {" v' y$ `7 ]. @ / y" H9 H% I( a% k
20221248.gif
% m7 Z L7 h3 B 代码如下:* x4 U! ]( H) V7 k
( \, B* D) W. E$ Z/ J0 H( dApp.vue9 c' Z3 k9 N- p2 ^4 N
& Y* x8 ?+ M8 N# k2 M/ ?. {
8 Z' @* \# R T# F! @ # B- R' w9 N" c* W* S2 m
点我改变传过去的props5 x8 b4 i5 O( D( H+ s/ A
2 I% x% X9 ?' C/ P1 p+ P/ s) f! o
1 @- U6 [$ T7 } s; _6 |3 X3 r" [# `6 U9 Z( O
) N& X0 g* e R5 }# h ' L' H) V l; Q
Student.vue! w5 l0 U8 U( S3 ?4 K
) c% P* h1 h7 s6 K$ @2 s$ m4 d' T' B , Z1 s4 u' T& G& ~) R
我的名字是:{{name}}
0 O+ b3 @. Z: M# S5 F4 @2 \/ x7 C 我的名字是:{{newAge}}岁了! S: [. m# e6 Y& u3 c* y% o
点击我进行年龄加1
* J* N: A2 T4 z * X& F* ]" d5 a5 p8 k
4 | w& P* r: p' ?& f
: ~& ~1 ^ A {, Z9 m# S
.data{1 ^( S& u5 Q9 _) |/ x
background-color: rgb(202, 190, 190);
% @, t6 ~( U3 U}! T% \0 I) L% \ f
1 S! E! B. X L: f0 f. |# V( d三、mixin混合语法 0 M* N$ q9 T: r9 P5 b
1.简介
% {0 _" g3 }3 v7 g$ k( U
4 F( Y: l) o/ e% n8 n$ f. I1 } mixin可以大大的提升代码的利用率,把多个组件需要的功能提出到一个文件内* H' O; a3 c5 I) G/ {% Y# f
如果mixin限定在main.js上,那么这个程序所有组件都会有% M' Q1 d4 D h/ n
7 Z; V2 M" C/ _' U/ |$ Z2 u1 o! D- @ # y: v: {6 o7 w9 D8 H
2.使用方法
7 y, r2 }$ ?* z/ V6 f[ol]在mixin.js中定义要混合的代码,组件中引入,并显示调用mixin属性mixins:[]其中mixin后面跟的必须是一个数组在main.js中开启全局配置[/ol]
: k) h8 z* h y( C3.注意点
! F1 K' t: J1 i% h: z1 N如果你的组件中定义了与mixin中相关的代码,脚手架会以你定义的代码为基础(也就是组件中定义的代码优先级大)
/ g9 M+ {9 w H2 X% H' \但是一些特殊函数例外,比如mounted挂载函数。声明周期函数会先执行混入代码再执行自定义的代码' j/ N- u' S5 @* \+ O
5 s8 w, r. \9 ^4 h; f4.结合实例使用 7 r' Z; {( x, W* h5 G6 J. J+ y
混入的生命周期函数会先执行,然后执行组件内定义的生命周期函数,普通函数是以组件内定义的为基础,如果组件内没有定义会以混入的函数为基础,如果两个地方都没定义就会抛出异常。
8 i8 Z7 _+ Q: k
* ?6 M- ]! Q" d- z0 u$ D- `- l/ E
20221249.png
+ d' d- O, J3 s/ e' |8 U+ ~
7 S% M! ]. |8 t1 H9 T0 G①全局混入
1 X. b; A: _# a5 v/ Y3 j全局混入通常在main.js中进行定义,然后在所有的组件中均可以使用(不需要再定义属性mixin)
* s6 c! K, i6 u" B" T; k2 K& V7 V 语法如下:
% g" F1 G* \7 l& |( Z! ]0 [# z main.js
2 U0 M# ~( D0 z$ ^% h, D
& V: W: |8 \* k8 O5 {3 k5 c" m// 导入即将混合的代码
6 [) N5 E* j6 u# {0 _import {mixin1,mixin2} from "./mixin"1 i7 r( C: f& H- D
// 开启全局的混入(合)
" q7 q) Q9 I& b; x7 tVue.mixin(mixin1)
: Z" u) ~( _+ E, X3 j6 g0 e) DVue.mixin(mixin2)
% B6 y# K$ L- N& E' }" z: j
7 J% d7 f# |# ^+ Z5 P②局部混入 ; u0 j/ P" `/ n7 @0 e: g
局部混入的代码需要先进行mixin的引入,然后将其写进Vue Component对象的属性内也就是前面使用方法中介绍到的mixins:[xxx,xxxx]。; I% j# f8 l6 t3 ~2 ?* Q' G
下面是App.vue中的一部分代码:
# E. F/ I) ]( }: g8 u& _" D1 n k 7 A8 ~/ x9 M/ l! |$ O. ?
import {mixin1,mixin2} from "./mixin"" r" E/ u: | \) F1 m4 G
export default {
) Z) d) M6 |# c name:"App",, Y6 k6 Z/ F8 E. \7 v( S( c
components:{
! V% O8 o( ^. v8 z8 L8 G Student,! l* K* F$ A/ J# R9 I
School4 U3 [- ~3 \ |) y0 v8 A; ^' n% _: ~
},
- p3 s+ N+ N' a- Z mixins:[mixin1,mixin2]
1 |& U! @0 f: ?6 q}
& ~& i ~' X `6 s+ e! y 4 [* u5 R4 W8 ~: h" ]1 N
当然在体验局部混入跟全局混入的区别时,也可以通过以下一个实例:
/ a: | Y/ Q+ ?, I# l i 当打开全局混入时,不必使用mixins,即使使用了mixins,普通函数会以你定义的代码为基础。
4 Y% v2 f9 _. x5 u* o, M test.html
. v; F- d+ ] |- { % N" d5 M5 G' A+ h x7 u8 H
# h7 ?$ d* x7 @# G- ?" U5 S
7 Y6 R3 M9 b( Y/ K9 ^4 {* YVue 测试实例 - 菜鸟教程(runoob.com)7 X+ {3 r/ g- A. q
1 \9 _3 c$ ?, ?% @ s0 M
5 w$ O Y& M( b/ g& |9 n1 H8 C3 h) w0 U) S8 F3 T
t3 ^8 S6 f; p6 W5 q# f , ]7 x2 j5 N' N C
四、插件的使用 ; T" i1 n# ?/ ^4 j0 w
对vue的一种增强,包含一个install方法的对象,install方法第一个参数是vue,第二个以后的参数是使用者传递的参数0 ]+ r8 o$ [" d% g3 t
# J. I9 e4 w2 ^8 A* Z! _
1.插件语法 7 u& H, H. A1 x
①定义插件
$ y1 B8 h* a4 I( q/ \2 m0 C3 Y```js! n9 Q; J1 x" E# B$ S8 h
const plugins={
$ Q8 r6 z1 Y; S5 F // 这里install其实是一个属性5 w- @6 _- Q4 G" S* A2 u0 [3 b5 ^
install(vue,x,y,z){" u) V1 V7 c# {) ^, Q1 O, X) u
....
2 h4 g+ T$ A% D: O }
& V8 k* q" n, k, w& R& n3 b0 h}+ e, {; w5 Z; m$ o; q+ U& [- v
export plugins
: P+ k& Z c" c2 g( }- }; g3 m2 t```
& j+ T+ Q% l4 c; E1 V% s3 x
6 t; \0 j: b9 r7 c5 ]# k* n3 G9 `②引入插件并使用 + V# L0 j, p" `
import ... from .... l; b% T T: I4 _2 |
Vue.use(...,参数1,参数2....)7 c7 R0 T+ H3 i& y0 a/ T' U
! N* |, a+ J" g/ J8 w5 v4 a( ?2.上手插件
C1 I3 X* q! h8 K自定义插件一般放在plugins目录下,网络上也有许多大牛定义的插件,只需引入使用即可;接下来带大家自定义一个插件,并导入Vue项目进行使用。
9 R1 D- ]* D# x m5 Y
( y6 S* A# H' ?9 C8 xplugins.js! o. ], S( C2 ~ V( Z9 B
' e, q6 R8 T# s7 d Lconst plugins={
9 i( }" a4 A4 r2 W, O7 X; A c install(Vue,x=0,y=0,z=0){% w) z) @3 }6 W/ ~
console.log(x,y,z)
1 Y& f: b5 U$ V( L //全局过滤器
. a/ n9 \2 Q/ I6 s) ~+ J# i& y( D: ?8 T // 使用到这个过滤器的地方将会只显示列表中的前四个元素
& E, j1 i9 B. u7 v! L% k* G! e9 L Vue.filter('mySlice',function(value){/ @) m$ g# c. D' ~0 B" f" N) G
return value.slice(0,4)
* B0 H; e2 n% U0 Q# Y })
2 \' a% n+ } V( p& u+ j% z. M' N6 P1 R //定义全局指令" c, l5 m# j# n' A2 q
Vue.directive('fbind',{
- Q0 r; n3 `8 M$ c* }) w$ ?3 n' T4 ~; f //指令与元素成功绑定时(一上来)
! ?3 a7 q4 a6 B. [ bind(element,binding){( N5 O0 v2 w. r5 ]( d8 `0 D& K) D
element.value = binding.value8 ]( L$ ?' F# w$ z- l0 T0 g
},
( Y1 o7 h: d: x. T; E //指令所在元素被插入页面时 c8 N3 B- M5 ^6 s+ `9 ` D& G
inserted(element){
3 f( S6 @5 d" q element.focus()
7 T8 U/ m% J: f6 ?" M }," a; z: z3 D% G( }- ]' e: f! h2 _
//指令所在的模板被重新解析时6 N. `; o9 T9 `
update(element,binding){6 c+ q8 X; H- q! d. |
element.value = binding.value- P. h0 g$ Q0 `9 D+ ]
}
7 }+ Y5 [+ U3 b0 }+ q/ E })0 V8 {: v+ G+ [* I. I# k8 K
//定义混入2 [0 s+ d6 `( x3 b% x0 ]4 r
Vue.mixin({
( r% B# q5 ?( X7 ] data() {
. e+ H7 Y& g/ z- _) s' n return {5 r# W# M" w& D3 [
x:100,
u* f; [% E- I5 [% b. E% \ y:200
- m; }% w W* j }
8 F1 V# T. x, w0 t S5 C },6 G' l! b- q* \9 b
}), t; v8 h1 [% q* l. k1 Z
//给Vue原型上添加一个方法(vm和vc就都能用了)
7 m- g. e4 P) Q. g7 ` Vue.prototype.Hello = ()=>{alert('你好啊')}
6 {9 k& K" x; D/ b* _5 d }
+ n- O% d9 l% }2 L+ v+ h2 {}3 z# `+ M$ J: |
//暴露出去
# q+ P. \) _( p: Uexport default plugins
. p1 M9 l) g5 q6 C! i* d
" l5 r6 ^ Q, F1 q# |+ j. B引入并使用插件
& P6 x7 u0 G1 Z main.js1 @5 R8 r; U d& y, }% p \( l7 o
1 @5 q* Z8 m- b! S3 b# F' E0 d4 Pimport App from "./App.vue"
$ c3 V4 o7 x+ ]import Vue from "vue"
: @. d6 x. d& l//导入插件
) N* [; \4 E5 N4 s8 e/ M9 d* aimport plugins from "./plugins"" I ?2 W. F7 P5 V3 I h# j
//注册插件
% Q: p* Y9 `% F4 U iVue.use(plugins)/ H. c9 |6 }) g6 `
new Vue({
! D; v6 D) ?, R0 e8 K$ y el:"#App",: g) e. l8 s1 C. h+ D
render:h=>h(App)8 W( y5 [0 v7 T a5 O
})( `- O: R' I( y9 R+ v
$ Y) t* V0 i0 \! U使用插件中的自定义指令
6 f* q+ G3 K4 ]" n* l
; h" A8 @' H' J- d" \. E7 u- ]* C
: O/ @2 Z' e3 w+ } 姓名:{{name}}1 o* @) X8 a- o; a* [
年龄:{{age}}! l& j. f) {, M0 m; U/ `! n8 d& I
: i5 D7 Y7 W U4 A
% T" [0 }. j# O# ^: X2 R1 `, B1 K7 G# R, x2 c: i
& `4 e J, N R
" i P( _5 W* a' G& c8 _2 S9 Q 1 u! C5 ^. U* A6 Y+ n8 n1 t( k; |
五、样式混合问题
I @: p. d+ U6 ]描述:不同组件中如果使用相同的class,会导致出现样式覆盖的问题,覆盖规则是父组件覆盖子组件子组件根据导入顺序,新的覆盖旧的。可以使用不同的类名进行区分解决问题,也可以使用scoped属性,对style属性我们还可以使用lang进行指定,我们是用Less还是用css
x1 R F2 T3 Y1 N: z7 I 原理:scoped会根据经纬度、时间、使用电脑型号等生成一个唯一id,然后将这个id插入到对应的标签内. [1 `' [: i) O& }( j0 N' b* W
再将相应的样式转换为标签属性选择器,进行样式语言的限定。默认选择css样式语言; p6 V+ n# y3 j
- B, X' M3 e6 G! ^ G1 g! i7 e
.demo{' h8 j4 L. l3 t0 k3 A& k; k+ _& E
background-color: red;
0 a R, i1 x _0 c0 |}' @8 C' p% T$ b* b
! \3 W. N- A- }9 U3 P$ e. Q3 A" I6 e
2 Z4 e' z. v, M) V9 D( |9 l) c, w, |至此这几种属性或者使用语法就介绍完了,大家有啥疑问或者好的想法欢迎评论区留言。
7 f6 Q, T) i* Q3 c8 }- T, X
8 b6 c# ]5 T* w7 O+ e6 K
20221250.gif
|
|