From 19ba3b009ed6d4b70141a51026fb8c256c87e420 Mon Sep 17 00:00:00 2001 From: asd <374367073@qq.com> Date: Wed, 23 Dec 2020 10:29:16 +0800 Subject: [PATCH] vue --- html/html简介.md | 4 +- vue/class和style绑定.md | 165 +++++++++++++++++ .../image-20201221153546347.png | Bin 0 -> 23706 bytes .../image-20201221154507952.png | Bin 0 -> 2336 bytes vue/vue简介.md | 103 +++++++++++ vue/事件.md | 115 ++++++++++++ .../image-20201222100803116.png | Bin 0 -> 10353 bytes .../image-20201222101315624.png | Bin 0 -> 3364 bytes .../image-20201222110247849.png | Bin 0 -> 3957 bytes .../image-20201222111007833.png | Bin 0 -> 1372 bytes vue/循环渲染.md | 89 +++++++++ vue/条件渲染.md | 94 ++++++++++ .../image-20201222175835286.png | Bin 0 -> 832 bytes .../image-20201222175902811.png | Bin 0 -> 892 bytes .../image-20201222180149362.png | Bin 0 -> 2481 bytes .../image-20201222180209565.png | Bin 0 -> 3508 bytes .../image-20201222180542488.png | Bin 0 -> 1964 bytes .../image-20201222180600963.png | Bin 0 -> 1964 bytes .../image-20201222180642082.png | Bin 0 -> 2779 bytes .../image-20201222180936101.png | Bin 0 -> 1843 bytes .../image-20201222180952802.png | Bin 0 -> 1843 bytes .../image-20201222181015791.png | Bin 0 -> 1853 bytes vue/表单输入绑定v-model.md | 175 ++++++++++++++++++ .../image-20201222142339775.png | Bin 0 -> 1685 bytes vue/计算属性和监听属性.md | 172 +++++++++++++++++ 25 files changed, 915 insertions(+), 2 deletions(-) create mode 100644 vue/class和style绑定.md create mode 100644 vue/vue简介.assets/image-20201221153546347.png create mode 100644 vue/vue简介.assets/image-20201221154507952.png create mode 100644 vue/vue简介.md create mode 100644 vue/事件.md create mode 100644 vue/循环渲染.assets/image-20201222100803116.png create mode 100644 vue/循环渲染.assets/image-20201222101315624.png create mode 100644 vue/循环渲染.assets/image-20201222110247849.png create mode 100644 vue/循环渲染.assets/image-20201222111007833.png create mode 100644 vue/循环渲染.md create mode 100644 vue/条件渲染.md create mode 100644 vue/表单输入绑定v-model.assets/image-20201222175835286.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222175902811.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180149362.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180209565.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180542488.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180600963.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180642082.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180936101.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222180952802.png create mode 100644 vue/表单输入绑定v-model.assets/image-20201222181015791.png create mode 100644 vue/表单输入绑定v-model.md create mode 100644 vue/计算属性和监听属性.assets/image-20201222142339775.png create mode 100644 vue/计算属性和监听属性.md diff --git a/html/html简介.md b/html/html简介.md index ed89ac6..580f88b 100644 --- a/html/html简介.md +++ b/html/html简介.md @@ -165,8 +165,8 @@ - autoplay 值为autoplay 视频在就绪后马上播放 - controls 值为controls 向用户显示控件(如播放按钮) - loop 值为loop 循环播放 - - 音频(audio) - - 属性 + - 音频(audio) + - 属性 和video标签属性类似 - src 播放音频的URL - autoplay 值为autoplay 视频在就绪后马上播放 - controls 值为controls 向用户显示控件(如播放按钮) diff --git a/vue/class和style绑定.md b/vue/class和style绑定.md new file mode 100644 index 0000000..84d0472 --- /dev/null +++ b/vue/class和style绑定.md @@ -0,0 +1,165 @@ +# class 和 style绑定 + +### 绑定HTML class + +- 对象语法 + + - 给v-bind:class 传入一个对象 来动态切换class + + v-bind:class="{类名:判断条件}" + + ``` +
+ ``` + + > 表示active这个class是否存在 取决于isActive 的值转化过后是否为true + + - 传入更多字段来切换多个class + + ``` + + ``` + + 附带如下 data + + ``` + data: { + isActive: true, + hasError: false + } + ``` + + 元素渲染结果为: + + ``` + + ``` + + > 如果data 中的hasError的值变成 true + > + > 元素的渲染结果为: + > + > ``` + > + > ``` + + - v-bind:class 可以和元素上普通的class属性并存 + + ``` + + ``` + + 附带如下data: + + ``` + data: { + isActive: true, + hasError: false + } + ``` + + 元素的渲染结果为: + + ``` + + ``` + +- 数组语法 + + - 可以把一个数组传给 v-bind:class + + v-bind:class="[第一个类名, 第二个类名]" + + ``` + + ``` + + ``` + data: { + activeClass: 'active', + errorClass: 'text-danger' + } + ``` + + 渲染结果为: + + ``` + + ``` + + + + - 在数组中用对象语法 + + ``` + + ``` + +### 绑定内联样式 + +- 对象语法 + + - 用javascript 对象表达css属性(不推荐) + + v-bind:style="{css属性名: data中定义的属性值}" + + 示例: + + ``` + + ``` + + 附data: + + ``` + data: { + activeColor: 'red', + fontSize: 30 + } + ``` + + + + - 直接绑定到一个样式对象上(推荐) + v-bind:style="data中的数据" + + ``` + + ``` + + 附data: + + ``` + data: { + styleObject: { + color: 'red', + fontSize: '13px' + } + } + ``` + + - 绑定多个style对象 + + ``` + + ``` + + ``` + data: { + static: { + fontSize: '13px' + border:'1px solid red' + }, + choose:{ + color:'red' + } + } + ``` + + + diff --git a/vue/vue简介.assets/image-20201221153546347.png b/vue/vue简介.assets/image-20201221153546347.png new file mode 100644 index 0000000000000000000000000000000000000000..077e4a8f682174b8b82378b1ade2d835e1bac00c GIT binary patch literal 23706 zcmeFZbyQY;*DZW02GS*+ieMmJf`CXVAt)%_E!`c0l%yghB_b%&pmcX54bmmu-DhpR zpXYtfH_ki8cm6zMy!UY21Gx6y*WSNaYpyxx+5vJ;B(O2aF;FNJ_TxvQ&rm2dJrwF( z1o|cT%iCghbrgyg^;lF`!7*-m)J2ZSutMn6p#e1WbC6PAYJUU!u748=$ZB=2i`!yj}Rw zx!wN$7ZCSgUn;Bh`^vLmJ(iU0c6n6ACEC^}BVyM~scY9WcyCrXD;5DHAOW5`)NdQKwP4t-FO&j zX&`RIlwX+`$R1dD@PnC;UEJp;oOIBwRrw?#!op=SmI^cv{u1n NUfs=@dU2eCI~XDF2hS&O08h{QQ|-3Jq$1v2qoD+p%e>~l*>Oe`2- zH}|@7N`D7%0W>r?9<3DSf yod>YFKo~-43olg-{FBnJ%bIx}V-YunPx1B$vi-7et&U z@0&b4BnY_xRm)>E7EaFhJH4tsm|}p?!Y hs)k3T5b>7u6O-!9~eII1Nr|{y%ClHkwmXL-cXe{$lW2Sj}A9xC= z2+6~-AOBlX8k#xk|Gfi&uE1hE @Y;n>6-40ifInRC zSG5?jEsX 1piRRf3^w)!iG_kbQT2McJnYB0B{_NCkdAyRQ z(0mjektGv*{!pt}LECsaC%dml#&OYsaXS^Ehh{3k60n~qf!_nJ=MS_Z1ibSQ#ZX0- zljl*iH*Q=6p$iO;6sU>Bvtve7Rb%62kE7vn6bf-y12t;}-Call3A7J77FJzVm8VuL zlpz@(UtN!C-GG7(-Y|fM=p}6ACZ_Y;z0mx&0enx6nGMfJi}D>}D8Nxzqh+`-*I+wn zgti|e)(S9L;=(yhSz}`ws0RuPMBL^h=wSB-a@=*j`f`T!=g*(DU=kR5R2+nk?ckb8 zUDBC2R3r@)%i=w+DruOpgUsO75%m*n z3t5*@z|0^@(8hTYfdn-&a!BVIt{Y exp$4BSo)(Ce``f76aUNBfzJ@iv8i~xh` gt)JKTM(upg;ErK6nWX1~9iT;1cPhIojR@m6e*v&u+hC3 f&0+?AC1{E(R|yu^wG;rsWk2J~7YXFx%&%X6!U370*SgGy3uMx}jJ^{Dh^i_n z8F7YyZ^2Ab^351`@d|tvTwkyF^lA03;e6@w$z~;TB(Oz&@J$O;;I0U@hk-RE6B2iK zo?jg%fW|~GQl$B3R~1g$^r8WOpzQ!#1kSPU#M*!Y-}>~-nn hE zJ&Kc#r(43z$tEpoyNeEnr)khUD%Avmctmbv7aY+#8)Uc9)Uc3?D;*qhJ@>_)TqLMm z-VE)N8=dK%gCn|;JDn{~J4B)o-Vu2Obsks;pi0Q4kr!~?XEo@E3jlfyDF7g^ESG`< z$O|y8nc3Z?_H(`oDzSv%pF&&@u<_wDokR#jU=0o0c?50I=SdfR&^$qXO*lc_893q` zA@#ij2C;gQKRg!>)Bsh`=ZSFjFy3MU%AW4Bqd*mjQzEqel0LkLV#L1yV3-e>6;N6N zxDdS& tooc++)QZvDgy_1FV^{XxhHM{2Zm9W-XL>7SdyA2TKVuF;x zex8;Vu%m+#5#au9S?+U8eNP@Vv!CPRp-}yT;ai*-UcdpHF_$_BQn`KH2zPtAs{Y!f zCklF`f a^TLMfCqQH|LTM0A12RdOsuhOm<|NGzc@r|7RD z7lhNJkfwm3V5==%=$qoJI9lb0myG0Y*0_bXUN-jtj)#c~4B=JIsh&w=%pK4G3Z4Kg z7{b`z6cBhXR>>(JK`GppRU7Isl&7D;^Bzf8A#C47i1YLEa*VpJQQot@0R9Woe|%HA z{y=fyL&GL%{~UVAo21N4>_46HWB0 )Ie)TVjS4}u(;c>%xaZ%Yn4RI;H&rHRV_p9g-LrIwoXn?%ACi+ET97eO$|=` z2hX0ptFQf;F$=;G)K%4%Jg0b^A`8$;8U(0a8+0U;FF6 qmbq0%yXp1f;li;#{*q*ATo OJkb~ zWCeJm1`i~ji;W5p=Xu6m!*?u!w5zSJ_t{Z_1OZH8%t}0%OW<`fh8(V&6n7fBCqb+R z3tlw{X^6Q1x>r8PT$Trh6FRazU%fg9Lcc4ZK2+P6Q4mefVa;BV;Gx=Q0}sO|Fg<@F z1D&+Y9|Y>~U}soO2p^|>v6#2m4$Q~v(6gPl_JITRaqt*uE9Dc7ReFq1IFEE Ci_3wo%SFZSn zg!Bhizn^T#v0Zr9+uskJNu= R~kQ5MQ;SI6!s8 zZ6|Z>QQ;70T1@;GVc#!pb|sh?CTvu1*u%{f&oio VS&b?WT!j+% z=3;RUmyb@I41XO|z*~+apqa&WUWDe&(Q0XSG*<@mmZ`aU2-I>Cs;a~H8q1BkK0(3k z@3LCV2yfv*L`aYz0<$YmRxCofO#179B2O+ZzE=UicmBQ}2Q6>%poBL-)Bbc;>FS39 z{R1k85qzP8X4#HG@gt~K>NjSsi=!iAO70%OL7ja0b|s6;EpU)k!@v{GOFYk^V$yGo ztPgeHPBu=;d)fC5GIMC@YRMgN$WTHD&QV~t+ird$@}eFh-MIEnilfuLN=?d2I7xZM zl6Qv>I!i*~0TLZ*eNt0Xbw>KmzIiw$F4%k(UjWNMN6{A>H=I6~!&w#&vhm~JJb@oG zI@q&R3z-4(k->(^KU_BW6{NqIm w-;-hJrGo=xEQ6i4#9Koe& zX}8QvR|=*&XA%TlbigK4?+8uTQ$8db{to3!>T}1`(kB|y0^_EIL)q!+fy3sdnMK){ zqu85jXBG)ET!+w}q{(!poWMPm8l|TSDtemykatn{a}R@|1AEyrO6k$A^ =}rs~aBgl!f}m~Z;P+A-3iW(pc+AFl_`9(@77k7aeA)8g(_?35G}}dAe0iBs zC2hg`TWuUY1+TKrW8B%M58-V>0ecmD RA zgm+hOuWi?vl@@b_?3XjvUCeU7HP< %nG< zUXy}j%WnKV^;#4B@~(}q$$mLLsP=5@mutvHej8k`Rh+I2Jso!q#e_5Rc$RJi4n$r%-LkO=Tw2O{6D&j-I(qrcL9h`n zXgQRhb{X#HUAm#mL~HGrsd4*|#@5>GdXM9!sr@fkG3RX5;6|d#l`jqjNY+&zA3-;r z<1$<-Vjxxtp0P+SA0y913g02SgyHmn=1e#Uo~!NcMKHqgab=Sz< ~~@_rd=j_CJ6ApE3EL1@W&<^FO=c|H0j$cs7aa z(L@cAt?H_AH8f2<(Z_|rHzD~?9uU5SLWPNjLC~bfhc}s`9$z3s(!-xW&n#j(*?>d} zFNC{kUcS@6zuzb%sHh947hO~Pi8TcE`82o!p~ d`RhG{P^QxH0yg0mWpX1_`; zcn(We@IVh3eKBzQ08J*qz{ohaqVk0T;10mcMleQ-mHti+6+~LH_uU{Vn?ddCk_mkZ zAQpkeaw2GY{43NB0s;d0d kga%yaR#Rh;nWdUS)$AFm-iwJ~^5J6a)s0 z8hLG4nHnJq#q5iTkylVqu>WhIf}5rFD!lno2dZN$comTZl*-UEU-w0DCk ztY`RF+b1i*9S0u576nW)~?srwucuskqf;8W!8S{E><) zwmGcHDUrWO{t#pfHJyRQ5+`PARQhJGC{ph8{Kvr^FMQwUdEW2$^NVsA_inCK3O4Ii zPCXNnv~u+2Q H+e`dnYOr*n;Ce7vss5&R(9_)9LP#cv^L;LSLtclo zsdF>(3WPa1TVY93c6LUh$V$lR&? clf|iX3Wi~&b?SmrbrTf_ z9Vion@gZh4$OK_sv^lh6V`D(|%P{rn8elO483Uu_t*XTjD$R%#h ;o z$(+5sV4Cy@Dne3Nuxe4a1JwrT1>eN$=EBA2_odg-S?uokCD{iWO*VtE(wkK~mnwrm ztQ`D_Mw*2`jQ)(_&71ugYFYz80N(sPVKdky!0_iW^&$u%9gBkx(-(LwZZ=HJn*NTu z89}`KUyUe^2V0@IFKn26?tungUNCbjKX#@QGwKD_c7LT(IS4cxiv&O%8(N6Hs{N!~ zVsmio8q@N#e7y_?yB=hR!d=EyU<@E-29C823)z>UK6`+sfnA#*`5gydm5birXHo_7 z5n4_YVJV){)!?@b5aquODb!x TlJ+NF) gGcHEti#dF @u+MYN{dXWk8R~bmwFo!Z;{frW*b?QFBZ) zwmX@$@TPcZ54X-`#~Hsb_wVe-Vhr;pXr~+c(rA|pSbs4@IPYPdCGcJ&cNQR*V_W^U zn#Uv(2ttG&SiRDUnl?sP7|4htYcY>UjxP2uJUv#t4jbLryN|x#GE~owtU)9X$q|uN z-{|V<@?*2>En1XuymRzrcF-Z6#Fi}=#iKw_#$uB4T&+?y0wT$27x2vCUt#!%Jg==S z7B3*E o4e-{=Mc%cZt`Kf{DP0ldxiuc7C=Z?-LF=zQj`lSK4Un!ATFZrKF@} z0ZFzja-1;Uh!_0<1r-T^Hc}u|i>cN3V& i&vDCzLv6!Z@|w^ql1!!LLmY|OgONqCER3(&2k(7oRO?>1R`U?mo4cYH(pEA zo>{)H*i<{s+__?f D$lo`(7`NWn^FwczAmMzrXX(%P|9O5zkt41St08$MJN2Ah+Rkrv;Ey zP~u}?Q0V9Ys^Cz11Qc)TASirde&>$b=*!DiX6~-9T6`-r`0SRoe{bqDF)$Ro2|e=m zcBbjsEw?6@e*G^VzdJP8ck`;d(ef3d6aHHM-w#ytBK}X=sfQJjq20Ik1s49!jh;R0 zN{-Es#gBn 8ZQU~# z28Ijs e+@58&_|{r^zVk13y^^~Y`g!&Bi(e0Y zNQ<3(D`a C1sm{*e1E zOZ4sDvhTlFJ$$)*4)>l_zjiJyx|f%2zk8kY;k|J;ci&Jgmbw>qz4i+z5$(BuKdw`{ zZ~FP|hIL0y8t1Z4kM}cLar5oth+Db3e*etwl*an|)qMT8udn~tS0i;`db|JNeg1Np zdsnJ9t^9d)Rp0tQH`d-Op8Pnt;q2?zA9>Y&Z`*gy+%)ojOqu1$f|%2{uGH+Sc)b0g z-1&35ZtlsquV!ueabeE4w_9eVRsFjp3N%mdYk^u`z~+4Zt@CW`owv!Bm;RpjIpgr{ zczewcU*@c? HNUzyy5f>KTfoA^B=cNT+m7VpL3=G6*G9c`njxg HN@xNA + + ``` + + - ``` + + + ``` + + > 当按下f12, 查看console里显示如下内容 证明我们的vue引入成功啦 + + ![image-20201221153546347](vue简介.assets/image-20201221153546347.png) + +- 下载vue 源码 然后从本地引入 + + + + +### vue 创建基本实例: + +文本插值:{{data中的属性}} + +html: + +``` + + {{ message }} ++``` + +js部分: + +``` +var app = new Vue({ + el: '#app', + data: { + message: 'Hello Vue!' + } + //data属性就是用来绑定数据到HTML的 +}) +``` + +效果: + +![image-20201221154507952](vue简介.assets/image-20201221154507952.png) + + + +> 注意: +> +> 1. 一个vue应用汇挂载到一个dom 元素上,对于这个实例是id=app的div +> 2. 现在数据和dom 已经建立了关联,而且所有内容都是响应式的,这意味着我们如果在js中修改app.message的值,那么页面上显示的内容也会随之改变 查看过程中无需刷新 +> 3. 现在开始我们不再直接和html直接交互了,交互操作放在新创建的Vue实例内部 + + + + + +绑定元素的属性(attribute) **v-bind** + + + +html: + +``` ++ + 鼠标悬停几秒钟查看此处动态绑定的提示信息! + ++``` + + + +js: + +``` +var app2 = new Vue(var app2 = new Vue({ + el: '#app-2', + data: { + message: '这是悬停时的提示信息哦' + t} +}) +``` + +> v--bind 被称为指令。指令带有前缀‘v-’ 来表示他们是vue 提供的 特殊内容。他们会在渲染的dom上应用特殊的相应行为 即为渲染的dom添加一个属性 +> +> v-bind:+属性名="属性值" +> +> v-bind 的缩写是 : \ No newline at end of file diff --git a/vue/事件.md b/vue/事件.md new file mode 100644 index 0000000..8ed5748 --- /dev/null +++ b/vue/事件.md @@ -0,0 +1,115 @@ +# vue 方法(事件处理) + +### 事件监听 + +可以用v-on指令监听DOM事件,并在触发时运行一些javascript v-on 简写为@ + +事件处理方法 + +- 直接触发javascript代码(不推荐) + +示例: + +``` ++ ++``` + +- 在内联javascript 语句中调用方法(不推荐) + + ``` ++ ++ ``` + + ``` + new Vue({ + el: '#example-3', + methods: { + say: function () { + alert('hi') + } + } + }) + ``` + + + +- 事件处理方法(推荐) + + ``` ++ ++ ``` + + ``` + new Vue({ + el: '#example-3', + methods: { + say: function () { + alert('hi') + } + } + }) + ``` + + > methods中注册的是触发时执行的函数,也叫方法 + + + +### 事件修饰符 + +- `.stop` + + > 等同于JavaScript中的event.stopPropagation(),防止事件冒泡 + +- `.once` + + > 只会触发一次 + +使用: + +``` + +``` + +可以同时使用多个修饰符 + +``` + +``` + + + + + +### 按键修饰符(自行拓展) + +监听键盘事件: + +@keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起) + +``` +获取按键的键码 e.keyCode +@keyup.delete 删除键 + +@keyup.enter 回车 + +@keyup.esc ESC + +@keyup.space 空格 + +@keyup.tab TAB + +@keyup.left 左键 + +@keyup.right 右键 + +@keyup.up 上键 + +@keyup.down 下键 +``` + diff --git a/vue/循环渲染.assets/image-20201222100803116.png b/vue/循环渲染.assets/image-20201222100803116.png new file mode 100644 index 0000000000000000000000000000000000000000..cd0f6aa701a93b273439ad44f25b707c4766d839 GIT binary patch literal 10353 zcmeHtc~q0vx;L#=+lp}Ru~n%EY7rb5EFcI1sZ|6Nj1>@3Au5w7BoKy}S!-*ms3<`Z zB8hbX86--C03nH%qYy$!0RbU|$SfHpfdmLizD-ZZbMN`Sb^p6}ef=j{$;x`)cklf? zzv;=v{rduze*D?TW@ctfg93LQFf&`gGc$W{>cd6gn-{YBcr&v#Wz*JIQTxF8JY&7jBKsjg c4RK;Cr*Lu5HZrSi1n7zVgg9f9`JE#2u$TXjjUWVl;JA zxOnpyKRxauNxX^|CyT1z1J_lXjN?nd`&r_W>*nD7yFhTavtQXQFf;pdZ4UUwoxg#H zFx&rqEO_0p%N4wSvTkO3LB^sE?_%PtH~2igS8U4@c%Ogno&mEm3fj(;7I)J}h(B(e zO23worcw#FMskU&V($*qxDZ_SjbxxT(C MZt#jIr!kEi}j@UiuESw!o9 fD9y-`Q2zM1@f0J-jh4`@Ve&?ADUx0 l5R^QBt8pbm`WIJ98 zMqM{?tuw`^1!-Czu8#%(v=+bMr_-H!qn@gH{5DH3G-@x#7b^AN9HB1-mrZ~>GvQR$ zm+%$g7Z}OfPM>?-862?Wp5a7~mXzuc7WAd<%~hW0$k8FBoJ0z)+-pDz@5=0D&sksY z%Q CzedPgYPS34k>q=fnHg)s#GV*XJyVbSK z=U~uO40-fr`*@b22|_O3Ufc=Vkb9oBZf5d;#P(K0WcAqf!&)0pk`YP4sp6l*GQDxc z>bYvfbb>nU{mhB|FnLGxRYVA=4yTG;CZ+=~ggV9w_JGt0vD^6C!8MFf3qempU%6W} zb)nG{aeSef**jRq7*aNA6V}P A;Zy7A-_s-~x*(Nb~avTE#6 z>yHoK%+HQiy_aFMx-4zEnn#v2<{_w`7z9CT*(c~!f~oA(^&$JX?1_=59R1xlVqWja zv8`YY%FDyXosaGFgJ&%{-f;T_lK)b-Bjq__ABd#uJ R;93n7m0sqCBC zp@X4? 7&E #Tf<@(%b(c =&+>|M2lI)MC6EU- o|>L zG5?bTx&R~q(=8$5hzrCtcdB%J>hugPWsmRbSaF|TpBB=klITlXCo6>au!M7#W@bOB zer1lkW5#;%Jave4i}o3D`)Sg-+o~M7E7ADWzGLCYn)9sx24&Q_ # z{;GfJD%IfRfduB^*vvy*ear5ARnEwC3=UQ=Jat`L6U1 ?Q11q0;efe4c%y{|)%vx@P3u z=Deu95grPfqq? #X3F%|m@GF!2 z;M0<%zY(NXY*f<@pAy&8d}#jIn^v$RyZf2-hOh*Taph?y;6uQMRVO=)+v*pFcgMu_ zOr4~PXLe0Fbt&^7_K$}pc&|*T?JagX*H gf4eeMAQMo+pluHX-WTM+_uiXfZTO2tQy;de0g zbB0thg8q;&1~zV`AXFg|I<$4JOZI$8Sn_HhNt70qx3&jsNJc-(S|d)lF&Uf<%gcsV zdU5nR17d@W pg)Rp<~6wNVqQbnkxH(>{Fc77%1} zFO^xt9cx2`$bOhtP{neENG+wmwQuspp0^~)F@x_aWN*<31nIO>sk`iJswI;;p1acn zJ=>PHka!{oSK1vJf1`0z2_dO{uH<}6rdJ=%7POuz3gxdJf53rkAu*CvUeBb6-xwmv zRyFto=XEjLT2e4*;dbQcMI!>5L-7%!@{ ;l40qV>&acpv4BUugJw>;bwkIfTr^7+??CW&ivIb4%}=PlrxH;qL7EX zH>wBKqpe=>oY|4w;cGi3y*lw))#8_cKl5AEZ#{qpeuj`&1S%mPoX+9hH@ztvif>Ol z^a}D2-HP+%$@|~Ov9xfShCOlENz0pE1+%~< 8 zO00YHF@ko!;hBvdk$H*A*tC|8hK;<(*0BdO_L8C5Xm5K+!1)$Nv$5asn&jQVBtJu0 z;i_lOxHsXdpsa^}cqrX;rS*|k(UZ5Jp`|*x&h!a`IL!SBJQBA@5J*@`SGtd#&i2lx z6G_Uth#sa$*5-XX4qNpJ(3~EPPZ`JkaR2eRH-Tc;aQwnJb-t+zy1e?`LI~6HDt*Se z+eufGRblmqpC+z=VfKKMYBlfGVrJh5*H;bmvGdO14R_Cfwh_aslU-K9vbn+SKHw1E zd9olml#E5^6Qvy2Im*3>Fen|yH+>7>ZjEfTUqU-wNig+8Gm1 xDAEZaeLU& z_GSJ;1DeGRiO;6>uc}!hdTtAmT#<$r(lk*yQKLdyS8UxK>!TcHF(mJYo^rYmygoQn za~VU6DLfK!qhqgBY-edHnK3JM)P|4VJMzW6;*JobXv6X1?~Z48#*^dygcV~5vfv9* z&lXTMG<37}(PKd2_gWad)a`or3Q1I8*ZI_&Kmz(#+FT~%DgGI{Wpi79b`UPndfR lZ*V7r@H>$Z#$@({SId?gV~Tqw(2?Wy{)PnGN6R$Lz8UPZ^mIe z1PiW+5g&z%eNgB6oJ#?$%gfNa=`tMDrG&xjNV+wz322v9k?^^=kgoGoURqTki|%S` zC^gi~7fG*HEF|0r_VD7E48GTA6K)>%l*#y9M$2@stJ-p}NaD1U310=2I&by$qfWg~ zAr|>J??^F8eJ?uaalXHgd5E>Txp*ge`062_&U}vZ6X)NMUiX&pdV%2vEhEi05TOh* z`gl{u_z%YOx_d$% Wc?>}3Ef6hbY@ zp(I}G3aWKj+3`pZy{KGNdXF#3p0%8qZ2%tk_Pk do)rZytd08;wpl1NiP(}^{_4STYw>byu zGG#dDbvsUkJ=+<%# # @R>#Htiz(1djEF9_ zvRVREpTCO`OQu^&TGQ)WVm0ZFAGM0t9wJ*(GJj(PtsgK3PqJtEe>4WQi)&f5DJgQ{ zGyeIGM_?7|?*f(k&^ED#6uH+*SuO^{F~{Zzven;jW@bwX)m-=1XvEqZf(iA_0Ds`| zjykST?GqC)Sh=jEUyT2b=#zUFvbz2L9?v`YmX6e$829Pkl3o%Vs(HxzLhV2vR*!tO zaZ=ddAtT=Fror3$G*(=$M2&AG%`@JZLGoyE`rZdHXc|ZR@OZq)gTdAI8gqZa|Go7< z42Vugh-0G$Yk&u6d>%6*EW=j^xmw5HQljS(EwOOOw_}(jjAltns711&Y90T(Q*A|2 zxbcl(aogNZiex{hNnEmvDri1PGHv=VQYG%a$b>DAG-ZehAaI^ZWX3??+02Vd^v&-O zS6_zuvI$P6Wp(;JbVy&=Oz-dc5o8LTt3SGg2&lyqm0(9ZKnLo%EsfZ(M38%iigk;W zKW4tux*6bYg@3jKZw50Urdo4BJbol~D6W!{@Jeqj>#Hlh9eqG$k3KWqx_E!w6M%!_ zONpTOI8sg^9Qe!ikyjzR2I>ew?7f+qHWHWpT?(UB=<^_1q)gy8!~JG=Zvd8bwC54% zZ2Up~#FhQ!m1pn*7NL3t?ESE;&DkP)4q)*9u|xOkCY<-VWMr24$CIX5!lc|8XK?M8 zx)=KL<%!u8cbV&quXUw<&|#jQ1DK!B0HF*x4u6%xV{P*p{ekL0iP163D Do&>! z%z_wEIbo2>d^=Xdz>+)+FiZ(vJ;OB*+e5-4BCirhDrJ@CGs+ d@ia>I14uOnKdF z_J{Hq4{~gkX{97fH{yFcj#XF~qAK&jc{GE@eN#la-sh9YQ`~J%sTObw5+=R7eAxF} z?V*h0Ab;w`yK**v!Y$=twlw=ttc4Aa58oF@ s-m{IVIXr1j^uT-{oOYCWh3eryu;;7Wi3?gc{s5;!S$Xp|<|T|H&W3s0=o5 zT@2+E*$zw^6gi`da2IN_9<%}4VD`<*mz=dEk12~0mxwb=6x}mAI=IXhR@V*4Vp=R_ zI-s}ls~w)zos&+eb&VnRzR*;{hh1+U*C15zU-G05!tz)DSChaRY2(>ZhFC<2=|W|+ zc8*ZRtqiEES1tuXQlzhzK>ayTYMx~CG`PHS?Fv4#>;;}aFKu9`vGFcL@h;SYPSoPe zE2C^uV3hSYQ`1Pzx3YNOriav#*GyYx1S+t5;y8Y+|BXI974mPm;w#~~lj1*f#UXET zeQdt+NuG`RC!GN7@iW9IClG{mla6DCX1kfMs+v;WcyJ?bYkZl%zPf&PbKOTsVeag& zArt3&JwvChK8pVOL1eZXr!lV#wdffh4-kGjcQHs^5}lAAZc}!D_DN8hW(`Btj{&Ll z8?LG%(2xB}w|EqofYp0TNS5I__9R%Q>(qme0X<`ciEjXDRCh;_?Ju;k;PHiD117P0 zoHrVvLt7^FL|eyZHvbT0zaqSzpJ(yuJZ)U*`<*s2@2a;)JvBx#ouqJ TBw2)2>qP6TH@Y4X1FlhJm$YJAocyzfa7r z0Juazq5P31fY-tHhQ+Yeo@7SD-F+p+D(#1W7g` &E0H_5SA(Yc_?V#N?2Kx||E(Y~)rfU*B2Qd;fe*5fmxo0i;Sqe{d9Z&rdKJdwhMl-AYiUXm-Z3o)@r`=dje$; n)lAS;?DFJPGNFE7;y+t(i>O ErR~}nhaiiLB80;^mFskpX5!?v znNzgPuko|gXw#~~BMOlv%pwd##Cp?8z#iBNAO_z+ jQMLbIyJCo~tjVzdm znYND@Tmja|TKeBH6Ss}yGJxA}Tr!A&>CG2)yu!y#dj<@ZP@}mwO&@_ken*#p&4qNw z8jNh9woSzl5Qv;5lD2<7lZ#;oAIzfaHJL;TFszbQ(^C^2I~JWk^2Heit$W5xvc4zI zh?9L(0OZ|iu`bQ3Krq`p^pYRzDSW8&>Z+Zo-se(+BK!E@h785cC+1W4(Xn}}60Q?F z)JCF?zmBQuxt}j&$Yw;q#A&0#Y0^Z3O=)axa20~_kb|rRLi~3h;R0!d-HA+iOlV5o z&eCL^+dH4V9lx%f7?F<6_Dc dF{0ZAo zmEN9*3cjA!yqC?FKG{?HLX 3~rnfqDu|yV77A}k(Rsj6VklckCrFufb)WV+6;V$?fEJ(y&oU>ZZ@qEt9RS` zh%z-bB8iO0C0ott4TCCLV_h;hFFVw(e`ZUuhrcP6JxN^=aSxq2wycwRNWZeVcs60Q zXSgw93E<8@O(pv7iB>D8ZWx+WcP9>C>+d7aq0>Etd3!rt=xIOmFqldhx1g1T*`n#Z zdD{UWpR?_d0z!YXAHZr8dogNhLXY-?L!SG6qm9NI-mrlS>74O`dO%^K25f1u)#cF= zZE~;B!zLo@sd%N{Nec*5m=Sd$RyD;OsdD}%ofh8i=BvCJ;4mNl8u6x8&2@++>Qj >5e zY`0x4$Xl4r#;kz-|K5Wj_%~L75Nm^wbVQimyq4l)cw74o apfbDwHQIGg{- z1%y+>>2Grr<({gob6ds9c_2fk&@)mu9EyzhE67_oJVtx|uvH$F g!-^+xFO^+a36>ODi{R7JHp~73VG8J4m^Zve0u!v<6ta-hK>TmKNOFwb(tBN z&~!A+Z^klI020-#StBFG2%jGU*r 6?jwP5Y4x|tIZ-dOLy%97 z;^zHrF|(0FmHL9o$Y|rv{Qm&X^uU8vKlzQ0Z` RGuj+vtfgjN1$5IRkgd>SxHvu`{7$?+NNe*uKJ1oZ@RRMe2cJlZktNri^5j;XFBa z=gW$y406WBp-hipo&U29bP<{H?}Dg8X=0rp{O4gr2y41M6y#4S@jq2}cK{YKBRIhN z$@A!F3SalfF~qzv`F~8f|40Aa9Qo~PGqVpJ=l=`vzj+;hJ^QbJsQ4dUZhsxqU&r*n n8ZZAU;J*s^|L+2xBQCld 43OZ^rGqpFlxmO;DoChO0|J5s9|?$p0s<0xhHgN5 z(?GzXC7^%;ktR}N=)K7Mob~4Yn6=(|^Z)%gcipx2I(MD#-o5uZU&3{BBOXo>P7nyh zV`6Mz2?DY30DCe!8?ai9r_(_oZib10u60;8ldh1KPaDHdGsUoXcv)*QS>iK;KkC!Y zOr5@1&aMA4MmTZWSq0f)w+hZZ85Xw@ <43r10D*nEa zO#@9awO5>2K*vx$)(0GUEN|jyAQwGP5b~TNDC4vU=vQ_g(1kcQ5dR rPeLoTf F{9k0t1eAho;E+)9KU49f|h6di`$jRp`R<-j=KA!S1fH>+{q-(JXrvf@FB z^o^#bYNXt|k}%qF!?tief rJ0q2m0q MCRD4q-8#Tt4)&ZoqfgrP?k4PrpIyIpKmcr;+OV8e0Qnb{G903y^I{u z?SlE0o5h#EjrpRV8ssGNaE}U$m{^OS`S9K8=r!Cos0D*Rqx*59dc{z@0&S6qbRaCR z>^>8_H1uvp<9
& 9RYTtU=|C>dj|{POMcsdtI`J8{eDDnpzWkn6$3(6v}VbQ}FQp@LQ78)0E0B zYHv5E^7H7c5EDxwco|*A3TA5gn=1OS?SSKMeehw#vxzGGt$@qfR3n-FCkzYfd;z4- z4_rbldsteg;^+fe{Ou^g3b8ti+3t*l=Bp+k%Z?AcD`xp^W$9*$<5kb*8pqaW>~qa> z;8`n&11>@%?w9O5;c5dJeXn`>=JtqM_tUm&)AARztn2Y$kHDU8ALmkYdzpRqXUmBm z*76Z@z1^xg)OhDkzpsKK=`}-L#Ld;GU3T+nK^)4B>m8*>ik12b z>VYfD6I+kjR2&zt(>;lSCsT%M4qn2xv&vmU)ON%pAgRAsirSHM{k~3am_zOFHZSZy zBY4$fPRF(yiIlXB7-824Gg~>8LB=O4JVvJ)7P4)fW`l^7I=(PXJ>gZtnWc=rFB6)L zSuHlOX4U0uTfaLjn%HA+MkcP+wJyBY4!NddwP$kQe#foeyH5U*!SJX{-RQ-#WNs~U zO(};h*j)!B;jE>^W|sn4TTEiURwg{QMxo@}y{NHDSQNO5<}Yr|EfBxVnqUXBqA#S82-^GW!O`zC3yamZtVU6nJZh;j=N6 z TFu!@&AUwV8IxJRNI6G*o>c4jFs%-rnf~e0=wa&Ez23(2bC;^i z)#ci<1)tu=gxEjsF7IP}sq9qUDav*j+|JHSt?TTRYk4r4NCW$|t ! i79ZW0NWZRp!L9zpDc8zHqkL_j-SG zBLc-h6}z_{A{rtThZ>jL!X5|tPLH!Eb?f6b)=?pWio3hY?W1Cz8}V+_Kp(@_xt5m~ zy@_#~7KCs)5186a2ri(%`~kff={Cf+u~NtgX{Z( i)c)XFRmsS&rOPF(vsoWqFc#1U&rqy;yPBs^}qt>a#k0xC*+-gHyew zwGFkqZ4+ly;lX@g=N#)cJ*JQds8J(fNuu-p#B42#X&cc_8d{7JdKZYpj;HC6kW)Z_ z_)Ww9(yj|m;jn9XfE-Zm3RFXwL+oj-&$hBH-wt?*{~>b>KxRIr%zPNrA_}fYTHVph zLCH?kF9^2}X5p~CDkXREMAUBHTM9Xj?J#&br_dQKR$#Dqfff{eov&P}`7s_L#S~x! zD#;<@QlQto`%BBQA*nA$aL;WJ>|Dw{=%X`K<>95Nh9~8o;+7$yF)zApTJ%HAhUl|& zNuS!V*W<$)wu30%W;Ns*E=@|1E6Y$4!lhk{`Z(Mi-b_n+%BHa^#{RN0$lsyKr{tjQ ztabKF6(>SZ`jKVor<=N#AC@#B-p>R(U}inZW}#r?)@oYg_uE)!QeT(kQfLAG*8pjg zyqWT~gJmh}k)IT~e>+I+xfr|9u@|00?Kagm9^5RFE^)LJ_dYxee$qnC;YL6!gMFg1 z)v3AHWe w1+WG!@PRXMF!nW+!e#g}!Q+MM2AX1k? zd^Kcen`6%lNb{pzxETBW@`U`@F>^l_J~ht3W0i)NR`aZUoODZ7d(nR1((_OaA>0xl zA>H|Pc*b$J^WsK0lznw7!Z*#$6^D({Afg(4H~@9>0)fnn1OH{F+s{P_wF^ zSe9r&l%vb-Fq+U65|Tm=LsWf&>Ep5RYSq3D>7EX!8UYz-rR ?Rbj_N0ZsUd9a?<^4=1KfMF>Z^4#^b26F4O;ZcHJQt|3J2AbS|k+rx6_nI zYa3zm*JIv#QpmLyI7vXvQC_6gBeV^Dj fR>ArF xJ$ZQ5qF6pC1M}s=as(ri{blZ<}Q}ab5#TXcq=PU~%dFu&y0!BpIEpHAXdOv1yyX rBlCA8`8NjaKReNXnZN%};6rVqZ7j?3lE;t#A&|)xbAw7fm)L&+Hh)0} literal 0 HcmV?d00001 diff --git a/vue/循环渲染.assets/image-20201222110247849.png b/vue/循环渲染.assets/image-20201222110247849.png new file mode 100644 index 0000000000000000000000000000000000000000..fb8caa9fe7df00ea5bfac0666c20903e7ffbd506 GIT binary patch literal 3957 zcmd5 sr)X^&)E=cOIBLWwwVi6MnpIRo)JV N=hx@s%=eeKfw~}qFZgH{+u`w_(aGIGK*)cFM zMxCvpfD31}L}*%{fq`4c%*f!*)BG*W%_r450?$)B?WZu=v42qYm5bZFv)u18n46-x z`Wnu|8#uI^*rS=<<74#QWr9lf`kzw13z$QASU?|FAD5wc5`d6jI=@dt7y+P!C~m$e z2w;baO&65#^c-^`5TX+sXAJ-q=y%B^0IiGWcp*p`n{8GQo>%rL0l2{WzwNiW>eB)= zOskU(b44mG+4ex3yBWukN$Mw(UpX} >6=8 @GTB(<1SD5fPhs0M8%~{81N@swgB8i`#$U^D$RTJJ5#HbOuZlz56W&Km(|>f zaZqyp@)Wi3iCDdPsDUCx1Xl|)*E&M6UQu%?-=z)NL<#{07ulVE(qBlDO<+dnu4u@| z#GAV^NH87z;=bb3@(==fu&aISFUJc&-#14y@HD3qmJV{wR6}1KWDwpBDGB~|%SvXt zlCdj)y?Cjz@RKYe{r Jw>TK{vHK01f^STXfvCF?%? zheXp-8tbyoK&XapZ=K8S4>Q{Kqw>7L$2cm-sj+!*Mf89SWs0J(*K*Jq6tfs{x9;^1 zccsn|s>pGZm)76()s % zu1aob^1P;UR7$4t)31?#w0Jm1ri-~TMaWFxZ7lswEC#%DKNx7=2WGMRZ<7q;>R%w| zXJ^QQ>(+Ekc*8aMSYsUv1a&XxVm-@rl%LpPga+0Y?H3(7t9<|aA{*-49RtN>0bG1| zLy5 @mi2dwft!H^9W=!W#Nk zYXpl}g`4yq|H#%uEuJW%rIq$~*?Kfzv-%h{zo3r8S}jrS)%t|2I^;#V`}+f(a6>G1 zWHuw|=D@9)*{j@IDn}K06c;gNx^|W!RBz)$N~+oz=8awpTgL~LH85}&Q-kd0hGp^C zWtm uZI znO-3`>To4;a%GzOg<`tMWL6Smdu3YgC6?sFf2nC@_Ut1{;4f-frHm*^w53b}T2m*i z#+g;0;ejdR%A598!n2g9>Q>^%I$I=g#fHJ2l=;Tw{wh>`2%o=mh_vy`*s&Ie1}Evb zOi@7$_#|eJqM4iL7>xH1VPmM)jwVuD&3Zr(2eZvm%Rb$DKgm(C6G|LCklfwsXNwVj z7pfn{`! iqV!k-Su)b)~l5>6GOh?(Q zd_f!!s5u;cRsKxNg15HVV>jQvthar}xpH{%J-Ba61FwZ_h>QRpjzJ<~@3Nd1;VmMl z_zs%{C2u3=1R(oyJHE2iI|3Vb$e-gh5LZ&onnAimjotFsPQk3voUo3Ez<9>4;JoI* zKmM5U0>qvRuRMZ=xF#aFjTn1a3?JkgIua(YDI7sfA0(IYzva=)f1)1xT4G94#~hlV zqLePJ#JQ_};jdts9O$ijE*h6B&am4)XhS}8!$v~xwS RlLPQn~}IIe}O!J`WCm zA;3CF!boen%?O-E_7v+s>xq9<9(DL~C+0dJh1F)PYNV*HHSOcp#bRFsdF)b}$Yj!} z73&WRGAv+^WjDure`%(fUh@n-kJ&nyc(IK8yMty8rZZdeV=DEOl)7|V!qriz8ZSD^ zYMWb7Vv|c1-(k`^a_a~u5dD?fHWIBNq7folqM^8H*7)sI@?C}N{hYPaPlvV|9sRm7 z_tqF239!t24@&g+n<>wW-%I`s2q`=jMy_6-_em~Oh}`q-u}oNbU;43&j}XHh%N81H z;JOb+hpkI>EN!7kZ-;HW#~{{VZ!e6e!!*Tz*Wotp*B4*5$5{+M;l_unW22tUfFUzy z6*_aH>Y*z}Y{Q1E1V}NxV9mZ{49i;=Pw ?3{?;uAibt$J?I~xb03(Ybi1o-uYNJH%+V{V_KS2Wa{CqP+=6(2P}&gHqbG$O`; z4)IfY5M_*U7H~mQSgzdV+W7=|(%ci5hE==rDG^Vp@ shJY8v+Ww@E5g)&j!i&$x8S4|jFj=9PR| z65F>EG4aH$bhs@eo}`|zH4@EVoHHdHquE 3$Pco~I!xP6dss<`=gV4=9iFZArLh4X6)kd`2#?^|)~QFyifxiDBqhVR3A* zV0O r$->6OC)2CM5<{ai(K)IWVH)_bsv8nf*%!&b#2u= z3&QHE*&4CO=cOsMxPJDAh*zbcW`7czxbANHeVO`LTelIehofBWFysy9w&?fy+HZZg ze#Fo4F|9SSAz`p$@yu3Wk?-mT#CP6YUE)3)o>;v_fA1bG@M$1_8pbw&!zvVq5(+Jz zh2>lJCf&{3s{B|uUIf?J5zNh@J$>NmTF!!xZ$8d%57wHy180B3QSi2|VzGiCL(eme zWDVz1SEYTzx1UBLBv;pIhps)_Ipr;rB(<}#&KG?mh3IHXQx*ZBJzH%hb=BXQ(v*0e z1JkRgvnDGmo2lzIaLQ+^iu%d;>a~`ePm=tb@o- 6Ar<|NCULs>M ziK9_weK7G$#w3O8uRxpSwDW^QqLQR3ZXA~Vtf2aHXOAq9o5KrnW&WokWri7^{|8Ix z>-kG`7@rT^JvWU1DSTwh8$1xyzhE*R$vdNyJnrSwSE_BL^oVxVTd)OM+s2Z6LDHWH zA-r7N4V#$S^g0ULvOABmlP(2^At;$}TrFEcmNO3Xx!?KA^}zn`v^Yn1O3*-=&8V7C zvSvW_wFrgj wCCeW@y7?i-$C&IA;1P?u`MMvRc6avDy@s-O@jyA;OWqt&+&hjA-;-HS_U^6% zlL@l2B0H$_nPV4@`e|ybKnra5KH#q#G&BusdAnQM{h0ODF7;;k!OOd%vD|?s6kC72 z1q@H_4#jUen|GmQE?J*$!CokF)GSl01yawNS$MP2SMm U!C zuHW!n@(t+|zO%+?f0zQBnGqFI s!3L1EO8j)j^UN32J`G@v%!!%I z-hR7aBf>Vdx>+#d;YZ-Egko6xF^9j)nKcfBmYH`}l{<+H4v%GiE8RaNO%-(~2uyPX z80PbG^lNJSD5cLwhuP$;HR7)alOteQMiPq(mPn*)*D!P?umW1yOX)CfZ0Ag|&a1 z3W%`O@eD#*HC&RBU2c=>f)YdE1Mfx!35xR%vFE&tk4Bzby;nTD6X0vXXSbdgXVbGU zO8#(5nqnFA8FZOY=jM07UmCqFq!WtgHWKtxCy*uhz+goPQbApnN?-i9Pgy< uq?L=H=b$7^GKX02}ls}{9#98Sg+N@=J84@G-&&F |U27i@$tLRDQ==HHY38|@g`{;SCM iUna!=Pwff68DI67ebIEb$UlqI3}(hwMs*PPxc>p_Mue^a literal 0 HcmV?d00001 diff --git a/vue/循环渲染.assets/image-20201222111007833.png b/vue/循环渲染.assets/image-20201222111007833.png new file mode 100644 index 0000000000000000000000000000000000000000..11e44d68c19b16fdfe039787d2b1fdc6722740f7 GIT binary patch literal 1372 zcmbu<{W}u~00;1SO_L@MZLPGVWI1d(j~>I;ETcoINeJ6W2&*=AgvBN=aVbfWOsQ7Q z 7N2d=T{z#Oo}y&7UK!lFU9Zu+Lm@l0Ce zxLnUYDpg)i+4BZ9+b8G;^SO#`+P-BK9gLZ?M||C3U|3$&&MGp8(5~q+{0|fReSqs+ zeKPj#g8$bueJXMO{N7}6MjoPJzDTvV(QXqAKP3Un_VwH^tMCkka|GvX@0W^YQ&tYT zyB$hWxmp7Nod&+}K24K0+GI~Yl4}JY9lv{H^aJ#IdEHDbr1oBtV3TPHG4aW^N}-tD z@`$(fb8WA@L(__ONok(csB3d?Y1_QL+M46e7rh1BM9*ctmt^}bCMeSWmN;ogG=Y*c zN7WOXTglwHg51C~t9MN`Eai}E{HAe=^+}IQX_lAD@}D7UYvcxWK00jhMaaqxi3`0c zb}1%;bYbGQQTm!$%7y!so6p8)hlDJbNzF7PvGGdpS|_T9RRI7E-C@(LJ@Y)F9~EmS z9eylbdOz3%rKl%zVgR{uPn8lagpXY4dBH=6P5(2dW}igk9iK;f|G`93oReO{h~KFY zWJxno$tpWHzd(R?4NwlYRLieaiumDg=3LFZWmR$U>@S7z;+bzle!?`>Gu>-)ai4-O z>=Jh?Rn5Lv-5B94T0u?u{1BDzhNqW`c!v6fGF~)Qs<`r9cJ}4&)BEEcf=p2<#-LAs zF?W_QdKVi8>#^zx!Y8qL-7x}`N?YR5K3e*(cV>#<5_$0}`JRCf+XlKGT+9>V_3mwr zQzI@fdKD}(v`${_VsOHdrNcUiDCr1VAI(K6IcwBX3wQcOUPC5RtQT1hvI_y0gaDCK z#N)xI!gWH;Wk|x^fNYg>azxfugjP5}U>?XmBs&^}H=!ypoVV$(jgvG0gH}BPwfp*| znNw{^MOZi8#;O6uUSKCkF;1q%f{|OW0hy4XObB}3dWKmjdBWPhkWf)31*SM(7N0Pw zw14Qb#_!HITe9^DHcX-$+$-~hwv6Nsc(NcA!aHQX-Cc}^M2oHav&DlG565Ul+XX Y%0JbSBHHs2P3~;f}D|UgR~q1o9;xoVAWb7G`(|lE)!8A7wY&{)kAggJXM~zFG_$ zI|>{e&4rxvnTdkOp0we`z)GLxjX%2EcW4@Jn8rNP4mz-8?`AA+Gcrn4u2~_h(_EdJ z@KN7T0Bbo<*-5}43bXRMt11?z`qBFIZ?NMH>)4|uK*Szq1xi^hpY!Su#U`#un{xbi z=7{TCzt}{EL$#fWk0&^$AoAF+esD51n1R+lBpzBoz%0Ga@{&)o%Xd!0^1^0F9zeDt zcmP_Kk1A5_4(pXolAeD2JQ=p`C8k?V=#3(p(Qg?NHqe#VHvlEobT^nIO^8}4 >K?mc|+G&O_F6+y>sda9R16& zV0%pC))i6!w_~n-dD#JyWd9W>ta5qafD7yTUx56K9uYnCyHT5{xX)l!O@PmSe;gM} G%={Pg=a&`$ literal 0 HcmV?d00001 diff --git a/vue/循环渲染.md b/vue/循环渲染.md new file mode 100644 index 0000000..aeed5c3 --- /dev/null +++ b/vue/循环渲染.md @@ -0,0 +1,89 @@ +# 循环渲染 + +### v-for 遍历数组 + +语法: + + v-for="(item,index) in arr" :key="index" + +> arr是被渲染的数组,item是被迭代的数组元素的别名 , index 指代数组的索引值 + +示例: + +``` + + 第{{index}} 个元素 值为{{item}} ++ + 变体: ++ 第{{j}} 个元素 值为{{i}} ++``` + +``` +var app = new Vue({ + el: '#app', + data: { + arr:['a','b','c','d','e'] + }, + }) +``` + +效果如下: + +![image-20201222101315624](循环渲染.assets/image-20201222101315624.png) + + + +### v-for 遍历对象的属性 + + + +语法: + + v-for="(item,index) in obj" :key="index" + +> obj 是要遍历的对象 item 指代的是对象的值 index 指代的是对象的键 + +示例: + +``` ++ 键为index 值为{{item}} ++``` + +``` +var app = new Vue({ + el: '#app', + data: { + obj: { + title: 'How to do lists in Vue', + author: 'Jane Doe', + publishedAt: '2016-04-10' + } + }, +}) +``` + + + +效果如下: + +![image-20201222110247849](循环渲染.assets/image-20201222110247849.png) + + + +### v-for 遍历范围值 + +``` ++ {{ n }} ++``` + +![image-20201222111007833](循环渲染.assets/image-20201222111007833.png) + + + diff --git a/vue/条件渲染.md b/vue/条件渲染.md new file mode 100644 index 0000000..2cd9703 --- /dev/null +++ b/vue/条件渲染.md @@ -0,0 +1,94 @@ +# 条件渲染 + +### v-if + +v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染 + +``` +条件符合
+//show的值转化后为true的时候显示条件符合 +``` + +``` +var app = new Vue({ + el: '#app', + data: { + show:true + } + //data属性就是用来绑定数据到HTML的 +}) +``` + + + +### v-else + +也可以用v-else 添加一个"else"块 用来显示条件不符合时展示的内容 + +``` +条件不符合
+``` + +``` +var app = new Vue({ + el: '#app', + data: { + show:false + } +}) +``` + + + +### v-else-if + +`v-else-if`,顾名思义,充当 `v-if` 的“else-if 块”,可以连续使用 + +``` ++ A +++ B +++ C +++ Not A/B/C ++``` + + + + + +# v-show + +v-show 也适用于根据条件展示元素 用法跟v-if基本一样 + +但是v-show不支持template元素 也不支持v-else, v-else-if + +``` +Hello!
+``` + +不同的是带有 `v-show` 的元素始终会被渲染并保留在 DOM 中。`v-show` 只是简单地切换元素的 CSS property `display`。 + +### v-show vs v-if + +v-if 只有在条件计算后值为true时,元素才会被渲染 + +v-show 是不管条件为true还是false 元素总会被渲染 只是 如果条件为false 元素就会被附上display:none 从而隐藏 + + + +> 引自官方: +> +> `v-if` 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 +> +> `v-if` 也是**惰性的**:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 +> +> 相比之下,`v-show` 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 +> +> 一般来说,`v-if` 有更高的切换开销,而 `v-show` 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 `v-show` 较好;如果在运行时条件很少改变,则使用 `v-if` 较好。 \ No newline at end of file diff --git a/vue/表单输入绑定v-model.assets/image-20201222175835286.png b/vue/表单输入绑定v-model.assets/image-20201222175835286.png new file mode 100644 index 0000000000000000000000000000000000000000..f7ce7c79986803b0860a075760a348192708e03f GIT binary patch literal 832 zcmeAS@N?(olHy`uVBq!ia0vp^oj~l$!3HGj_>KZ8W_C{($B>FSZ*LpsJ#vsZ`q6xK z$hx3Me4XAmWZ4~>gjBk8i&<)zesiq8GHt<;N&F7acOK?C8GVrR&N(p_1J4he!*BM6 zSK4#8zy1Du*L3kkj(N`$cgAeH|6|9&Gw}+{4Lcg5 zS^r4QKF}ig=+MHmMK9MCt7Oi4^zq}ytKIXTTV68BmF#kTq(5P6uk*i|=Z^b^hR*O& zTYJq O9j$20#>^Y+pn32%qm=rH(lV@PO z{CAI`!DimRn!~Su{faA>GtU?Eh}Bo(4C8yZ;h2a+jD vMej{QYZ9fwu+kRk!ZuaA }%Cdis_q_&?6yfW<6IswxsXKXPYOL_p);5J^x^{{_|ujPJ_Ne;{Z8x !_e=V#>+AF1&ie9d;gwys=P!KN zuWehL%h%Pa>Uq;qE=lq6yr{q>c~NC9Kf z5e}he*F419`EPRJs0Nc95O94pv>UM za^0HqUw b8RB3r$34*3=Q+^e?0r=v)D=V_GxaES+%On zUZclq(vou;8Z8T+e_gqqXWoj5w&5I(3-5<*J)>}W-6FT5qPqfauT*%MqMLR;zO_TW z)_cir^H2V*`PV-`FSql!EiY!er?bz^c&q5tRkuBsoXgO 0Yd-vp`hYIhMRB_u)r*q%!;OqBep8V )q@B@`}suoA!uC2*3TY pJmSWO$ A>Q literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180149362.png b/vue/表单输入绑定v-model.assets/image-20201222180149362.png new file mode 100644 index 0000000000000000000000000000000000000000..75c9807d5bb91b0952b4ca0eff69cef88ee7fa59 GIT binary patch literal 2481 zcmd5;XHb)g7X2tvqy;c20i>!E1=mGDkPbltNLh-2RFNvu42VdHp(ABs5yB(%5~@ff z5Tpeu5!6rwqy&h7(n)YJ3Bm%K{qz33nf?9#+_`h-&Yih;&bjBL*;tthoratS06@qL z4zmRS4hTDU<>O&T+~89r0PsICgBjXCDcV`k53aP5<=IVfBwn7%ACvzkHue+9Azgq& zZ4dZDIW>*&4yP?_AW+^=UbIu1uvPZsMb2i91db0Y&6qXCYWU;*8@{rhy&h`NYHraS zqmx4#Sgryon~ p!8Xg#820{G|5UgZkB}(zU75VXw{vQ+s(B>gHl9lV z&R`_zBabuMqT=F66BFX@9v&g?Z=#2dgxX}~^3FF(t>H$3u8M{TwWr!hORtMKEpHx_ zXW-Ob }?=GgaooxJq znE(QrW!%?VRMI{`BPV5~s~Sgr{a;G(l3VRoqwyY<|8z|<6SywHzr=a>pSY6vjsU}E zf3W|B 6NOa zwqqBGks|7inTMRc`oc|i%q7loDUBnfe-Nd%BNH1m9{hPHJ%TQP>}2p-N_eG2!l4bN zY6i=Yh2n|~+|(wn7`vbyDm@=&KHwsy$6aCMWnye7<6QeTRHcf{gr}+P-eVoN0D#z8 zQrN@;UL_i>!fhF%8C>|Yn(s@04`fKhw_9FJuP !L9TjAS@)3^g$y&_0`%YJ;~kj{G8+2$z6_isNXgY30NnF2lKQ z3*RUxr=XiVH{691+-(AagIK&e@py2f#G(Sn?TmDt{H#pH?16Vy`*~q}`n$pVU4;qe z^sE(|6ZdV$aO*9R!YsjZ-(E|=JF5Ho>X5jBCT6%36xH=IvKgErSZFv3VA9L*&HQ6? z%))E;+K|)ax0L<9ZG3!i6FuB2QinS&9g&}}N#c+HFj5e%BV*rz(w!&Xye)u^wTQ$W zlx<|$N#k-(DU1haD{^`M$8LD3KO%SWx7fjhrSbf)Lw+9>hW%Rm8hu6Vk~TIzDjYt; z2qw`I2a>k96rRdz)$TX9(#~b>+<#2{q`D t}taI+oy!1dF&y!l^@vWN|=?* zI_~-a1KYFu(|S;fVgs`BeHdO8$As1-*UAEh_wz-k*_laVNZ6Q;uI|#_9^wvVbkv%i zlS?8cQ+7pr5mqNFpt2jgovq`s4=qwwPE8e~nTz(MR9-9BA34QzNFGJddp|Un_FJc9 z0lt$^+A>CCjwaOYq_k~bw~Ub;woK^t%XgfNo$YY(W21@RwUSEg+NyfL{7SB?r^ky( zU18Cwkq12%$u@y~l_#-E0`8DrLXdw%2X_F9k7u5#tSs{S8cuy=r~ch!3fezP45~KM z#-m?w+|hqTcms)6ov(7As$h9H2(QWAONKmr32sm@k|)x~qrpel>h*?{Ws5c@mZVR6 z2KK6}4Mcd{KnAixvYS|8Da2yZ^h;3AgRS#|7b}pQ|MH?D*UIYBt#zwNY0ExjXe|uZ zqAXk(=kWSn;^|l-!lADo;YFdAY(=_7bpqeH3T9%PV?s*1f&^+yRU?(fOyW&4(1? z3raHL+M}ou54yEYnZzZmwq{05O=>D%LDa3>So>;KDmo^Uc^9{Bm#Z~c-dVHl7&t5_ zQBDJ^$ZC;^b^feBDyTIPQaxWAu_8H)IR^}dl3cD=P=K8B)}9d|Q-6|uY<+Hx&D(JK z+`?@;50 nf;{ zeKNaOU4jmLQ~*G4+pZJah2pWio*m7=n{bc6s+rJRd5BFCsB9IUA`DUnM@$ ^( zVp|@Zj8GFFeC-ELX$s^Rg_`TSCU#tYAhcBGQbtaMjxfSa1yGpPZNrgj6Jmp7of4oL zekHr4VY_v@oWdKSul` uR0bKJ%RkicOd`yzZ78d6(eCgoUl^m~wI; z>NRQhqMHLr $>;rV z`sYu6b@RFtwk`=isCjO~yV0wv aQRP>9mCFq#>xQdtH>W~Gc6U&eNuP|JPl_vz%VP}8nZrn@*H3nv zCTv6>EPUso0c^cF(&&z;^VoYN%dnu{MLB-{<#p%p2L{)|FKyx%E-W`6N`9N#y672C zAeeQ}-dF2DJbM9cJa+08exk3eQs4$o$$~`|t+sEt-&r47`q8vA@n_a5+~F_Z5;m*( zVFK=mD?jl?GP{d$c0LPOU0*!cB7J`#ka3x^_gCh8C;eRJH#er;8e)8@i=&hI#7Uyu z>904U3(14S0octT@H!D%#+Gp}&A>RcR;+e@n%qCO01szWJ=&sB1WL-VrRiuZSe5kX o|2PNff8p+b?Zy9N)BFj?5@`R)z2h@0Y%2zsnOMP^j6CE22J`;Nq5uE@ literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180209565.png b/vue/表单输入绑定v-model.assets/image-20201222180209565.png new file mode 100644 index 0000000000000000000000000000000000000000..e500bb6862553b0a71bfab740511b4263aba002d GIT binary patch literal 3508 zcmc&%S5OlG76d^+4Uhm*q)Cw`(xnTEp?8$f4bn>}qJ$PqkYcEj4gw+_6o?4YyC_XS zkzPZW5&}qQfpFZ{-OtV4-~GJVd9yQbW ; zXf7st@*C~NK13J%;BjC!e)eA6(svFTTzc5GkdKDKMbe449|=ZYyXu=KHrny{!<%-> zxyPpKW?R`YTZ?`R9`xe(JL5I&KNg~uKl_5%%3eKO{_d2nU+t?P8kKS+%OaXnI6BzM z=-Zy-tuqMd#T4*;8v<(30YQlnwWGsn-rPn8F!+TNjrKMed~*Elkp&8kPQY~JpmiPs zE><@je1-Xkf#E8k#3=TeXtZ1x&Inw{M-#x$PcL21401>Ri+XaOxUdIphmsji|CW%i zXS7k1PdKDV163bubLFI@b`gROl$)p($+`ih{7H5R4JUot0$JEDnaqR1U;;@8UapxI z*e44c8&`einw3H$_vostu0?R94bmC^5(W>&%hV%5RO+pqwXcXsXA>@-KQYX|^=`7h zj#&7u=#@oTNExRaBW2UsfOC6+L}E5KHy=D8Ei6zT9v+7G^~Fk3Gzs4 zXA3
u>3)C;ZNDK)T?#wHur-DYMtY(BDNpc$GjI|d(oAYXEf^a ze%AXd-A}7oxj)+ls-5LW;`B6?gewLmYPgCNe?5Zj&E}4pW8TzSf3ZIH?|@MUVr$^J zW7waDKlIz Vupqb^R 2ZNKDWD4-} Y(mbwP1 lH+4u>?Xewbn*~57vc#%RKSYtRcgy{)*Ro*LS35tqf)P zMK|*%+_EXf5R}Wex}o`v!n+hRqR(bM|M2)Aj{L2pov6L1wHT1w-*k?E4ol`Z0xH z>btKa#d;$hg=e{AJG{8X*topF>X{ku!Q;M$DRCdJlZ;vkBi3RyF)zspp&uJ<+QoZ` z#?$4gojuLj!by4pu9WKVs+N~4mYUM1aMyinFNtMhY+)l(Tk1{?DNX00N;qjBLQ}hm zS=Ko~s`DZTIot+Suu|7KG@7jK<5^J72b!LYm7EG%Sdx-O7G(_;+`RdFaJ$$d@x2-Q z<1N_oWti+MBLeRGhii72iO5Y#c;NIizC$VLjpy6UjNzoTKT6XaGxKN7^l;QEsVNs@ z8?M?p6aVzJm9+89nLy!-S%ta1L_sy2p*@#kRdAYoI{b2`T^N*V%#d#S8gRug#p|^K z>HO#iLt=!yLqK`!q{r(Xu|wHfBm*gr^Vjp?kcVFYaOBadr2=!TXqw-NeT!DyYN>77 zB)j3lgxkPxF{^7%dGvwFv&I%%zNhk3$I6%O^I*kyiIjmcoSmYOxlf{{j{=Dsqq_Y* zamBt{?7!?#I2>mgYF#`wtDnfZGd9xpDTE%pRs`7Qg^r(}ZMz=-J(XzVW}LU@xx9mO zT!7_sA>_Q@4GNW>r#Mr)F7yj)eQ@>V;WGpL)aDjGl_-J9zF8cM-z@mOw>noyE_JwJ zuyOX>#lpfOFffq)@xg@$Twq#n-R<8Ke}TL&1pNE0oiw44cQT*7fm6~mIBfHGmdC z-#8<}nF>m#KjPbjc65)or?(Mqr}9hnp=J^1v5}gKU$YGCSwOSKG7;=wD=Is!?>h;( zEO{v%Gy4-+D q|Yxjv`m+2F=<50E4)`q6?9uOGuMv zSqeVB7Z!zWBcJRO(nKY;NXE4a@i=i=d-*68dEoU>yO$6=RDJUNmu3E14^RVLQb`R0 zakD{>_5YLk{+mxT&~0mW##J{9oOVs$NTPlv(cN$`Uac%K7^KGFAMGC;l+w|X*%GC) zUNqr?oyz%AD#8Zd6NFqh2!}ul*9=-4UPOr~7urc;+pJ^69UcfuX18>w@qc8+m+;KQ zg8Bu$nhgo88M5td>@WEbLk@@b4Kv`R* 6eZ=Ip0fCWxzzZ*w$>^`e=1hOc^Rs`pefL^>sV6;kM6bh;1^S^jmJPz z9B%0C{g%H^9?rcr3U2FKdZ@LtKNoSKIrs?m>8rthKiKUd1#l;Mpd^}+aw5O+>T#xI z5}x)Fs#Lu8xV#oGC_eTG*3X~`DRcG8sgTid%9}0Kw_4lqTWJiQ%8Bfh==0jN6StWx z21f5>okI>x{TuY4kZ~xi8iE~jwZnT~$oH6x{dIWf^I%gyAmu0~^ixP%?>CliQ_B?h zg9p#HV5IulHGCtW^!0~x PSD7=I~dj;TsG8|DB85cR8h(t$H7r2L>kfGRI7 zPxptV#(Qoi zKz^V@!Rx?KHHSuPSK^R`xP^+x?rU;ygi3uF8d$vz{y@D@d?h5A_lu ?Md*o749eHEKwu{YG0YRr;uWP5l8|ksKlPSd1<)shVFR{u&93Xa6M>nX1~Y z{QKrA$VIa<>gh3J-PWU{MP1vy?Sx@l*QEK00FTW1SUQ~&T)NWB6~JL}Tew} >YWf} 9|SwBCfY z*CI^8HZJ)4P%NhUU~f^SFjsFZ|7g{BIM%u@SYwB4lcfSB*bnm;ruUIq5NAGeThqB5 zQx>V%DP~-?2a8Z}cH@O$N_ Zf#B;)!G?ghn**l`Yrz%7(V%d zEMgd`=>Td)kq1>=&K+4Jb(vay+8pN5Z?p$5si_)x5HH@Nx6U{Gdj)>X3S6G| @CR5ex)4aCwJFfeXiC$AVH**P_QA_Ey^1S^Aw_%l;|9d4ZQ)|>-UBwMU87OyB8`S zh>L#)!ae5;>e;`eS1FsP&N9M?6CcaEkDS+wZkeQaSF`;9eIo{)A7mrM2*~VD@-H%` zvPnHw8fa?BbMF9#ne8*8zK{q5{-l}YVV(P#T}dC^g&h*c8W3krTyib~Bnb5R6Y$FE zR5OXI-VQQmno>4Ll|fafeR@6nODPuF{DdoDaMrqpR8|Ys^7Tdq5y@IN_*It1SMjow z%!Tn0IDs{I_5AV~1+$fBrH#?;TQ7^UpV~XaYo0FKXGVT BM7lMDwr2p0({-4xy+BfwOyQEj4-4|_)LRZrW JT&ZFI>K{#$;$i>* literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180542488.png b/vue/表单输入绑定v-model.assets/image-20201222180542488.png new file mode 100644 index 0000000000000000000000000000000000000000..cdbd00348cd9249ddda4d7d10650526d09c0d544 GIT binary patch literal 1964 zcmchY={FmQ8pb1TFd@aYQ?>7mt&|!;8k)A&*jxMFB9^AoO&UU4)HY&QV~eRORUwM8 zv^lu8L8DhwYpkUqs3nP| o(9c;Ft}3Z2OiCkWp31T;%#;$aW>e6@mR}zB z)F5JgHWlYSORYgM1R^pSf&VePFIVy793ibGum~adKX7ieE^#>KS=rg51BT#KU}Ixr zQ)_GL?@qr3B_<{ovvN;G2t#*kQEeI3)heGUnVFf8C=_au$rQrB2XwQ7F&L@r3zi)m z`q2d@5`wLru+{w5gu-6zh>TB)neQIN gB`@M=CtG^Vq%>9e0((beZ`BG$5NvXi07^z!cj%gM6PNN_T&}1!tr;N=}ii3 z%((*x-y(%KJ2{zxRN<}%Fi#-+q~t+S8kDo9>>F=2+86iyOeSf11 *=B&MFWN>B<$EE9 zTVae)SAZj+|8{#k6@BksDw%9d;ypR$h)qpR-JF~B`2bhP+ZrF$>4O&nxUW1f>H$O- zM?$mE!w}lRfhiw8>0=Tfo`*uANMbHJ2(X_m9i!ryPEW(nJy{HJq~ii>{6hJi%`{Fd z+5;c%F8}m+e(c-st@=+N$l+s>nDc%PWs0m?F{N05mwNj3a3`^dgJo8nJJ)@UT2C5+ z(74>o2^dV={rg3aa`1TG$vY CK_8E=&44dU<`lj))wh(Om!YOt;0X9J1zPjt%4It_;&R>#p+B=UlU8!k|>JFZ6;J z4~ey!kdUy=-H$9QD_i)!Hs*Ef7IlB$gwocwvpOo*r-LkTFU--m{H(@n#}$T)S$cQ% zZR)wari|k=k#wB#9rP8%+){z#dZ)RvL|HQIi-CO&gbM!~nksND-f=cI3gx~qJyvHh zwBa;ZPsp`xy01{*e|xbnqdoDQu<#ChCz#1(&M=uSymsa=@)T^JGXL9nSFT0aWh<+J zi3t}}4q$=veT~iDQTbV4zqQ+(OI{|dv)R&=XdQWkKvG_wm|l$b9chE-c3~ya^W;Ej zK3TfmXR+vN?2;#*cF!|p9|Quwt|?J89yQI%OY$H_rwB_`dv~}{t?R;+>>Zv7`tpZT z%PlbJd)|pQN$HHqIdrA {HdtgY>L>YaZ%aGrJ)OCW^b%Wew+XllbQw zdYiRl8Hxy51_$`*`bKboAI}Fjy7)SUn+&w=yDkxAhDr~9;?+&`39YIT?S85Jf;7{s z>CrL1IcsB+R8{qpAav0Tw(vZ|)WKNh(u1VDI=^dto78%b{@6d<8)hDA8)zYmHM^fD z1GQFS9dH~$x0Ih%Q*xAj5#y29d6ZI%T+skeLf$}8MD>a@IFE=tv-iIeI`s|@4_A&3 zSu3Zf-BE4RyJvF{?k`e10TfrJ1tvuFTO~8ABwQu*T6A?a6{F2Sseg;C{{~pQZ4q}n zikGmd^+eDrvbhv`>4{a#`C W1-42uiEGnsk`|AuXgCDwKd zWse$84r!&{W*7}63R7HQqu_zIfgZzPlxR*$W0@}Q%Z&zHeG}Pwo~*$|xFv&ZU$k6a z*ZK$9w71wV79Icg =w!yI zkYt-ZbF>VD{G-)_nRF`n*EFzS{tM9R9*=#<)(3QWn68f!%A?V8#%sVx>I8?s2@yLg zvEM_y$tg9O^A6Z4*Fj@iEP1jeQTB_<_LRU9GWFM?KY=sNi_oLPK-o|4Na-qT%^P1$ zKnp~&Fw8wc(!fDrL?GG E+X9?oXK}N@crjnQ@(wmyPoG6rz7I!xp%m`8YD2 znPqRIM)q)BT@&IZ?10&wPu2Ms4uOJTgq)*|Qna-CM?#?T{|Bo-WVH9*N(;_OoV76E Mnyn+e5f+gA7umbOR{#J2 literal 0 HcmV?d00001 diff --git a/vue/表单输入绑定v-model.assets/image-20201222180600963.png b/vue/表单输入绑定v-model.assets/image-20201222180600963.png new file mode 100644 index 0000000000000000000000000000000000000000..cdbd00348cd9249ddda4d7d10650526d09c0d544 GIT binary patch literal 1964 zcmchY={FmQ8pb1TFd@aYQ?>7mt&|!;8k)A&*jxMFB9^AoO&UU4)HY&QV~eRORUwM8 zv^lu8L8DhwYpkUqs3nP| o(9c;Ft}3Z2OiCkWp31T;%#;$aW>e6@mR}zB z)F5JgHWlYSORYgM1R^pSf&VePFIVy793ibGum~adKX7ieE^#>KS=rg51BT#KU}Ixr zQ)_GL?@qr3B_<{ovvN;G2t#*kQEeI3)heGUnVFf8C=_au$rQrB2XwQ7F&L@r3zi)m z`q2d@5`wLru+{w5gu-6zh>TB)neQIN