狠狠撸

?? ? ???? ?? @ ?
Vue.js ??
???, 2,d90r8s@2,d90r8s.n.t, @OKKY 20180419
??: /tt4s: :::.s10d.s/,r..n.t 2,d90r8s

? = ?J ? (?S) ?R?
? ?? h?? ??
? b? ??
? ).6 ~
? TEpe.cript
? g?a, ?L, T? M
? npm, Earn, De2pack, parcel, 2a2el, ReqCireJ., A,(, ..
? C..
? .aAA, +eAA, …
? b? h???c
? React, AngClar 2 , VCe.jA
? eV?
? ,=ca6, JaAmine, …
2

C = M? ? (??) ??P
? ?? A
? S??
? 3q=ery
? ??? Ang=lar 1 B?
? C++ ?J Bootstrap
? ??
? +pring ),C
? (+P, t1ymeleaf
3

??
? ??(2? ?P)
? ?? ?? A?? ?? ?? ??
? ??? ??
? ??P ?? ??? ? ??6 ?? ??
? ? ??? ??P ?2 ??
? SPA(S)n(le Pa(e A,,)
? ??? S? ?? ??6 ??
? ?? ?? ??
? ??? S? ?? ??6 ??
6

Reac. vs Angula, vs Vue.js
???: ?? ??:, ?7 ??, ???

??? ??? ? h ?? ?d
? ?j? ?o
? httEH://Htat:of?H.8oB/201(/front-:nd/r:HuAtH/
? 3u:.?H? ,nguAar ??
? ??c k???? ?j? n?? ??
? ?e ?b????? n?
? httEH://kr.Ku:?H.org/K2/guid:/8oBEariHon.htBA
? ,nguAar 2?p 3u:.?Hc ?yN ?? (2:a8tf q??? v? ??)
? httE://7it.Ay/2/B133a (?i) httE://7it.Ay/2.ygZAf (l?)
? ?t Rq ?u ip V? r? ?s?
? ?? 3u:.?H? ??aZ g??m? ??X?
? httE://7it.Ay/2uXq:fu (?i) httE://7it.Ay/2K0-X0: (l?)
)

? ?? Vue..s jb
? ??? ?? ?V? ???
? ?? ? ??? ???(2 2(y )-nd-ng) ??
? d??i
? ??g(SPA)
? ??i?S
? ?? ?? d??i
? ?A? Pe ??
? ?a??A ?9 ?? ?9
? P???A ?? n?
? ?? ??
9

?? ?[
'0
;ttpD://=D:<dd>e.net/madv<CuD/y');vC;=/
,d<v <d="app".
,;(.T?,/;(.
??: ,<nput type="text" v-model="name" /.
??: ,<nput type="paDDwACd"
v-model="password" /.
,;(.???,/;(.
??: ,<nput type="text" v-bind:value="name" /.
??: ,<nput type="paDDwACd"
:value="password" /.
,;(.?,/;(.
,u>.
,><.?? : {{ name }},/><.
,><.?? : {{ password }},/><.
,/u>.
,<nput type="buttAn"
v-on:click="init()" va>ue="??]" /.
,/d<v.
,DcC<pt type="text/=avaDcC<pt"
DCc=";ttpD://.../vue.=D".,/DcC<pt.
,DcC<pt type="text/=avaDcC<pt".//,!301/T/3
vaC app = new Vue!{
el: #app ,
data: {
name: "",
password: ""
},
methods: {
init: :unct<An!" {
t;<D.name = "<n<t";
t;<D.paDDwACd = "";
}
}
}"
//44.
,/DcC<pt.

+, ?? ??: ?? + ? + ???
? ???
????
???, ??

?? 2? 1? ??: data, comp,ted
? data
? ??, :?? ??
? ??? :??
? ??? ??? ?? ??
? --model? ? ?? ??? ??? ??
? comp,ted
? ?? ??
? ??? data ??? ???? comp,ted ?? ??
2

]?
+,
v:r :pp 3 n>w 6u>#{
>l0 " :pp"&
data0 {
name0 ""& birthyear0 LhisY>:r ' +.& parentCheck0 f:ls>
}&
computed0 {
years0 fun<Lion#) {
v:r r>L 3 []1
for#v:r v 3 LhisY>:r ' ,0 1 v <3 LhisY>:r 1 v++)
r>L(push#v)1
r>Lurn r>L1
}&
isUnderage0 fun<Lion#) {
r>Lurn LhisY>:r ' this.birthyear < +-1
}
}&
m>Lho=s0 {
r>g0 fun<Lion#) {
if #this.isUnderage !! !this.parentCheck)
…
}
}
})
hLLps0))jsfi==l>(n>L)m:=virus)ujor5=yx)
hLLps0))jsfi==l>(n>L)m:=virus)w+:,/mLm) 0 <ompuL>= g>L)s>L ]
<=iv i=3":pp"4
<form4
<=iv4
<l:;>l for3"n:m>"4?Y<)l:;>l4
<inpuL Lyp>3"L>xL" i=3"n:m>" v-model="name" )4
<)=iv4
<=iv4
<l:;>l for3";irLhy>:r"4[?<)l:;>l4
<s>l><L i=3";irLhy>:r" v-model="birthyear"4
<opLion v'for3"y>:r in years" 0v:lu>3"y>:r"4
{{ y>:r }}?
<)opLion4
<)s>l><L4
<)=iv4
<=iv v-if="isUnderage"4
<inpuL Lyp>3"<h><k;ox"
i=3"p<hk" v-model="parentCheck" )4
<l:;>l for3"p<hk"4??? V?<)l:;>l4
<)=iv4
<)form4
<inpuL Lyp>3";uLLon" v'on0<li<k3"r>g#)" v:lu>3"??" )4
<)=iv4

