<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/62572d5fbd8c6f2306b97c46/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/62572d5fbd8c6f2306b97c46/bg1.jpg"></div><div class="pi" data-data='{"ctm":[1.568627,0.000000,0.000000,1.568627,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/62572d5fbd8c6f2306b97c46/bg2.jpg"><div class="c x1 y1 w2 h2"><div class="t m0 x1 h3 y2 ff1 fs0 fc0 sc0 ls0 ws0">V<span class="_ _0"></span>ue.js:UpandRunning</div><div class="t m0 x2 h4 y3 ff2 fs1 fc1 sc0 ls0 ws0">BuildingAccessibleandPerformantW<span class="_ _1"></span>ebApps</div><div class="t m0 x3 h5 y4 ff3 fs1 fc0 sc0 ls0 ws0">CallumMacrae</div></div></div><div class="pi" data-data='{"ctm":[1.568627,0.000000,0.000000,1.568627,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/62572d5fbd8c6f2306b97c46/bg3.jpg"><div class="c x1 y1 w2 h2"><div class="t m0 x0 h6 y5 ff1 fs2 fc0 sc0 ls0 ws0">V<span class="_ _2"></span>ue.js:UpandRunning</div><div class="t m0 x0 h7 y6 ff2 fs2 fc0 sc0 ls0 ws0">byCallumMacrae</div><div class="t m0 x0 h7 y2 ff2 fs2 fc0 sc0 ls0 ws0">Copyright©2018CallumMacrae.Allrightsreserved.</div><div class="t m0 x0 h7 y7 ff2 fs2 fc0 sc0 ls0 ws0">PrintedintheUnitedStatesofAmerica.</div><div class="t m0 x0 h7 y8 ff2 fs2 fc0 sc0 ls0 ws0">PublishedbyO’ReillyMedia,Inc.,1005GravensteinHighwayNorth,</div><div class="t m0 x0 h7 y9 ff2 fs2 fc0 sc0 ls0 ws0">Sebastopol,CA<span class="_ _0"></span>95472.</div><div class="t m0 x0 h7 ya ff2 fs2 fc0 sc0 ls0 ws0">O’Reillybooksmaybepurchasedforeducational,business,orsalespromotional</div><div class="t m0 x0 h7 yb ff2 fs2 fc0 sc0 ls0 ws0">use.Onlineeditionsarealsoavailableformosttitles(<span class="fc2">http://orei<span class="_ _3"></span>lly<span class="_ _0"></span>.com/safari<span class="fc0">).</span></span></div><div class="t m0 x0 h7 yc ff2 fs2 fc0 sc0 ls0 ws0">Formoreinformation,contactourcorporate/institutionalsalesdepartm<span class="_ _3"></span>ent:800-</div><div class="t m0 x0 h7 yd ff2 fs2 fc0 sc0 ls0 ws0">998-9938or<span class="fc2">corporate@oreilly<span class="_ _0"></span>.com<span class="fc0">.</span></span></div><div class="t m0 x4 h7 ye ff2 fs2 fc0 sc0 ls0 ws0">Editors:AllysonMacDonaldandV<span class="_ _0"></span>irginiaW<span class="_ _2"></span>ilson</div><div class="t m0 x4 h7 yf ff2 fs2 fc0 sc0 ls0 ws0">ProductionEditor:JustinBilling</div><div class="t m0 x4 h7 y10 ff2 fs2 fc0 sc0 ls0 ws0">Copyeditor:SharonW<span class="_ _2"></span>ilkey</div><div class="t m0 x4 h7 y11 ff2 fs2 fc0 sc0 ls0 ws0">Proofreader:JasmineKwityn</div><div class="t m0 x4 h7 y12 ff2 fs2 fc0 sc0 ls0 ws0">Indexer:EllenT<span class="_ _2"></span>routman-Zaig</div><div class="t m0 x4 h7 y13 ff2 fs2 fc0 sc0 ls0 ws0">InteriorDesigner:DavidFutato</div><div class="t m0 x4 h7 y14 ff2 fs2 fc0 sc0 ls0 ws0">CoverDesigner:KarenMontgomery</div><div class="t m0 x4 h7 y15 ff2 fs2 fc0 sc0 ls0 ws0">Illustrator:RebeccaDemarest</div><div class="t m0 x5 h7 y16 ff2 fs2 fc0 sc0 ls0 ws0">March2018:FirstEdition</div><div class="t m0 x0 h6 y17 ff1 fs2 fc0 sc0 ls0 ws0">RevisionHistoryfortheFirstEdi<span class="_ _3"></span>tion</div><div class="t m0 x5 h7 y18 ff2 fs2 fc0 sc0 ls0 ws0">2018-02-23:FirstRelease</div><div class="t m0 x0 h7 y19 ff2 fs2 fc0 sc0 ls0 ws0">See<span class="fc2">http://oreilly<span class="_ _0"></span>.com/catalog/errata.csp?isbn=9781491997246<span class="fc0">forrelease</span></span></div><div class="t m0 x0 h7 y1a ff2 fs2 fc0 sc0 ls0 ws0">details.</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.568627,0.000000,0.000000,1.568627,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/62572d5fbd8c6f2306b97c46/bg4.jpg"><div class="c x1 y1 w2 h2"><div class="t m0 x0 h7 y5 ff2 fs2 fc0 sc0 ls0 ws0">TheO’ReillylogoisaregisteredtrademarkofO’ReillyMedia,Inc.<span class="ff4">V<span class="_ _0"></span>ue.js:Up</span></div><div class="t m0 x0 h7 y1b ff4 fs2 fc0 sc0 ls0 ws0">andRunning<span class="ff2">,thecoverimage,andrelatedtradedressaretrademarksofO’Reilly</span></div><div class="t m0 x0 h7 y1c ff2 fs2 fc0 sc0 ls0 ws0">Media,Inc.</div><div class="t m0 x0 h7 y1d ff2 fs2 fc0 sc0 ls0 ws0">Whilethepublisherandtheauthorhaveusedgoodfaithef<span class="_ _2"></span>fortstoensurethatthe</div><div class="t m0 x0 h7 y1e ff2 fs2 fc0 sc0 ls0 ws0">informationandinstructionscontainedinthisworkareaccurate,thepublisher</div><div class="t m0 x0 h7 y1f ff2 fs2 fc0 sc0 ls0 ws0">andtheauthordisclaimallresponsibilityforerrorsoromissions,including</div><div class="t m0 x0 h7 y20 ff2 fs2 fc0 sc0 ls0 ws0">withoutlimitationresponsibilityfordamagesresultingfromtheuseofor</div><div class="t m0 x0 h7 y21 ff2 fs2 fc0 sc0 ls0 ws0">relianceonthiswork.Useoftheinformationandinstructionscontainedinthis</div><div class="t m0 x0 h7 y22 ff2 fs2 fc0 sc0 ls0 ws0">workisatyourownrisk.Ifanycodesamplesorothertechnologythiswork</div><div class="t m0 x0 h7 y23 ff2 fs2 fc0 sc0 ls0 ws0">containsordescribesissubjecttoopensourcelicensesortheintellectual</div><div class="t m0 x0 h7 y24 ff2 fs2 fc0 sc0 ls0 ws0">propertyrightsofothers,itisyourresponsibilitytoensurethatyourusethereof</div><div class="t m0 x0 h7 y25 ff2 fs2 fc0 sc0 ls0 ws0">complieswithsuchlicensesand/orrights.</div><div class="t m0 x0 h7 y26 ff2 fs2 fc0 sc0 ls0 ws0">978-1-491-99724-6</div><div class="t m0 x0 h7 y27 ff2 fs2 fc0 sc0 ls0 ws0">[LSI]</div></div></div><div class="pi" data-data='{"ctm":[1.568627,0.000000,0.000000,1.568627,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/62572d5fbd8c6f2306b97c46/bg5.jpg"><div class="c x1 y1 w2 h2"><div class="t m0 x0 h3 y28 ff1 fs0 fc0 sc0 ls0 ws0">Preface</div><div class="t m0 x0 h7 y29 ff2 fs2 fc0 sc0 ls0 ws0">Frontenddevelopmentischanging.W<span class="_ _0"></span>ebsitesarebecomingrichera<span class="_ _3"></span>ndmore</div><div class="t m0 x0 h7 y2a ff2 fs2 fc0 sc0 ls0 ws0">interactive,requiringusasfrontenddeveloperstoaddincreasinglycomplicated</div><div class="t m0 x0 h7 y2b ff2 fs2 fc0 sc0 ls0 ws0">functionalityandusemorepowerfultools.It’<span class="_ _0"></span>seasyenoughtoupdateabitof</div><div class="t m0 x0 h7 y2c ff2 fs2 fc0 sc0 ls0 ws0">textonapagebyusingjQuery<span class="_ _0"></span>,butasweneedtodomore—updatinglar<span class="_ _3"></span>ge,</div><div class="t m0 x0 h7 y2d ff2 fs2 fc0 sc0 ls0 ws0">interactivesectionsofapage;handlingcomplicatedstate;performingcl<span class="_ _3"></span>ient-side</div><div class="t m0 x0 h7 y2e ff2 fs2 fc0 sc0 ls0 ws0">routing;andsimplywritingandor<span class="_ _2"></span>ganizingalotmorecode—usingaJavaScript</div><div class="t m0 x0 h7 y2f ff2 fs2 fc0 sc0 ls0 ws0">frameworkmakesourjobsaloteasier<span class="_ _0"></span>.</div><div class="t m0 x0 h7 y30 ff2 fs2 fc0 sc0 ls0 ws0">A<span class="_ _4"></span><span class="ff4">framework</span>isaJavaScripttoolthatmakesiteasierfordeveloperstocreate</div><div class="t m0 x0 h7 ye ff2 fs2 fc0 sc0 ls0 ws0">rich,interactivewebsites.Frameworkscontainfunctionalitythatenable<span class="_ _3"></span>usto</div><div class="t m0 x0 h7 y31 ff2 fs2 fc0 sc0 ls0 ws0">makeafullyfunctionalwebapplication:manipulatingcomplicate<span class="_ _3"></span>ddataand</div><div class="t m0 x0 h7 y32 ff2 fs2 fc0 sc0 ls0 ws0">displayingitonthepage,handlingroutingclient-sideinsteadofhavingtorely</div><div class="t m0 x0 h7 y33 ff2 fs2 fc0 sc0 ls0 ws0">onaserver<span class="_ _4"></span>,andsometimesevenallowingustocreateafullwebsitethatneedsto</div><div class="t m0 x0 h7 y34 ff2 fs2 fc0 sc0 ls0 ws0">hittheserveronlyoncefortheinitialdownload.<span class="ff4">V<span class="_ _0"></span>ue.js<span class="ff2">isthelatestpopular</span></span></div><div class="t m0 x0 h7 y35 ff2 fs2 fc0 sc0 ls0 ws0">JavaScriptframeworkandisrapidlyincreasinginpopularity<span class="_ _0"></span>.EvanY<span class="_ _5"></span>ou,then</div><div class="t m0 x0 h7 y36 ff2 fs2 fc0 sc0 ls0 ws0">workingatGoogle,wroteandreleasedthefirstversionofV<span class="_ _0"></span>ue.jsinearly2014.</div><div class="t m0 x0 h7 y37 ff2 fs2 fc0 sc0 ls0 ws0">Atthetimeofwriting,ithasover75,000starsonGitHub,makingittheeighth</div><div class="t m0 x0 h7 y38 ff2 fs2 fc0 sc0 ls0 ws0">moststarredrepositoryonGitHub,andthatnumberisgrowingrapidly<span class="_ _0"></span>.<span class="_ _6"> </span>V<span class="_ _0"></span>uehas</div><div class="t m0 x0 h7 y39 ff2 fs2 fc0 sc0 ls0 ws0">hundredsofcollaboratorsandisdownloadedfromnpmabout40,000times</div><div class="t m0 x0 h7 y3a ff2 fs2 fc0 sc0 ls0 ws0">everyday<span class="_ _0"></span>.Itcontainsfeaturesthatareusefulwhendevelopingwebsitesand</div><div class="t m0 x0 h7 y3b ff2 fs2 fc0 sc0 ls0 ws0">applications:apowerfultemplatingsyntaxtowritetotheDOMandlistent<span class="_ _3"></span>o</div><div class="t m0 x0 h7 y3c ff2 fs2 fc0 sc0 ls0 ws0">events,reactivitysothatyoudon’<span class="_ _2"></span>tneedtoupdatethetemplateafteryourdata</div><div class="t m0 x0 h7 y3d ff2 fs2 fc0 sc0 ls0 ws0">changes,andfunctionalitythatmakesiteasierforyoutomanipulateyourdata.</div><div class="t m0 x6 h8 y3e ff2 fs3 fc2 sc0 ls0 ws0">1</div></div><a class="l" rel='nofollow' onclick='return false;'><div class="d m1"></div></a></div><div class="pi" data-data='{"ctm":[1.568627,0.000000,0.000000,1.568627,0.000000,0.000000]}'></div></div>
