From 37051cea69938db13e42471ca32a975cec206a44 Mon Sep 17 00:00:00 2001 From: YuJian920 Date: Sat, 7 May 2022 23:03:15 +0800 Subject: [PATCH] vault backup: 2022-05-07 23:03:15 --- .../Images/纯JS实现下拉加载.jpg | Bin 0 -> 30456 bytes 随时随地/Yan Ruyu_Vue学习笔记.md | 205 ++++++++++++++++++ 随时随地/纯JS实现下拉加载.md | 60 +++++ ...e源代码解析$on、$emit实现原理.md | 50 +++++ ...础教你用WordPress搭建个人网站.md | 164 ++++++++++++++ 5 files changed, 479 insertions(+) create mode 100644 随时随地/Images/纯JS实现下拉加载.jpg create mode 100644 随时随地/Yan Ruyu_Vue学习笔记.md create mode 100644 随时随地/纯JS实现下拉加载.md create mode 100644 随时随地/通过Vue源代码解析$on、$emit实现原理.md create mode 100644 随时随地/零基础教你用WordPress搭建个人网站.md diff --git a/随时随地/Images/纯JS实现下拉加载.jpg b/随时随地/Images/纯JS实现下拉加载.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2d45498744169b6799f53cd16a9af1875fb03759 GIT binary patch literal 30456 zcmeIa2Ut`)^EiB#-n$4=7AYdV_p(YydKW|ymIaowz|v7!MHB@DDbhqx5D`I!u-^N&d%f@be}2z*56_;HOeV=>GD&78350&a5M_jJDAEl8OiTb# z005`}N(c);3Wgxy9{||}kZ*+nzy-qfE$j)|`vr#t#E}8OHvk2HXo&1qm<i zc~uz&K4L&lRaP1-1pr8|LcY^?mE>z3q!d?4zlI@4w=e;K0z&!)m*U5^K={A61tR)m zTSy?^%8(`bRyKvsm+}n2FUS>O>r3b-%m8#-t#Hyd0U(4~fMF{JxSk~95ncmP038(- z6*UzdH8mYGEe$R64n{gU#vL52tUFj)Ihg6To-d#6$Zy{edRkg~26`q21|~KJ1_n0b zi-B!B3-f*J3pSF5&;WsfRFXrs9*|(-Lkd7h$jB)u zsi_$V5dx5qeobToAY>3y5;78UN(w4+QaU*>k(rciH;WAUehX(-e*aUl6l{st zO0@(8cUV4kk&{P9c4|`!C0Wf4&BFr}*mKKH@6k!NcGa!R3sl_MWiyOeD37Y|4jNh1 z6Hd8)rs7gV&*)NqWn=HyvaMV2+0+~NnqG~sDCyg|heW3pR5kZ~TxAAGNI+`IwrHZH zAXnHTVYdtm8AyRYKP$QHsYEs+1y3zI=i~%khR~5o+EzQ@0rK-g6hs0j_bAkLfkfo( zbk(&{3`7inBjKM@ApD&K!XQ9Lx>YAL00Wk-lMIDK1d|L87z!p?CK(E*T;Bq~^jE!) zMFbE4yGJrXy_55kN)Ix3*Kh8c#W&;bT?pR$cu4esM8J`b@r&cxR3>(}#CS`Q<%_Wp z`gO{kLWcK{f=M)%V2LSUi3Nm?A8HZW8LblUb-1*FiKh+vE;1=YF!#xa4(Tn1 z=NroK>7-vFTPxTv`n4qlfYA9<&5B0Gi4|=O42iRb#;FQU4$@9)MWuHQ1bsr8;EOyD z@G%2Nf?kz+Kb_)KIDa&ty;m72UU69-UxYhA0H!=Y3Y_K*Gi6;r$&!HUw##Zyri1UD z36k1Od(bo)%BkT(POwuQ*AxCop(#TE9v!nibg3ry zd4qDIz}=5d`IX`ivEqAtTWeA(<{zFkTjpBI!Ch(^!}&~c(hu0XiJ9%WCJB3875sks zRcZD|d*^%2T;d^JrK2^?!>dL~&2xnY@9e2Cw!DRyca8R%LL3uuoCLrj;^Ime^l-Sz z{&&fewH{a6-8u=tY1INu$06(5W33~ojsBT}iqA)U&zzfn^IZBho@eMzeEWv&gG~j6 zsm{jA(#Fry;&*M1L``ax&TMGTyCh_fl{$Zjmkzy7eJNYuNH%n{5}PBFEX7u4N5x0O z2D?oF{L(A$TzJAED_lBnnq;K$a9iq<49y5#KXe%=lBrU!P;sj9a;O3?^e4P`^$a6& z!&;?z^)0p!%inkJ*6i)xgGw^P-0zvJW&LFqJ}Ix$G2VPSc-$dG!7zGvbCMj{Y1ToU zc$k0O#S|(sW&)tHD6G&HkiL?t5$)AK#DIimj^8*;04zTBhc&3l=1%R}U1L3Q6xxb< zKmgh*bLN7IxgrYe@5_|m3dOy4a2Ue*#E0OI9SVIca2DQkq8u+Dk(7XYot&1~$~wUf z$J%3Jg|m&Gpbbw_Tu-idpzK0_65F_P9AA3H1pf4b6m03O!|RDFl(dk#HqZ97giV{o zXW1u2ahEZ7pVy99w9eBp@g~pm)^|haN8^siBcbLWcvW-eU3xZZI=!DdKYR2bV1cVL zPIW^8{Sk%-o3mkBvQ(4{cW64Rw6BwNH1qyt$ET73l>rGtCNA#n;^lH_PGfl`(QN)t z^fcI#4EJV$FTs3pz>5&Nf95m@Pr2Se!grn**=1-%QCX`4nKK3Pz~S_5P;O@&Aj~jE zeP03PB&7jmEkhGBp{>c7Y3u#NYb#B43(yC?iRr}E2momP&`4CESx}%~P#_p3F4=&2 zK%kY2udnwOh9N2tfj|ZM5EF>ut*?(eANXb5%4>xTC1PkH1BrQv$=hWj(5B8l2y5Mg z)*xuRvh57!XkTA9D@0(BpP7p%984tl*zKVd`xt{FW(H{dzNLe)t&CdUfv7Ju(76O5 zy#tY`twO+b>Md+-6MLiW_Nx(#AdvuH-`mLYLmSQf0+GI`05E+g5mVbQ5cQR8K-=2| z{VihY9$@kEJ2#Id;f@B^IwE8G(4?(t&+?big5wr}{v(Lp-1O#|Qveu*0Fm+#id*|U|#@TF4l z13L+9%NzX`jHs>hZeeo%94B4eic@dB!53sJ7pTb+ADV6HCW5ypSl)sf08(ylV2U^R z26azj>KDkhjLdHk*)6yO`2LEcumvGX{ujtrnQLGi0Q>-e@DCr-PsHSZm_+!Mv@Ko` ziv|bd7fum1{qHg9tr%pRA7n(TiF6YsO=2rA)fVK-7$(^VW(0poTTfE(doiyMC$O6Q-Jou9V6t>GJ?XzHwfh#@S9lx9w-B*5rqjL4xMlE z3C4dT-+G*HApEL;V{nOI3#r&TkCIRk0FHaQC-htN6?muBMz!Bcw)`-wR!vF(o6XUPbA=Ov# zPsr3BzUc7%-bnYaoMPN=yunv6$N)-Lgqw5F*7Qsrj6ete19aQ3;GfZHUEH;Oy?xO? zFqe6|d@cQN2}B;7`l5)urVjM=0~huH#EA8?HT<_V{5x0Je`XDDtu?#B)dc{EW(=rTg61i(e@pdq0T2KmU=DbIYG5Gv z3)l+zff#K627_-)Q6wsh#N}(Nj%^K-a@*Gn0SH43rXGQTeyUPZr~pZ4qF-7P?&~8J z>g*>4I;Eumby%pMGu#Ui$mfCpH7E`K&kt((`H-#}{B{Z^(k6b|2oIz|I2vIUZfXq= z_kydq^20Rw)I(K6ef)e7fzEuPKHjJR)ld!ot-@8oFcB=p&$opV=%vBG`IJ;7WfbM5Vmxmv$4ejct zYN@05r7ke0!T+UEAt51>A##$wXm=?Y6&0`ySt(gr2@pdfAPg1g94dhd5cpbx4k7@K zMsC^He8dt#+c79mgCC@Hy9qvi--`W*y!wjh3jc=Z2dZ&fmAk^F5Z(wM1S&89enrgpHM-OaRsgUe~au2S9SA6`#6IQM*29rBcwe2 z5bpeZ-}tDyrD%dRgXGEm2shN$23<04NN+G90CZ>Y8R}{)%BUzRO2|seY|(3CqH2f= z2y{ll5r#S%{2+HEkw{lnC0T^LvOHW?LfKhSM#9-mUO_^|SqUy7@2uqFEF&+CaCVjb znqS8k9z>J@V*c&n;OYwp%lJ;7qMVD1qMWmvgtDu$oP@lrJY2#V?jj@MCM_-NjBqAC z%3n*{wqKmRe=Lt|0HK0!O$g%PJD( zeoK^84Uhp~Cx?9*NmdB|FClLv-@8Iyk`+gWqO$&95`?-`~GE@HYqk=D^<^_?rWNbKw6+9QbYF2;6{QExQj^CtqQ?&1oM$XH*yfY`2-13t;)3akB;9e*MeDAMpNFkl44|>5CRyeFkA~`wsh_^E=Ep z7u**E_YO%feuuea06^6l0N@z>4imfz`b44t;NHt0+QUwimmiFMBmyo;Wazi&-y(d& z{O5rm>XRha_suZm)7jn(;Uh{l9NgRpLh}WH{t^VA#BYW8PiOprtRLtQw?w!h&klRT$!tHAKn!lnH5g#MjtAJBBmt(EYyjy@8$iZN z3y?ZygDH@2{bo#U3p%erzZUf4w%mhZFn#O&(~BeljFJQ(-T8=MZA)uDcn~_67~bBH z0S|Z3fKD+sa7UCE5CHZ95}^f+(|I19uA z7lBJaCXfSM2MU2ZKp9X4JOrKsO+YKq0rUc|fe*kKFa^v3E5IgrB9Ib74`GFHLZA>K zh!{i`q72c5=t7JkmJoZ$QHVPP1qp&2hn$AQLXsevkZX`aNGYTS@)Xhn>4XeGh9DD= z1;_>oDG4138wn4|9ug@MWs?0QMkLlGhe_N?{7J$|qDbON(n)ejib?K~JSAx*=_UC< zGDWfs9@wNMWhdQDDnY7Ds!eJ}>Oks7iYAR9jUi1X%_Y4?YYgvIeqlvLUiLGCVmwIXAf&xhlCK`9X4b@(}W~ zJ-DC{XbDUMOZQCy)Yp?E^kNijmPOi4+}NhwCD zL1{+mOc_XdmNJ8~n6j3#i*k%|jf$2EN+nCBN990;qKc$SrMgA+n5v8FBh@A~6SWYv zDzzE4D|Hxk0`+z3`_wO~$EY`Hm}!J*G-#}8JZVnRq|@A?X{32Wvq(!z%TKF9Ye9>o zJxQBRdzbbZ?GWuc9SfZ(oi?2#T@YP7T>;$_x&gXHdV2aj^!w-?=mY8F=?m%W>EF?> zF|aa7G8i(rGGG`kGu&h7Vwh#5W)x!F&v=9}oH3QLobe^&G!r$`9wu!jXQl|I%S<&) zeN4;DtjsdZX3Rd!am=@vTbMtwP_pb{(PeREiDJoPsb?8sC1n+0)nS_ zM!_b`X2|Br7Rz>=q`(0A-l47HSU_` zV&hWdf^)@im2nMnlW>c2TXG-c&f{+5UgqKD(dY5w$>6EyndW8Z-N)<6o5K5;cLK@^ z)r2CUDbQNzB;O9c{e0eh>3j`*bGx~B8|)6+eQo!P-JATv{5JfN{3ZNv1!x461>6Ku z1nLCl1fhZ^g2x4m1P6tvg_MOngwlkXg;w_n@3Gqxy{Br=Ct(g@L*a1YBH=fC>G#6+ z`tQx%+ap3DqAcPiaz&&=ltffP)I;>L=u0sYF-0+?*cGu(adL4Lag=zjc%KBF#D0lj zi6V(1Np?wN$w-Usb(p>w1Tv^^mXaiGAuF&WFlqm%Ph!>%EDzY%l638 z%jwBstZ_}_gC?KmQO&EGA7Hy- z&ahnA@IHZkuKRB6`?z0Zzvuqq{j*xqT4=3GtyOJR?GxHhbVzmdbz*d0=(6bA=w|A^ z)8p53*DKPS(^t?xrvJo%+`z~n(V)+e#}IBA;Bt4MucERz{gd!^WbHt)p$B?W&!QU6S30gHi`i9Bj4UWskJ4cA#{yb-3ZMd`S1ur9)$m z3XW$TUmX@c9D2Cr$gU&aM; z=bGX=fzUuCAwIfkxFxxLa@TNAcAxNod8B$wBejv4$azl#&m7NHFEg(KFM_w7cZm;` z&rzQm6bs4=)!@tP8|vHXC+2t7?}NXp|0Vx9v=RD703_gWKy@G+s7$p5?F~8;G!(2E zd^vb6#5SZnlsOa?+7>1nc0TN5xL$bvF|uRuV|B-OA3t?`=*0dL*CHShE)jJY0ZbHT z?4&^Mf`Gq%j-H5$`D?k-|xM_K_p-`!? z@D}&2gd&onprVOl$KsCLI=8FuNZh$r!d?=47q}aAce38moMvbu8R@;enm6sJ5@}tT|9qcVF#(d#qlCvakE0$FYQt-npZGnQ ze(L^oq|T}Cb^XEmo(7AC7mY@Z&zkg_>YMjB*FMvD_OL~@rRKTv^Qu4`rQ?35dgtRVSl82To$jU{!=Bb&)85WkHm~~o9Q!`>yY_z?@E({S z3?AHkeewQAH;3HF`0i)QlsB!x7)Q`}Q zg`Z?UJ)F>+=$Je-IX2}twK;uuhIuAycJFM(=Y5~s<_^w{&7&aOLfcU z%kNfvRyJ2-);QO0t}CxMZ`f^o+zi1|V$*RVxchh`{2PJ~c*5)Z9Rs35uzkmXf{cue zoQ#5;oPwGH{LxZTP*Bm*(a_M+(9ki_Z9QK;+mYYCA>bNEPe;$e#KiFncMKp$NhwGn z;Gz8QcMP1tI|iUy3tlN9K170v4;eWr2?YfBa>sy#g!IQ$@C3mRcMM1%q{KT06qKak zizEO-Ldr}Akb{>D_FGV}I)j%C*klv0QSR72<3A+F?lLEcj+__LmbXgEErSQtDd-3% z=ann&v~~@w?;57sbDEllgEJ~cSMPd-ZMV(dT?-?N#Cryapfi`Y?;8A*s|Lyj2R%a1 zrQfW6*8gcuM8(h^8FoISu%=~TVqH}AfP-gvOy;fo&j%+rw(lg6l9Pk?B*>^pNqx3X zL=dk<>?gMXDW>p0l_-0ybdK$5=a7Kb4oesGyquuCb|ia}l~69ctd26EOJP{&^iJz! z@CF74=N?7fUBa$`HcAV5<@I|-xm2f0y*`|GT93{1-{r_S|(P{t8v*f(4!N zQ&J|ghLD0f#B@GUE9*-ZKPsu0H2)DQ&U-)32wy5j09Z(+@MbTuUES+%U@xeu z6=qn5voGKtMlI2bvaZ^RrlyI9H91Wj61dqcX_?TztGHP7y0iw>8-$>hpTvj%!aRc^ z^!^vw6D(Spdja1?v3}AoQj3b5Rx>v5g@{5Ni`{yj7RL4vkDkFo%3~k&)40XB2m|(o zh$u#}(Cqe2jfyheH8Fpz?ED~Scs6Y6T+8)OrAyqfo;_k1ZLfR1imI*89$kBM!3`?u zRc8!KZ-lyvspN%XUIeGsTx51vLVow3bZQ?EAxXZ`;DJ%VqE}hEKft3B)Rj#Dt7htCc(U#l0Eyj+p_8 z{tlyO>;S&gX{P=B^ho{7o(~s7A0Lu6_o{C9%Knul1f0rW{a5?%8*%0i@v-@y2gt|D z4z#X-S9z?4@9b?|;;v;V*aN%XH?n?P#ZOzfM?w+@9p{ldp*pp6;U)n{5UV%bHy7_u z0OV|HU$rIdWN<1DMdKr21=wlKJUuV3BWC}+0Ja6^G(JiIVss`R!%H7to=hql@C1(A z+L1=($iv)p34jPK!oDKuc!n|?r?|T8=izv+D004ew5Yb2JSkA|$?WjM=WAA1VWvK29!>Xn3moNTAHB>^ zI|%@RTy#BZO24v{6Z-x)eL>VUv^*V5a|)k+dRJF=^DS4N07h1N?b4$@$@=Wj_J(d- zN111$T3yL|YOeW;B-?h`;rhu@Lrx1P@i@wJxQ`nHmkyRM6x(AatO>wm&Su)K1?P{O zZJ4Ed(0R;ka*^1S+LUWe#U-~>__lMNnn#*nOP9H%2-WYdb9@*kAmgvNV}b7NU!w5* zuQd^Y#~pVhW}PfM27Eqq9gEc)d^eu+g0erk&V~RWGWsj|Ek3kPCd|FW-hi!v0=&Pz zr9ehK6eo+{O8_X$)>fAiGc~Jx3I%T3Ry{m<=6-n^lHb?=t=V+-+98o1WPZYiMOvrK zQcD$sfAWSb)EX8eau#0oS7?UdrPBYc%67}9_*0H!;G^>7$@`Vn1VH~j$<_Gz=P=Zs zS(y8bBm%jt&YQuYj^4<_Z$P{K%RdY+>&%TNbW5$4;bUfYI&91(y&H$!nhdTu^gzo? zD_j-&8XT|AcRl5?Y%Zatt)Fs6*1Au_cp{bEp|@ZOL&l4o&wiLu|D-+*UgZ4WvZ<)l zy2!C}^uEly{_4}V6@~ZGaj8}hbcGl72*6w|GC<7aCUbRbZ#>2t^S*h*-@lTB?v}-C z!HAr-^BCPjy1m0aGsanTO46kq&Vd>t(dIOlZDlytZ`ePaZ>hH2cdT3Hi0IjD9ygk`^M^o3@v>(*{;A6$&h zq{p;e_Ax)ZZvR(G=-RQkMIpZ(`R1%f)}BXngIAmc#s`e%Q%Vyk51XXd~q;|8<+jhKTm8CAM1iM2SQ`UBycRzO|J|kQhXJ0*7>}Ia8 ztltNn(&Z{R(s;tzH*Du>2y=1l%rn~@J*za%s5Ud@)MG1F*Fm*noHkIt===FA%oFD)XmI}h6zBc&Ql^!#Ric-BdJe`-E zo+R!=oAVj4G`T#5B!szZ^%P49W`2zGpA%_3lqP5HRdq(rxwxm!A5eBUtUe?ro~Cf; zkIlmW6~)BnhC%%;cF179b)uDN1&2p(ZrwCBv7Z`FQtvs5GHkRJ?lIQ9$2#=eKW!tG`~@0GexPsJ6YK@Qi?O~WznN()efBZV>m?oAuv5d)W~A3v=RAhy zH@4uGG`jRA2hVlSXgG6b+6Bc>S$8~)_b56tU`nSccH`rDgihqEYmE(z5y``yJhG;-?Y3E(k>x3%qh z+z#*eo?-VA+c)>d;ANAZ-zEQD9jEJRD_2SzBT1uUY*aS#2mmj>Y_wgVu})HEsTHq! zE&t6^l8LK_@{BVr5+$j3N0u-~rfiCbw2YrhIi zyv%;u+deO2&{S5fNfe*i5hJ|r`mcY=3{@`mW8u-jo_zLvb~vk^m1 zLm3XNo1ZWTl?R`07Gi9qD^Rv~s}}il9?~_Z7qYMMMBdR&{)aPq4ZB}^1^GHdVE*~ojYdiTgqExzPD&9&nX1LU zjH|Dw#H8mgvElhME@-wrl}vfh+tH>v=;gJ3<@j~lqP?R$gNmXNBaV$Za2=eiq_LW< zQzP5t%SEpJnUVeyMbM8&j8<<4&@! z8ai=kJ!@ADrvq1TqZ?N;UwR?@$|hEs9m84mCn~NPjuu+g44WFU%f#D==#}Z251$_% z!k2R=s|fhV-CG~Jbv=|yMvZZ)NN?T-3ciRB|G-re#CwWzT$UIpN-CS z|42$if?cjCLOh9rFP^G(a%p2UIo2kLRz;xf(Phi{P+t7_sKEiIk)Dxf^9r!fm7APt z&3gNulXAvARIZPH(7kp!_Nj}Yp4)MYk(3hb=LRd=>igZbhW(dS3X&%6-OEBRmcfce zZ7%1s`Bt{B1h8qTC<`@moTF+w?$m(}%}2=7}M=PYIVezex|!Rt5pQ=I}#HAy1gZKd<-DMBh}p6b=-4I{&& zN~N5f={YncH5_|eG{!T$ZXLuOuz%#9?PcFV%4~S6`7-`#T(ZMhq)f|RqjP%IaBw2s znYUj1>L^0oKPA-gv51~i{UiZ6Z@MI7!u|x)`p{_}lJ1c6SqO(z3CGNi;LI;P=eqJ` zq808vJ~VbkGI!PDtO`(a{dPM6_+VQgCmkGdyw=!tc>L8+^Rj`AhW28CR!nZwi(};j znTb*(&+wd;jnlJM%Lk;vse1~&GApxm-Ut`V^9cKCk*<ik&Y!+k4fY-QGH#)CDVb?dK5ZM-XBIZ=2sZQgF# zGWJ5ip_+Fi7By)&q|?T@t9*ana~bG(by<&Vnu^i*YEJ8ikroG-tbKb~Qk&tPO10!H zVb8vCcc&M}B*9kfj9#|L_K;r~FCYNYT?C-P)G8PByS$&emW;Yv*2%OCDz6Tuj(-GD=RcOXZFg>aLZ$pf#y@IV6?TY0Va2bGyC&eOuaw zJ8Y*X0Z_-}BOKf_905v86&~|^}{4!4+Jtu3cb0Y>L2RrU4Lq*4{d(97@l5Dhm)8;h(=H`?H1c+a!wGiB=1vyOo9cn( z(9#p=8<5)(K?yM$>IsC-A4GRMBBp=58ZekNgA$5bF09=u>zM|<9>|JY}u$ht?Sveb?)#lH& zW$ihPpKE@?z1wKQOmrXL!i!5gO%*Tp97}(yGQKh4@1B9rdc69mv+3>=j2;Y~lf{*g zT7q@ZB*k4O$E!#HxTO=HUgf+sRJ@?9SBSmJSnal3(edJ5$tP)l)*12VtjJqp2WHiN zs`6uPo0=T*<6#>{Ls$Fe=hpNaQ`x5nRFs!GH0q;qVhzDr%0aA)>P{2sv)k4ct7b1XaTSF%x?EJM!aR@} zBjt5|7WZ_t=%OppzwzMon?Q|u>nY>Kv$X~O2WRQ#5>`Q>;3z2F)c)M2{x&C8Sf&n> zJLd9gELs4*VO(X5ectVs>&aAEw3-;9OaK_qofs%=?_cD4GLN|*9QweLa*|v8)(iae z6_{mL;1zX?Q=3>hyJWVjp4w;n>jm8;_w+8@Lwz&a3j%c|r*~M}q-O$}q5CRWjkS+p zyB3<#o+~3%&vd-*s=8*5d43Tqfag-&IMVPk4XqB=X@(bi<*DYxpmAy>Z3#1+?Ozgs z49l|~<7S~(?Vp)=jVsd_1$Vlh%)f{=>Q9$J>7SRHz%<~u*TO?d9pRLqv{<&}JjiKjM-V#U7g5@^`> z`Ghu^5uHp!t(yXk<^hpxxQM;bl0ghx^7_59gARl7RUxUJCwQ+0tnER3Qp`wO+^vEs z9r6#l+`#zJ6c!$mZhGj?&Ti8-f6mHg>#i_CNnoZ}k^~sq1+lky=!5gUK*epmPqKiy zQ5z?Ka zK3+8D>yyZiw2{f-&663sadGUy@gQJPztNv8xAa-bf{ISAzVsVGMxk|fQ&3QD?N?t} zp!OLJb>-oewZ?M@G4IwnXzc3Zy~{PzcbvDzOQ(i9jAQWjTrHLfFQ8EKK$z`u&i;V; z;8cUf<+3Yki?sXi=e{`dLVM5x+$f237%!1RAQGgUmJi2Eb~Q^zr0V*FA<bz$LF8#Iai=67gxh&^Gw#T5~IBCWk5OAH!pY^*Hw^}Gbd)1ks0x_J#7M1rNhB> zdAM=eK-$E2v1mp=*WT`K&Heu44PLcaR<~7?>CcX31V9lwZ+h9{^`ozIACFhN=FwN_ zSM*j4;d^q))%l@Nx28>{VGmdXJaQsUzCXLo%b=}qmEW(w zG>*As;Ho4WYRUWzQ$OF1@j}ckb;Dk8Lnq$Mwly~2JU6>c0P;`JW*=Xr-cy869M|CO zLEYWxOJZDR?KWFO$|+G6(2c#XPr$8i_OU9iJM+$pfd4;}035$E&YJpd82rZi`u9=H zU*H`%gZDvFY(AHL!@qFZG^plq)dx*ZN-Qaw0KhM2*S&mt6If{Z1S(cRhs&cAAOcw$ zPV;8;FNQ|G>QYO=~|^BuUi(TGZ3LXvzIZ^5LRghA({SPNh)>xR{;Th+@2v z(##u8M&HC-i+*XJ=@OT3XhZJxW?5tLcRjqV(oaH@9QMn4s@C7Bzi^%G!UOdb0uaU7 zc1%CVV+1IyIaWl& zyy|*QfQ4$D<2nDn)6X6wUj-IcTyXeooPInwDZM9W(Ddf}>5GLg4ZA;b`ZvMXnsGw- zmJb0#$~TT;qOLBC|Dh$^w(8T>a-K{2mZnb_vqd-5S_YXquvLhH#LZFD5XvTdP4GX< zo|S*8Izw-EA=7FC3+ut}e9$q0<+ez08pf9)Fkw3`rK~1p>icpTycgPW13uj3zMJ`l z?z0vdstoARzV#z74*9T?D(CmU6uX?W)*>@r|EYxg!J&&ryGw3po+ALZys1|N>HK3i z@~6_4Z)7F`h5dAmXv?TY+xR|yhyW_|`~m!Q&T_f}1&tXNd z)e`X+*FOFsDYK6r^G#zY8P~ag$qSL+6-NE38*@MTGjG8rclXM>lDhgj&4-V37GVi^ zp}`fsw8qwkh^&Z`#oE(&k=cQIjTqf=f#s=IdS<0VX&a57=BiGfy+#1ylKhNcbcG9m zis+Iyo)fl~ULBs}n3u5ru8;s&Lgy{b0?6B}s$*YOrS6(vW=>9v-hE*7nke6@%*DIf zDp|?XbCYAm1&hJ0n@MWmt@poFka}_Cj*h)k9L(HWTCUUcT9_Pzufg5vw z%(42#XX5l1_|5unK`pvxg1Bg7xhj?=?pWkqI&O1Dadoa$dMs7teDh@N5l8n2QC1BrAcGB=#+vDg3yHxnX>}mS=_Q3a# z9;QU}yj-d6FX?w$uv1^H2#U5yX34YIJZV4pY9C51VpB-8~06he_Tb07GTqs|&}l zC&i!jB53b)698H~bnW`8v}5y6`u86iO{I2!fu{-Nmo4Xd+Gu?V(q*p!f)0zby42xdpfUf!Cz#X@kaLL9F z@H|=?Hkkm#f~#%#9dwDo#r0FKEgnR-&apQ6PkEwhOFbF;OBPMvQ*LA}!Vah_XEm># zP_7-yS@x;x$yTA$E-4bmO5ruLbNTsmfty#!E$#x|KpTs1h&0XbT)T(=$ZF*DC$~Dk z?kRi|=aRkH?gdtX)^Q0@)x6^lm&)j$epWq20EG0hOL*_eP1Z`uyQ8qV8ccWXTEbF^ z!XWO7T`DP_6S_(O=A9<8k5KXF`Gs>&WQYAneNg;hVf9(pdi>^;lBb>SJ>U0AX7)|^ zq?|DV5TUe5*RxWBq*o7x0`4@1ds_QX0#{GJQaBjcy0a$HIKlklzFJTFL#`K2^p6c5rxdT&U+=*)3WY7f`{uPRn5Vy!1 ztUV8pV(!;wVBTUTPh{7Z9Xsk;9A;LsCX6KjpISFCv)P9#Hl-pL;JgXL(TlJm+|DZ` zR5#!7MuYatyMKEaJ|&FnS=wW_nq}89iUd~6V~OPk`Ui(s@$R^U<#M~h!v#F@9^qv< zH(>2}P;KKaKn&onNbE14Xi{m#P4mvf;Yc`g$CWH2@(LQ3y%)_zNB&_)euQVXE@hQT2*HD-&D z_HQHL&NqAfckcUtH7Wi%Q}l-tQDk)1| z-BWQmkpMi~q{o|jZ^~6EdvZR`8EV14pQ`4$){nJQcLaw5be?f+nD?2}=BFy>ArVItuZqt$orKf~W-*`N6D^+v zlr_5;s<-;3$%&YdP|*93(r{H-Ror3R%r{#_Zeo1O;r#NQL(um|lW7}iO9J=-?C0@n z8A_FMT*n6HH6|ZtHeP1@s%G}j$;%JI^{YnWA<>-|I(UUn?clj3eOj07VA%S??A<*Z zRlVt%^DG45{si_-IcEJ~P$OpEG;Lu(vM}d$lS`!X`B4iSqtFh^nrj(lMm6WIl3-(n zT}m_-t1c<%_qz6YJA0+0NH!9i9~9jjSvgindM}XY%AJ$VPvz=dJ}qykWXw1CQ>!g3 z>ZL7Zt#&hW4N{z*Z0ItdIgn<0t6~$@p5Wz437mYN(A$U=8%Ss5OvFRY80R%;RaQfr zkN1t5Ft+(GR-0+zbon2jgYeDK4}#}|h05XAX4LNoRNVsIDcuBs$1mtgPJ;4#BmscU zFRS~uz0+N!Ov}g~hZfu04Lv@|9-lLoPzl|XipCaC%bzHSwx}?pBLEpvtFUtapny{V9odZUDp8n8PUuFsGX03(s$~$kuRS%b&XdCW<(TU(IqJ38chTD8h zOV}X+>ab2cZ0U|(j#0AAOu=sDelH*YR&Qmc>-oSeYV6?AIGa)U zKH1Ru=fshI&`c1#pb)9cbNgfZ^+U01gRgZgcfEVMlJwz1Lvq4^=@cWD*PXN3RFpDS zYTgykjp=O0Nlkzb5x)kZtT&I8YtKSo;#1Am&gy|T)%H?6q3cumb*T;(1(&v8H;cb8 z-}3gM{YEvZD_vHITMZ&R25EXQf<;{h1fa!tMdi|I>!aX*&705p0D2b~$6K1(3s}@G z)Hx~VF^w2iQN<(9p|h-JuX5RyW-2Ug?=5yew1f_VQ`qZ~meDQ}<#}GvSJ#H=OV}J& zUX~9FVQi1OiG=;?;H#?)R-Cs?P9FhZgn1b1i#4U zjBmUdfTH4W8tP5dOHeG;{$cUx+iec>SUU1?RK`|2FO0H1vzEQ;uE$Z|wYB@jB4$h+ z0lq6@nK*q<v<6 ztXbDl`sW^0@6$17+kqBOYPWN$xSQyc=aBn>rt$3Hcu|HIYQl%A? z!UW~@N|{sFCUX`A)|RdnFR2whNMGg&dUfpFOEE9OckkYS9DSIE7x!J^bTcuAv(g<& z2bl{VsB{Gn!bLAR3>Bm#@S41wt6$pWnLS{ucOmX1s>`=5^*$S(`ayF5XST=^yT_>UNwA4<`W47wRnod6|tP`ZkgX zz|(Qx*jS~$%^Cur3Dc=9VO)#eS>F=-2{#JMkSf8pfU}4|#e3e*j1ELB?>M*4 zA}TxW5SQLwrw8lxY>DI~H=vd|1TtD`&zq!H`x+sk=G(celx&x5KN@eX-zKxt1TX*e2ZLB!~FcM}saSA&Cp0$WMBs^M>e&&RR zRwow1B7!r?5ExX~fWuZKRi?Qg2|-s5P%e12SK>F?5}=@RHXc`wW1843Sb)wO!!9na z*3Zw`BrMpqwXb~k9$CSSV4CvyPUJrAk|O{v&w?3HWzn00b$tt(0cN)+hmPw=_svSa zpT7ftIk+DSD(@zH)`B5Ktsy@q#Ccs|?BHJ1^_qvyeOcL=IV&<}K%35u-N_@Mb%Hs% z9xu|`+#jmn+X!o3vNuf|OOQhDi%97HQ03g&3&E_(*IX)ki8X z)JNo{*GRvhxK8Joj)=o237&gCupLkUw?mAG0 z6i#j*gv%tD83w7GeIvnizwe!PlMDf%%z*FL3@FwHCwJjV|M)WQyfDTk*zn^^`RaW) zy+5-jppNMq#b#oPF@ZS&Lyt5y?J}JfN}yN=G5O6>#-&A2E_IRb4tGr>lxQw!3~kz_ z(IG&QD)TMJH^pjO;N2_0TGpjVEm&7}~5eMpXVv(-Qyq+wC`2p$#*9C>LNuh$j=n&{W?-1nn# zL$9RxNOKRg`knrCksWkNx8PC2lTkvmxc8f>&`SanS&C6<2@4N{>kxlJOFh}9Y5Rw4oNG;{ekIl-H;{w1iye2d(nd}xF_b4U+MW0@nNB!YVgsgN3S`}7eQy7&20i=?F;@Z2Q|VF3 zHRye$N!w>8f3MO0+&h0@!uYEkPk&@x{*8S8x#(Z$c==@u@DDm4K+^xd`2YVxVE!_5 P<_|e{e;pYVn1TNflAzwG literal 0 HcmV?d00001 diff --git a/随时随地/Yan Ruyu_Vue学习笔记.md b/随时随地/Yan Ruyu_Vue学习笔记.md new file mode 100644 index 0000000..90a0a84 --- /dev/null +++ b/随时随地/Yan Ruyu_Vue学习笔记.md @@ -0,0 +1,205 @@ +![](/images/welcome-to-vue.png) + +### Vue基本认知 + +**Vue是一个JavaScript框架，它的特点在于使用者不用再思考DOM的操作，一切都由Vue来承担，这就是Vue的MVVM模式，使用Vue框架你只需要操作数据而不是DOM。** + +Vue的v-for: 是Vue中一个简单的for循环，目前学到的课程中它可以用来遍历数组。 +Vue的v-on: 是Vue中用于绑定事件的指令，它的作用是绑定一个事件，它可以简写成@。 +Vue的v-bind: 用于传递数据，它可以帮你在组件之中传递值。 +Vue的v-model: 数据的双向绑定。 + +Vue的el: 是Vue实例的“管辖范围”，它用于确定Vue实例的生效区域。 +Vue的data: 是Vue实例的数据区域，它一般用于放置Vue实例中的数据内容。 +Vue的methods: 用于放置Vue实例的方法，任何Vue中的使用的函数方法都要在其中定义。 + +### Vue 的深入理解 + +#### Vue的组件间传值 + +需要用到`props`、`v-bind`、`$emit`等方法的配合。 + +##### Vue的生命周期函数 +Vue在实例生成之前和生成之后总共有8个生命周期函数，他们分别是： + +* `beforeCreate`：在实例生成之前 +* `created`：实例生成之后 +* `beforeMount`：实例渲染之前 +* `mounted`：实例渲染之后 +* `beforeUpdata`：实例数据修改之前 +* `updatad`：实例数据修改之后 +* `beforeDestroy`：实例销毁之前 +* `destroyed`：实例销毁之后 + + + +#### Vue的模板语法 + +Vue中的模板语法有插值表达式、`v-text`、`v-html`等等。 + +任何v-开头的Vue指令，后面接的都是JS的表达式，也就是说可以在后面接上加减乘除等JS语句，插值表达式也是如此。 + +#### 计算属性，方法和侦听器 + +##### 计算属性 ```computed```： +直接通过属性名就能使用，因为原因和上面说的一样： +>任何v-开头的Vue指令，后面接的都是JS的表达式。也就是说可以在后面接上加减乘除等JS语句。 +> + +缓存功能在计算的成员值不变的情况下将不会进行第二次计算，节省资源。 +##### 方法methods： +也可以直接通过属性名使用（注意方法独有的括号），但是它没有计算属性的缓存功能，在计算成员值不变的情况下每次都会重新计算一次，在网页元素比较多的情况下可能会有比较明显的资源浪费。 +##### 监听器watch： +可以监听指定的方法，当监听的方法发生变化时会执行指定的操作，保留了计算属性的缓存功能。 + +当以上三种方法同是适用的候，优先推荐计算属性 `computed`，既简洁，也保留了性能。 + +#### 计算属性的getter和setter + +计算属性你可以使用 `Get`方法，通过其他值算出一个新值，也可以使用 `Set`方法，通过设置一个值改变相关联的值，从而使用计算属性的特性引起第二次计算。 + +#### Vue中的样式绑定 + +可以使用 `isActivated`来控制样式名字的显示和隐藏，在 `data` 或 `methods` 中设置 `isActivated` 为true就会绑定上CSS的样式。也可以使用数组来控制样式名字，设置数组的第一个值为空，标签就没有绑定CSS样式，设置数组第一个值为CSS样式名字则会绑定，还可以使用`V-bind:style="CSS样式名字"`的方式来进行绑定，这样CSS样式名字就是一个Vue的 `data` 值，可以在Vue的`data` 中控制它的属性，以此类推，这种方法后面也能接一个数组，更多样化。 + +#### Vue的条件渲染 + +##### v-if、v-else-if、v-else： +`v-if`是一个Vue的指令，它的值决定了它所在的这个DIV标签是否渲染显示，每次的隐藏和显示都相当于删除和增加一个DOM元素，它还能搭配 `v-else` 或 `v-else-if`一起组合使用（警告，`v-if` 和 `v-else`、`v-else-if`必须紧靠在一起使用！）。 +由于Vue的特性，Vue在渲染网页的时候会尽量复用页面上已有的DOM，这可能会产生一些问题，为了解决这些问题就有`key`值这个概念，`key`值是独一无二的，Vue并不会复用key值不一样的DOM元素。 + +##### v-show： +`v-show` 与 `v-if`类似，但是它每次的隐藏和显示并非是在页面上删除和增加一个新的DOM，而是通过隐藏DOM标签，在相同的环境下，`v-show`所需要的性能相对要低于前者。 + +#### Vue的列表循环 + +##### key、数组操作： +当使用`v-for`遍历来实现列表渲染编写`key`值时，考虑到性能和一些未知的问题，尽量不要使用数组的下标作为`key`值，而是使用数组中一些独一无二的值。 + +当你直接对Vue的数组操作其下标时，数据会发生变化，但是页面不会发生变化，你需要使用Vue提供的7个数组操作方法来对数组进行操作，它们分别是： + +* `push`：向数组的末尾添加一个元素 +* `pop`：删除数组的最后一个元素 +* `shift`：删除数组的第一个元素 +* `unshift`：向数组的开头添加一个或多个元素 +* `splice`： 向数组中删除或添加元素 +* `sort`： 对数组进行排序 +* `reverse` 对数组进行取反 + +还有通过改变数组的引用来实现对数据的操作，即直接改变遍历的数组，这种方法也能在数据变化的同时页面同时变化 + +##### 遍历对象： +列表渲染不但可以使用数组，也可以使用一个对象，使用的方式和数组相同，但是使用对象进行列表渲染时，网页并不会渲染对象的键名，而是直接显示对象的值，取而代替的是一个叫`key`的变量，其中对象的`index`和数组相同。 + +在使用对象进行列表渲染时，你无法使用Vue提供的7个数组操作方法，你可以直接修改对象里的数据，数组变的同时页面也会跟着发生变化，但是和数字相同：直接往对象里添加数据时，页面是不会发生变化，与之类似，你可以直接改变对象的引用来实现数据的变化页面跟着变。 + +#### 使用组件的细节点 + +当你使用Vue的组件功能实现组件化时，你定义了一个组件，这个组件的名字可能与HTML自有的标准不符，使用这些组件的时候会产生一些问题，这时Vue提供了 `is="组件名"` 的语法来解决这种问题，这种方法的作用就是在遵守HTML标准的同时使用你自定义的组件。 +在组件中定义`data` 时，`data` 必须是一个函数而不是一个对象。 + +##### ref： +当你在HTML标签中使用ref时，你获取到的是 `ref` 对应标签的DOM元素，而当你在组件中使用 `ref` 时，你获取到的是子组件的引用。 + +#### 父子组件传值 + +##### 隐形的规定——单向数据流： +父组件可以随意的向子组件传值，子组件也可以修改父组件传递过来的值，但是这样可能会导致一些问题，所以在子组件中使用父组件传递来的值时，需要使用子组件自己的 `data` 来复制一份来自父组件的值。 + +##### emit()： +子组件向父组件传值需要用的 `$emit()` 这个方法，这个方法不但可以向外触发事件，还可以在触发事件的同时传递一个值（向外触发的事件名可能不允许大写）。 + +#### 组件参数校验与非props特性 + +##### 参数校验： +父组件可以任意向子组件传值，子组件对传递过来的值可以进行一个校验，也就是对传递的值有一定的约束，要使用这个特性，子组件里的props就不再是一个数组，而是一个对象，在对象中可以对传递过来的值进行一个约束，约束的条件还可以是一个数组，甚至是一个对象。 +当 `props` 是一个对象时，你可以使用 `validator` 这一个函数还对传递值进行校验，还可以使用 `default` 来规定一个未传值时的默认值，required来规定父组件必须传值，当然还有 `type` 来约束传递的值类型。 +##### 非props特性： +当父组件向子组件传值的时候，子组件需要声明 `props` 来获取来自父组件的值，这个时候父组件传递的值并不会显示在子组件DOM中，但是子组件如果并没有声明 `props` 来获取父组件的值，那么这个值会显示在子组件的DOM中，这就是 `非props` 特性。 + +##### 给组件绑定原生事件 +当你直接在子组件的中使用父组件的函数，这时候绑定的其实是组件的自定义事件，需要用 `$emit` 来向外触发和监听，你需要在子组件中的模板中绑定这个事件，这时候绑定和触发的才会是父组件的函数，如果你确实需要直接用子组件绑定父组件的事件，你可以在子组件的自定义事件后面添加 `.native`，这个时候绑定的也是父组件的函数。 + +#### 非父子组件间的传值 + +##### bus： +在使用Vue进行组件化传值的时候，会遇到这样一个问题：非父子组件间传值。如果按照传统的方法将值一层一层传递上去，这样写出来的代码将会非常冗长，这是就有了 `bus`这个概念，在使用 `bus`前你需要事先给 `Vue.prototype.bus`赋值一个新的Vue实例： `Vue.prototype.bus = new Vue()`，这句话的意思在 `Vue.prototype`上挂载了一个名叫 `bus`的属性，它指向一个Vue的实例。每当你去创建一个Vue实例或者一个组件时，都会有bus这个属性。 +有了 `bus`，非父子组件间传值就变的非常容易了，就像子组件向父组件传值那样，传值组件中用 `bus`向外触发一个事件：`this.bus.$emit("事件名","数据")`。然后在Vue的8个生命周期钩子之一：`mounted`（实例渲染之后）中写一个函数，这个函数 `bus`中的 `$on`函数监听 `bus`向外触发的事件名和数据，再传递给接收组件。这样就完成了非父子组件间传值的需要。（警告：在接受组件的 `mounted`函数中操作数据时，`this`的作用域可能会发生变化，需要用 `var this_ = this`来保存 `this`的数据。） + +#### 在Vue中使用插槽 + +##### 插槽： +子组件内的某些元素需要由来自父组件或者其他组件的值来决定时，子组件自带的模板似乎就不是那么好用，这时Vue就提供了一个新的功能：插槽。插槽使用的方法很简单，只需要在子组件的模板中添加一行要插入的内容，之后在 `template`中相应的位置插入 ``就可以了，在这个元素中还可以加入默认值以表示插槽未定义时的值。 +##### 具名插槽v-slot： +假如你需要由来自两个不同的组件的值来显示在不同的插槽位置时，单单``是不够的，为了解决这个问题，Vue有一个新的指令 `v-slot`，它用于给插槽指定一个名字，之后在 `template`使用`name="插槽名"`就可以实现不同位置显示不同的插槽的需求。（注意：`v-slot`只能写在模板占位符即 `template`中） +##### 作用域插槽slot_sope： +组件化的使用过程中还有可能遇到一种情况：当子组件的 DOM结构应该由外部传递进来的时候，这个时候就要使用作用域插槽来解决问题，子组件插槽可以向父组件插槽传数据，子组件用 `v-bind`传，父组件用 `slot-scope="属性名"`接受数据。 + +#### 动态组件与v-once指令 + +##### 动态组件： +在之前的笔记中可以看到：在一个 DOM元素中使用 `is="组件名"`的方式可以在不影响语法要求的情况下将原来的DOM元素替换为定义的组件，这种特性与``结合就成了Vue的动态组件（也可以不是``），在 `data`中定义一个变量，变量的值是组件名，通过改变这个变量的名为其他组件名来实现动态组件。 +##### v-once： +在上面的方法每当 `is="组件名"`的值变化，在渲染显示一个组件的同时，Vue会将其他的未被渲染的组件隐藏销毁，也就是说用上面的方法每次动态组件切换时Vue就会渲染组件的同时和销毁隐藏的组件，如果频繁切换组件这种方法无疑会影响性能，`v-once`指令会将组件在隐藏时放入内存中，重新调用的时候再从内存中拿出来，通过 `v-once`指令，可以有效提高一些静态内容的展示效率。 + +#### Vue中的CSS动画原理 + +为Vue元素添加动画时，需要用``标签包住元素，这样才能为Vue元素添加动画效果，当你不为``标签指定一个`name`时，动画样式的前缀默认为`v-`，还可以在``使用`-class`为`enter`和`leave`动画指定一个CSS样式名字，这样Vue就会使用你指定的样式名字。（这个时候就不在需要`name`） +Vue动画从开始到结束会有3个过程即从开始到结束和中间，进入过程：Vue会为这三个不同的过程中添加不同的CSS样式：`enter`、`enter-active`、`enter-to`。 +与之相似，退出过程也会有三个CSS样式：`leave`、`leave-active`、`leave-to`。 + +##### 为什么使用enter作为动画的入场开始： +使用`enter`作为入场开始是因为动画在默认情况下`opacity`为1，这时需要在第一帧是将其写为0，在之后的进行中中过程中`enter`会被移除，这时`opacity`为0。 +##### 为什么使用leave-to作为动画的出场开始： +使用`leave-to`作为出场开始是因为动画第一帧`opacity`需要为1，从第二帧开始`leave`被移除，这时`opacity`的值还是1，需要将其改为0，动画才会被正常触发。 + +#### 在Vue中使用animate.css库 + +库的动画是CSS3标准的动画。由于Vue可以更改CSS样式的名字，所以我们可以使用在实现复杂的动画时可以使用使用一些CSS库如animate.css，用`-class`为动画指定名字为CSS库的样式名字，实现CSS库的绑定。 + +#### 在Vue中同时使用过渡和动画 + +##### 元素第一次显示的动画效果： +当需要元素第一次显示时也有动画效果，需要在``标签中写入两个属性：`appear`、`appear-active-class`，第一个表示第一次显示元素时也有动画效果，第二个表示动画效果的CSS规则，它的值就是CSS动画规则名。 +##### 同时使用CSS库和过渡动画: +要实现这种效果，需要为在``标签中为元素绑定两个CSS规则，分别为CSS库动画和过渡动画——`enter`和`leave` +##### CSS库和过渡动画执行时间不一致: +在使用CSS库的时候，而它往往都是固定的，而自定义的过渡效果可能和它不一样，这是可以在``标签中写一个新的属性type，它的值决定了最终动画时长以谁为准（`animation` 或 `transition`） + +>**来自官方的解释**：Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 `transitionend` 或 `animationend`，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。 +>但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 `animation` 很快的被触发并完成了，而 `transition` 效果还没结束。在这种情况中，你就需要使用 `type attribute` 并设置 `animation` 或 `transition` 来明确声明你需要 Vue 监听的类型。 + +##### 显性的过渡持续时间: +在大多数情况下，Vue可以自动得出动画所需要的执行时长，当然也可以用`duration`属性定制执行时长（这个属性需要用v-bind绑定，并且以毫秒表示）。`duration`属性的值还可以是多个，用{}符号包裹，这个情况下可以分别为`enter`和`leave`动画定制执行时长。 + +#### Vue中的JS动画 + +在Vue动画的开始和结束，有6个JS钩子，它们分别是： +`before-enter`：入场动画之前 +`enter`：入场动画执行中 +`after-enter`：入场动画之后 +`before-leave`：出场动画之前 +`leave`：出场动画执行中 +`after-leave`：出场动画之后 + +#### Vue中多个元素或组件的过渡 + +Vue在渲染网页的时候会尽量复用页面上已有的`DOM`，在使用Vue的动画效果时可能会产生一些问题，这时候也需要为元素指定`Key`值，保证动画的正常执行。 +``标签中有一个属性叫：`mode`，它有两个值：`in-out`和`out-in`，`mode`的值为`in-out`时，动画会先显示再隐藏，而`out-in`则与之相反，不使用`mode`属性时，动画就会同时执行。多个组件的过渡动画可以使用动态组件来实现。 + +#### Vue的列表过渡 + +与单个元素使用动画效果不同，列表渲染相当于渲染多个元素的，这是``标签不支持的，这时候就需要使用``标签，这个标签相当于为每一个渲染的元素添加上一个``标签。 + +#### Vue中的动画封装 + +在很多时候一个相同的动画会用上很多次，尽管他们的元素各不相同，这样一来，每为一个元素设定这个动画都需要重复编写``，这是很不方便的，为了解决这个问题，我们可以使用Vue组件来对重复使用的动画进行封装。除此之外还可以将CSS规则进行封装，用Vue动画的6个JS钩子将它改写为JS动画写在组件的`methods`中。 + +#### 拓展 + +或许我可以用Vue的模板功能来生成一个带有Vue实例接管的模板，例如： +`template: "Hello Wrold"` + +在Vue框架的使用中，你可以使用一个叫`