? ???
? ?bi(1ust(ch, ??d : {{ d }}
? ? ??o a?n ?? l{? ?s
? ???? : ??? u?
? v-t,;t : ?b ?t ??(?, < à &lt&
? v-ht1l : ?b ?t ???
? v-)ind : ?? a?? ?? ??? ???
? v-1od,l : ??? f?? ???
? v-sho: : ?hwy h?(dis4l(< c}r a? ??
? v-i-, v-,ls,, v-,ls,-i- : v?? ?? ?hx(v?? e ?m? ??? e?
? v--or : ??
? v-on : p??
? …
14

? ??? ?
"5
<d/v>
<1abe1 -or="name">??<!1abe1>
</n5ut t<5e="text" /d="name" v-model="name" !>
<!d/v>
<d/v>
<1abe1 -or="b/rth<ear">?=<!1abe1>
<se1ect /d="b/rth<ear" v-model="birthyear">
<o5t/on v-for="year in years" v-bind:value="year">
{{ year }}=
<!o5t/on>
<!se1ect>
<!d/v>
<d/v v-if="isUnderage">
<! v-if="new Date().getFullYear() - birthyear < 14" >
</n5ut t<5e="checkbox" /d="5arentCheck" v-model="parentCheck" !>
<1abe1 -or="5arentCheck">{{ birthyear }}=?? C?= >? ??<!1abe1>
<!d/v>
</n5ut t<5e="button" v-on:click="reg()" va1ue="??" !>

?? ?aN? ? S? ??
? ??Y, ??d? ??? ?? ?aN? S? ??
? ???? O ?
'(
EE =u<b6r " ' }}
EE >: - 'Y.1' ) '/O' }} à eb? ?? ? ??
EE <6ssag6.s?lit '').r6v6rs6 ).j>i= '') }} à eb? ?? ? ??
<div v-bi=d)id+"'list-' " id",</div,

?c ?? ?Y a?: met;A7s
? ?c ?? e?
? f?? hi?, ??gV?? ?b ??
(7
vaC app . new Vue"{
e>: ! app!,
7ata: {
name: "", 5<Ct;yeaC: t;<sYeaC - (),
paCent1;ec=: fa>se, s;AwA:e: tCue
},
methods: {
reg: funct<An"# {…},
agem: funct<An"# {
CetuCn t;<sYeaC - t;<s.5<Ct;yeaC,
},
showToggle: funct<An"# {
t;<s.s;AwA:e . !t;<s.s;AwA:e
}
}
}#
-7<v v-<f."s;AwA:e" v-on:click="showToggle"/
{{ agem() }}
-'7<v/
-7<v v-<f."!s;AwA:e" v-on:click="showToggle"/
?dh?
-'7<v/

??? ??
? ??? ?? ???? ??? ?? ??
? v-on ????
? ?: v-on:cl.ck, v-on:key8p, v-on:68b1.t, v-on:c-an,e …
? ???
? ???
? 6top, p5event, capt85e, once, …
? key8p ????
? ???: ???
? ??: ente5, tab, e6c, delete, 6pace, 8p, do:n, left, 5.,-t, ct5l, alt, 6-.ft, 1eta
? ??: ct5l65
18

