<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="generator" content="pdf2htmlEX">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://static.pudn.com/base/css/base.min.css">
<link rel="stylesheet" href="https://static.pudn.com/base/css/fancy.min.css">
<link rel="stylesheet" href="https://static.pudn.com/prod/directory_preview_static/622bc0933d2fbb00079a6176/raw.css">
<script src="https://static.pudn.com/base/js/compatibility.min.js"></script>
<script src="https://static.pudn.com/base/js/pdf2htmlEX.min.js"></script>
<script>
try{
pdf2htmlEX.defaultViewer = new pdf2htmlEX.Viewer({});
}catch(e){}
</script>
<title></title>
</head>
<body>
<div id="sidebar" style="display: none">
<div id="outline">
</div>
</div>
<div id="pf1" class="pf w0 h0" data-page-no="1"><div class="pc pc1 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/622bc0933d2fbb00079a6176/bg1.jpg"></div><div class="pi" data-data='{"ctm":[1.611850,0.000000,0.000000,1.611850,0.000000,0.000000]}'></div></div>
</body>
</html>
<div id="pf2" class="pf w0 h0" data-page-no="2"><div class="pc pc2 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/622bc0933d2fbb00079a6176/bg2.jpg"><div class="c x1 y1 w2 h2"><div class="t m0 x2 h3 y2 ff1 fs0 fc0 sc0 ls0 ws0">TableofContents</div><div class="t m0 x3 h4 y3 ff2 fs1 fc1 sc0 ls0 ws0">Introduction</div><div class="t m0 x3 h4 y4 ff2 fs1 fc0 sc0 ls0 ws0">IntrotoVue</div><div class="t m0 x4 h4 y5 ff2 fs1 fc1 sc0 ls0 ws0">IntroductiontoVue</div><div class="t m0 x4 h4 y6 ff2 fs1 fc1 sc0 ls0 ws0">VueFirstApp</div><div class="t m0 x3 h4 y7 ff2 fs1 fc0 sc0 ls0 ws0">Tooling</div><div class="t m0 x4 h4 y8 ff2 fs1 fc1 sc0 ls0 ws0">TheVueCLI</div><div class="t m0 x4 h4 y9 ff2 fs1 fc1 sc0 ls0 ws0">DevTools</div><div class="t m0 x4 h4 ya ff2 fs1 fc1 sc0 ls0 ws0">ConfiguringVSCodeforVueDevelopme<span class="_ _0"></span>nt</div><div class="t m0 x3 h4 yb ff2 fs1 fc0 sc0 ls0 ws0">Components</div><div class="t m0 x4 h4 yc ff2 fs1 fc1 sc0 ls0 ws0">Components</div><div class="t m0 x4 h4 yd ff2 fs1 fc1 sc0 ls0 ws0">SingleFileComponents</div><div class="t m0 x4 h4 ye ff2 fs1 fc1 sc0 ls0 ws0">Templates</div><div class="t m0 x4 h4 yf ff2 fs1 fc1 sc0 ls0 ws0">StylingcomponentsusingCSS</div><div class="t m0 x3 h4 y10 ff2 fs1 fc0 sc0 ls0 ws0">Componentsbuildingblocks</div><div class="t m0 x4 h4 y11 ff2 fs1 fc1 sc0 ls0 ws0">Directives</div><div class="t m0 x4 h4 y12 ff2 fs1 fc1 sc0 ls0 ws0">Events</div><div class="t m0 x4 h4 y13 ff2 fs1 fc1 sc0 ls0 ws0">Methods</div><div class="t m0 x4 h4 y14 ff2 fs1 fc1 sc0 ls0 ws0">Watchers</div><div class="t m0 x4 h4 y15 ff2 fs1 fc1 sc0 ls0 ws0">ComputedProperties</div><div class="t m0 x4 h4 y16 ff2 fs1 fc1 sc0 ls0 ws0">MethodsvsWatchersvsComputedProper<span class="_ _0"></span>ties</div><div class="t m0 x4 h4 y17 ff2 fs1 fc1 sc0 ls0 ws0">Props</div><div class="t m0 x4 h4 y18 ff2 fs1 fc1 sc0 ls0 ws0">Slots</div><div class="t m0 x4 h4 y19 ff2 fs1 fc1 sc0 ls0 ws0">Filters</div><div class="t m0 x3 h4 y1a ff2 fs1 fc0 sc0 ls0 ws0">Communication,statemanagementa<span class="_ _0"></span>ndrouting</div><div class="t m0 x4 h4 y1b ff2 fs1 fc1 sc0 ls0 ws0">Communicationamongcomponents</div><div class="t m0 x4 h4 y1c ff2 fs1 fc1 sc0 ls0 ws0">Vuex</div><div class="t m0 x4 h4 y1d ff2 fs1 fc1 sc0 ls0 ws0">VueRouter</div></div><div class="c x1 y1e w2 h5"><div class="t m0 x5 h4 y1f ff2 fs1 fc2 sc0 ls0 ws0">2</div></div><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a></div><div class="pi" data-data='{"ctm":[1.611850,0.000000,0.000000,1.611850,0.000000,0.000000]}'></div></div>
<div id="pf3" class="pf w0 h0" data-page-no="3"><div class="pc pc3 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/622bc0933d2fbb00079a6176/bg3.jpg"><div class="c x1 y1e w2 h5"><div class="t m0 x5 h4 y1f ff2 fs1 fc2 sc0 ls0 ws0">3</div></div></div><div class="pi" data-data='{"ctm":[1.611850,0.000000,0.000000,1.611850,0.000000,0.000000]}'></div></div>
<div id="pf4" class="pf w0 h0" data-page-no="4"><div class="pc pc4 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/622bc0933d2fbb00079a6176/bg4.jpg"><div class="c x1 y20 w2 h6"><div class="t m0 x0 h3 y21 ff1 fs0 fc0 sc0 ls0 ws0">Introduction</div></div><div class="c x1 y22 w2 h7"><div class="t m0 x0 h4 y16 ff2 fs1 fc0 sc0 ls0 ws0">Thankyouforgettingthisebook!</div><div class="t m0 x0 h4 y23 ff2 fs1 fc0 sc0 ls0 ws0">MynameisFlavioandIrunablog<span class="_ _0"></span>at<span class="fc1">flaviocopes.com</span>,whereIwriteat<span class="_ _0"></span>utorialeveryday.</div><div class="t m0 x0 h4 y24 ff2 fs1 fc0 sc0 ls0 ws0">YoucanfindmeonTwitterat<span class="fc1">@fla<span class="_ _0"></span>viocopes</span></div><div class="t m0 x0 h4 y25 ff2 fs1 fc0 sc0 ls0 ws0">AttheendofJuly2018,Iwilllau<span class="_ _0"></span>nchanonlinecourseonVue.jswithpr<span class="_ _0"></span>acticaltutorialsand</div><div class="t m0 x0 h4 y26 ff2 fs1 fc0 sc0 ls0 ws0">directmentorshipfromme.</div><div class="t m0 x0 h4 y27 ff2 fs1 fc0 sc0 ls0 ws0">Findoutmoreat<span class="fc1">vuecourse.com</span>!</div><div class="t m0 x0 h4 y28 ff2 fs1 fc0 sc0 ls0 ws0">Happylearning!</div></div><div class="c x1 y29 w2 h5"><div class="t m0 x0 h4 y2a ff2 fs1 fc2 sc0 ls0 ws0">Introduction</div></div><div class="c x1 y1e w2 h5"><div class="t m0 x5 h4 y1f ff2 fs1 fc2 sc0 ls0 ws0">4</div></div><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a></div><div class="pi" data-data='{"ctm":[1.611850,0.000000,0.000000,1.611850,0.000000,0.000000]}'></div></div>
<div id="pf5" class="pf w0 h0" data-page-no="5"><div class="pc pc5 w0 h0"><img class="bi x0 y0 w1 h1" alt="" src="https://static.pudn.com/prod/directory_preview_static/622bc0933d2fbb00079a6176/bg5.jpg"><div class="c x1 y20 w2 h6"><div class="t m0 x0 h3 y21 ff1 fs0 fc0 sc0 ls0 ws0">IntroductiontoVue</div><div class="t m0 x0 h8 y2b ff1 fs2 fc0 sc0 ls0 ws0">Vueisaveryimpressiveproject.It'saverypopularJavaScriptframework,</div><div class="t m0 x0 h8 y2c ff1 fs2 fc0 sc0 ls0 ws0">onethat'sexperiencingahugegrowth.Itissimple,tin<span class="_ _0"></span>yandveryperformant.</div><div class="t m0 x0 h8 y2d ff1 fs2 fc0 sc0 ls0 ws0">Learnmoreaboutit</div></div><div class="c x1 y20 w2 h9"><div class="t m0 x3 h4 y2e ff2 fs1 fc1 sc0 ls0 ws0">First,whatisaJavaScriptfrontend<span class="_ _0"></span>framework?</div><div class="t m0 x3 h4 y2f ff2 fs1 fc1 sc0 ls0 ws0">ThepopularityofVue</div><div class="t m0 x3 h4 y30 ff2 fs1 fc1 sc0 ls0 ws0">WhydevelopersloveVue</div><div class="t m0 x3 h4 y31 ff2 fs1 fc1 sc0 ls0 ws0">WheredoesVue.jspositionitselfint<span class="_ _0"></span>heframeworkslandscape</div><div class="t m0 x3 h4 y32 ff2 fs1 fc1 sc0 ls0 ws0">Vue.jsisanindieproject</div><div class="t m0 x0 h4 y8 ff2 fs1 fc0 sc0 ls0 ws0">VueisaverypopularJavaScriptfront<span class="_ _0"></span>endframework,onethat'sexperiencin<span class="_ _0"></span>gahugegrowth.</div><div class="t m0 x0 h4 y33 ff2 fs1 fc0 sc0 ls0 ws0">Itissimple,tiny(~24KB)andverype<span class="_ _0"></span>rformant.Itfeelsdifferentfr<span class="_ _0"></span>omalltheotherJavaScript</div><div class="t m0 x0 h4 y34 ff2 fs1 fc0 sc0 ls0 ws0">frontendframeworksandviewlibrarie<span class="_ _0"></span>s.Let'sfindoutwhy.</div><div class="t m0 x0 ha y35 ff1 fs3 fc0 sc0 ls0 ws0">First,whatisaJavaScriptfrontendframework?</div><div class="t m0 x0 h4 y36 ff2 fs1 fc0 sc0 ls0 ws0">Ifyou'reunsurewhataJavaScriptf<span class="_ _0"></span>rameworkis,Vueistheperfectfirst<span class="_ _0"></span>encounterwithone.</div><div class="t m0 x0 h4 y37 ff2 fs1 fc0 sc0 ls0 ws0">AJavaScriptframeworkhelpsustocreat<span class="_ _0"></span>emodernapplications.ModernJavaScr<span class="_ _0"></span>ipt</div><div class="t m0 x0 h4 y38 ff2 fs1 fc0 sc0 ls0 ws0">applicationsaremostlyusedontheWe<span class="_ _0"></span>b,butalsopoweralotofDesktop<span class="_ _0"></span>andMobile</div><div class="t m0 x0 h4 y39 ff2 fs1 fc0 sc0 ls0 ws0">applications.</div><div class="t m0 x0 h4 y3a ff2 fs1 fc0 sc0 ls0 ws0">Untiltheearly2000s,browsersdidn't<span class="_ _0"></span>havethecapabilitiestheyhavenow.<span class="_ _0"></span>Theywerealot</div><div class="t m0 x0 h4 y3b ff2 fs1 fc0 sc0 ls0 ws0">lesspowerful,andbuildingcomplexapp<span class="_ _0"></span>licationsinsidethemwasnotfeasiblep<span class="_ _0"></span>erformance-</div><div class="t m0 x0 h4 y3c ff2 fs1 fc0 sc0 ls0 ws0">wise,andthetoolingwasnoteven<span class="_ _0"></span>somethingthatpeoplethoughtab<span class="_ _0"></span>out.</div><div class="t m0 x0 h4 y3d ff2 fs1 fc0 sc0 ls0 ws0">EverythingchangedwhenGoogleunveile<span class="_ _0"></span>dGoogleMapsandGMail,twoappli<span class="_ _0"></span>cationsthatran</div><div class="t m0 x0 h4 y3e ff2 fs1 fc0 sc0 ls0 ws0">insidethebrowser.Ajaxmadeasynchron<span class="_ _0"></span>ousnetworkrequestspossible,andove<span class="_ _0"></span>rtime</div><div class="t m0 x0 h4 y3f ff2 fs1 fc0 sc0 ls0 ws0">developersstartedbuildingontop<span class="_ _0"></span>oftheWebplatform,whileenginee<span class="_ _0"></span>rsworkedonthe</div><div class="t m0 x0 h4 y40 ff2 fs1 fc0 sc0 ls0 ws0">platformitself:browsers,theWeb<span class="_ _0"></span>standards,thebrowserAPIs,andth<span class="_ _0"></span>eJavaScriptlanguage.</div><div class="t m0 x0 h4 y41 ff2 fs1 fc0 sc0 ls0 ws0">LibrarieslikejQueryandMootoolswere<span class="_ _0"></span>thefirstbigprojectsthatbuilt<span class="_ _0"></span>uponJavaScriptand</div><div class="t m0 x0 h4 y42 ff2 fs1 fc0 sc0 ls0 ws0">werehugelypopularforawhile.Th<span class="_ _0"></span>eybasicallyprovidedanicerAPItointe<span class="_ _0"></span>ractwiththe</div><div class="t m0 x0 h4 y43 ff2 fs1 fc0 sc0 ls0 ws0">browserandprovidedworkaroundsfor<span class="_ _0"></span>bugsandinconsistenciesamongtheva<span class="_ _0"></span>riousbrowsers.</div><div class="t m0 x0 h4 y44 ff2 fs1 fc0 sc0 ls0 ws0">FrameworkslikeBackbone,Ember,Knockout<span class="_ _0"></span>,AngularJSwerethefirstwaveofm<span class="_ _0"></span>odern</div><div class="t m0 x0 h4 y45 ff2 fs1 fc0 sc0 ls0 ws0">JavaScriptframeworks.Thesecondwave,<span class="_ _0"></span>whichisthecurrentone,hasReact,<span class="_ _0"></span>Angular,and</div><div class="t m0 x0 h4 y46 ff2 fs1 fc0 sc0 ls0 ws0">Vueasitsmainactors.</div></div><div class="c x1 y29 w2 h5"><div class="t m0 x0 h4 y2a ff2 fs1 fc2 sc0 ls0 ws0">IntroductiontoVue</div></div><div class="c x1 y1e w2 h5"><div class="t m0 x5 h4 y1f ff2 fs1 fc2 sc0 ls0 ws0">5</div></div><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a></div><div class="pi" data-data='{"ctm":[1.611850,0.000000,0.000000,1.611850,0.000000,0.000000]}'></div></div>