81回答

0收藏

【Vue 快速入门系列】ref、props、mixin、插件使用、样式混合解决方案合集

 

技术问答 技术问答 4817 人阅读 | 81 人回复 | 2022-12-12

文章目录" 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

    20221246.png
    8 y! W( u! ]' ~) |
    7 M$ j- I6 V  p" [  Z

    20221247.png

    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

    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

    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

    20221250.gif
  • 分享到:
    回复

    使用道具 举报

    回答|共 81 个

    我可爱的太阳

    发表于 2022-12-12 17:59:48 | 显示全部楼层

    在撸一遍。。。
    回复

    使用道具 举报

    邵奇微

    发表于 2022-12-12 18:02:44 | 显示全部楼层

    向楼主学习
    回复

    使用道具 举报

    其明

    发表于 2022-12-12 18:05:25 | 显示全部楼层

    路过
    回复

    使用道具 举报

    就一句

    发表于 2022-12-12 18:08:40 | 显示全部楼层

    学习IT中
    回复

    使用道具 举报

    思恋的风

    发表于 2022-12-12 18:10:24 | 显示全部楼层

    看起来好像不错的样子
    回复

    使用道具 举报

    真实的自我

    发表于 2022-12-12 18:12:38 | 显示全部楼层

    佩服佩服!
    回复

    使用道具 举报

    韩潮

    发表于 2022-12-12 18:16:07 | 显示全部楼层

    非常好,顶一下
    回复

    使用道具 举报

    晨曦余痕

    发表于 2022-12-12 18:19:06 | 显示全部楼层

    前排支持下了哦~
    回复

    使用道具 举报

    李三三

    发表于 2022-12-12 18:20:31 | 显示全部楼层

    非常好,顶一下
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则