??? ?
'9
.=Bv B=/":pp">
.: hI>f/"#" v-on:click.prevent="help">??Y./:>
.foIE>
.=Bv>
.D:;>D foI/"F:E>">??./D:;>D>
.BFput typ>/"t>xt" B=/"F:E>" v-Eo=>D/"F:E>"
v-on:keyup.enter="goTo('birthyear')" />
./=Bv>
.=Bv>
.D:;>D foI/";BIthy>:I">?T./D:;>D>
.BFput typ>/"t>xt" B=/";BIthy>:I"
v-Eo=>D/";BIthy>:I"
v-on:keyup.enter="goNext"
=:t:-F>xt/"I>g"/>
./=Bv>
./foIE>
.BFput B=/"I>g" typ>/";uttoF"
v-on:click="reg" v:Du>/"V?" />
./=Bv>
v:I thBs9>:I / F>N D:t>(".g>t4uDD9>:I("-
v:I :pp / F>N 8u>({
>D, #:pp #
=:t:, { … }#
E>tho=s, {
h>Dp, fuF<tBoF(" { … }#
goTo, fuF<tBoF(id" {
=o<uE>Ft.g>tED>E>Ft1yI=(B=".fo<us("-
}#
go6>xt, fuF<tBoF(event" {
v:I F>xtI= / >v>Ft.t:Ig>t.=:t:s>t.F>xt-
v:I >D> / =o<uE>Ft.g>tED>E>Ft1yI=(F>xtI="-
Bf (>D>" >D>.fo<us("-
}#
I>g, fuF<tBoF(" {
:D>It("V?""-
}
}
}"
https,//jsfB==D>.F>t/E:=vBIus/;f<)(ph8/

20
htt.0://v2ej0.o/g/v2/g2ide/in0tance.html
??:?
??????

??+?
? UI ?? ??
? ??? + ?
? ??
? ?? ?? ??
? ?? à ??: ??
? ?? à ??: ?2?
? ?? ?? UI ?? ?? ???
? :: 1?, ?-I, ?,?
21

???? ?
22
(>empl/>e i2)"user-info-template">
(2iv cl/==)"c/<2">
(2iv cl/==)"c/<2-b:2y">
(2iv>
(=p/n cl/==)"b/2ge b/2ge-p<im/<y">?H(/=p/n>
(=p/n>{{ info./22<e== }}(/=p/n>
(/2iv>
(2iv>
(=p/n cl/==)"b/2ge b/2ge-p<im/<y">H,(/=p/n>
(=p/n>{{ info.hp }}(/=p/n>
(/2iv>
(2iv>
(=p/n cl/==)"b/2ge b/2ge-p<im/<y">??(/=p/n>
(=p/n>{{ info.c:n></c> }}(/=p/n>
(/2iv>
(2iv>
(=p/n cl/==)"b/2ge b/2ge-p<im/<y">??(/=p/n>
(=p/n>{{ info.unp/y }}(/=p/n>
(/2iv>
(/2iv>
(/2iv>
(/>empl/>e>
Vue.component 'user-info'" {
template' '#user-info-template'"
props' -'info'.
})

???? ?N
'(
<d;v ;d,"3pp" c<3ss,"co>t3;>er"-
<user-info v-bind:info="infoData"></user-info>
<3ct;v;ty-<;st v-b;>d)3ct;v;t;es,"3ct;v;t;es"-</3ct;v;ty-<;st-
<3ct;v;ty-for= v-o>)3dded,"3dd/ew"-</3ct;v;ty-for=-
</d;v-
v3r 3pp , >ew VDe({
e<) "#3pp"#
d3t3) {
infoData) {}#
activities) [2
}#
cre3ted) fD>ct;o>(" {
t:;s.<o3d(";
}#
=et:ods) {
<o3d) fD>ct;o>(" {
3x;os.get(/so=ed3t3/"
.t:e>((respo>se" ,- {
t:;s.;>fo.3t3 , respo>se.d3t3.;>fo;
t:;s.3ct;v;t;es , respo>se.d3t3.3ct;v;t;es;
}".c3tc:((error" ,- {
co>so<e.<og(error";
}";
}#
…
}
}";
VDe.co=po>e>t( user-info # {
te=p<3te) #Dser-;>fo-te=p<3te #
props) [ info 2
}"

?V?? ??? ??
()
4ue.7ompoAeAt( a7t=v=ty-:oDm # {
template, #a7t=v=ty-:oDm-template #
data, :uA7t=oA(" {
DetuDA {
type, ""# Desult, ""# N
}-
}#
met<ods, {
De;, :uA7t=oA(" {
vaD Aew17t / {
"date", :oDmat2ate(Aew 2ate(""#
"Desult", t<=s.Desult#
"type", t<=s.type}-
this.$emit("added", newAct)-
}
}
}"
.d=v =d/"app" 7lass/"7oAta=AeD">
.d=v v-s<ow/"loaded">
.useD-=A:o v-6=Ad,=A:o/"=A:o">./useD-=A:o>
.a7t=v=ty-l=st ,a7t=v=t=es/"a7t=v=t=es">./a7t=v=ty-l=st>
.a7t=v=ty-:oDm v-on:added="addNew">./a7t=v=ty-:oDm>
./d=v>
./d=v>
vaD app / Aew 4ue({
el, "#app"#
...
met<ods, {
addNew, :uA7t=oA(Aew17t" {
t<=s.a7t=v=t=es.pus<(Aew17t"-
}#
...
}
}"-
<ttps,//>s:=ddle.Aet/madv=Dus/(D;'zs76/

???? ??
? ?? ??? ?5?? ?25 ???? ????? ??
25
?? ? ??????
?? ? ???
?? ? ??

vu,-2out,2? ??? )PA
? )PA()in- P+-, App)
? U(I( ????A ?)? ??6? ??
? ??I? ??, ?? ?? ??
26

vu7-rout7r ?? ??
')
-d:v :d."3pp" c<3ss."co>t3:>7r"/
-d:v/
<router-link to="/contracts">??</router-link>
<router-link to="/help">???</router-link>
-/d:v/
<router-view></router-view>
-/d:v/
-t7=p<3t7 :d."co>tr3cts-t7=p<3t7"/
-d:v/
-h(/??-/h(/
…
-/d:v/
-/t7=p<3t7/
-t7=p<3t7 :d."h7<p-t7=p<3t7"/
-d:v/
-h(/???-/h(/
-/d:v/
-/t7=p<3t7/
v3r contractsComp . {
t7=p<3t7: #co>tr3cts-t7=p<3t7#
d3t3: 8u>ct:o>(" {
r7tur> {
co>tr3cts: [2
},
}#
cr73t7d: 8u>ct:o>(" {
…
}
},
v3r helpComp . {
t7=p<3t7: #h7<p-t7=p<3t7
},
v3r rout7r . new VueRouter({
routes: [
{
path: "/contracts",
name: "contracts",
component: contractsComp
},
{
path: "/help",
name: "help",
component: helpComp
}
]
}),
v3r v= . >7w Vu7({
7<: "#3pp"#
router: router
}",
https://;s8:dd<7.>7t/=3dv:rus/hp8(r;db/

?V ??? ??
(8
;ttCs://=s:<88le.net/ma8v<rus/xno=a'uC/
-temClate <8."contracts-temClate"/
-8<v/
-;)/R?-/;)/
-table class."table"/
…
-tbo8y/
-tr v-:or."cont <n contracts"/
-t8/
-router-l<n>
:to."'/contracts/' + cont.num"/
{{ cont.num }}
-/router-l<n>/
-/t8/
-t8/{{ cont.a88ress }}-/t8/
-t8/{{ cont.name }}-/t8/
-/tr/
-/tbo8y/
-/table/
-/8<v/
-/temClate/
var router . new 2ueRouter({
routes: 3
…
{
path: "/contracts/:num",
name: "8eta<l"#
comConent: 8eta<l0omC
}#
…
]
}",
var vm . new 2ue({
el: "#aCC"#
router: router
}",
var 8eta<l0omC . {
temClate: #8eta<l-temClate#
8ata: :unct<on(" {
return {
<n:o: {}
},
}#
create8: :unct<on(" {
var num . this.$route.params.num,
t;<s.loa8(num",
}#
met;o8s: {
loa8: :unct<on(num" {
...
}
}
},

?? ?? ?? ??
21
v:r <=t:il7omp 5 {
t=mpl:t=2 '#<=t:il-t=mpl:t='$
<:t:2 >un;tion"# {
r=turn {
in>o2 {}
}3
}$
;r=:t=<2 >un;tion"# {
v:r num 5 this. rout=.p:r:ms.num3
this.lo:<"num#3
}$
beforeRouteUpdate2 >un;tion"to$ >rom$ n=xt# {
this.lo:<"to.params.num#3
n=xt"#3
}$
4t=mpl:t= i<5"<=t:il-t=mpl:t="6
4<iv6
4h36??2
4strong6{{ in>o.num }}4'strong6
4'h36
4<iv6
{{ in>o.:<<r=ss }}
4'<iv6
4<iv6
4rout=r-linC to5"/contracts/13579"6
8?[ )3-/19
4'rout=r-linC6
4rout=r-linC to5"/contracts/24680"6
8?? 2,.0(9
4'rout=r-linC6
4'<iv6
4'<iv6
4't=mpl:t=6
https2''js>i<<l=.n=t'm:<virus'xnoj:(up'

l]s [d
? ??? l]s ??# cf
? ??/ne ??? g? m? ?a h?L rf
? o?u ?it? pj# ?t? ?it? ?V? ?m
('
https://;s7:ddle.net/=3dv:ADs/v/D/'7)v/
v3A eventBus , new 0De(";
0De.co=ponent(3ct:v:ty-7oA=# {
te=pl3te: #3ct:v:ty-7oA=-te=pl3te#
d3t3: 7Dnct:on(" {
AetDAn { type: ""# AesDlt: ""# …};
}#
=ethods: {
Aeg: 7Dnct:on(" {
v3A new-ct , {
"d3te": 7oA=3t.3te(new .3te(""#
"AesDlt": th:s.AesDlt# "type": th:s.type
};
eventBus.$emit(
'activityAdded',
newAct);
}
}
}";
0De.co=ponent(3ct:v:ty-l:st# {
te=pl3te: #3ct:v:ty-l:st-te=pl3te#
d3t3: 7Dnct:on(" {
AetDAn { 3ct:v:t:es: [] };
}#
cAe3ted: 7Dnct:on(" {
eventBus.$on(
'activityAdded',
this.activityAdded);
th:s.lo3d(";
}#
=ethods: {
3ct:v:ty-dded: 7Dnct:on(new-ct" { … }#
lo3d: 7Dnct:on(" { ... }
}
}";

fc2 ? e?d a?
+)
Vue.filter( Ls>rno , fLn<tion(v:lL>" { '' ??? fc
r>tLrn v:lL>.sL;string((, -" # "-" # v:lL>.sL;string(-"3
}"
v:r :pp 5 n>w 9L>({
>l2 #:pp ,
=:t:2 {
no2 ")2+,-./01(",
n:m>2 "???",
<o=>2 "7"
},
filt>rs2 { '' ?b fc
gr:=>2 fLn<tion(v:lL>" {
if (v:lL> 55 7 " r>tLrn ?h? 3
r>tLrn ?h? 3
}
}
}"3
4=iv i=5":pp"6
4A+6h?4'A+6
?g2 {{ no | userno }} 4;r'6
?V2 {{ n:m> }}4;r'6
??2 {{ <o=> | grade }}
4'=iv6
Attps2''jsfi==l>.n>t'm:=virLs'o8:w:n:+'

?c? lh ?r
? ]e ?io ?X
? mn ?io j?'pd
32
SAO ANN 1 Lew =ue"V
eJ. ! ANN!,
CAtA. V
NeOsoL. V
LAme. !i[!
},
Bities. [
VLAme. !?g!, BoCe. !;E:!},
VLAme. !?a!, BoCe. !4<;3N!},
VLAme. !?l!, BoCe. !JEJ<!}
]
},
methoCs. V
uNCAte). EuLBtioL"# V '' ?f >
this.cities[0] = VLAme. !?g(!, BoCe. !;E:<L(!}/
},
uNCAte2. EuLBtioL"# V '' ?f :
this.cities[0].code = !;E:<L!!/
},
uNCAte3. EuLBtioL"# V '' ?f :
Vue.set"this.Bities, (, VLAme. !?g!, BoCe. !;E:<L!}#/
}
}
}#
0h32VV NeOsoL.LAme }} 0'h32
VV NeOsoL.address.code1 }}
0!--
5ALLot OeAC NOoNeOtU !BoCe)! oE uLCeEiLeC
--2
0uJ2
0Ji S-EoO1"B iL Bities"2VVB.LAme}}-VVB.BoCe}} 0'Ji2
0'uJ2
httNs.''jsEiCCJe.Let'mACSiOus'g-LNLN3,'

Lz ?s
? wat/h : c? ?H vn
? ??ra : dP?ja ?J
? https://jsfiddl1:1t//hrisAfritz/sLrhk".//
? ?k ?k w??? : ??? + J+ + C++
? w??? ?h ??
? Au1C : og "?? + L? + ?H"
? w??? ? ?j?/j?? ?? ?? xT p?? ?mS ?b
? lu HTTP ??je? fi
? ACios vt: https://3ithu./om/aCios/aCios
33

??? ?
? 4???? ?? ?? ??
? ??? ?? ??
? ?? ?????? ????? ??
? ???? ??? ? ??
? ?? 3? ??? ??? ?
? ???? ?? ??
34

狠狠撸

?? ? ???? ?? ?? Vue.js ??

Recommended

More Related Content

What's hot (20)

Similar to ?? ? ???? ?? ?? Vue.js ?? (20)

More from beom kyun choi (20)

?? ? ???? ?? ?? Vue.js ??