fullstack.vue.zip_vue.js_vuejs_其他书籍下载-pudn.com

<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/622bc0933d2fbb00079a6174/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/622bc0933d2fbb00079a6174/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/622bc0933d2fbb00079a6174/bg2.jpg"><div class="c x1 y1 w2 h2"><div class="t m0 x2 h3 y2 ff1 fs0 fc0 sc0 ls0 ws0">Fullstack Vue </div><div class="t m0 x2 h4 y3 ff2 fs1 fc0 sc0 ls0 ws0">The Complete Guide to Vue.js and Friends </div><div class="t m0 x2 h5 y4 ff3 fs2 fc0 sc0 ls0 ws0">Wri!en by Hassan Djirdeh, Nate Murray, and Ari Lerner </div><div class="t m0 x2 h6 y5 ff3 fs3 fc0 sc0 ls0 ws0">© 2018 Fullstack.io </div><div class="t m0 x2 h6 y6 ff3 fs3 fc0 sc0 ls0 ws0">All rights reserved. No portion of the book manuscript may be reproduced, stored in a retrieval </div><div class="t m0 x2 h6 y7 ff3 fs3 fc0 sc0 ls0 ws0">system, or transmi!ed in any form or by any means beyond the number of purchased copies, </div><div class="t m0 x2 h6 y8 ff3 fs3 fc0 sc0 ls0 ws0">except for a single backup or archival copy. "e code may be used freely in your projects, </div><div class="t m0 x2 h6 y9 ff3 fs3 fc0 sc0 ls0 ws0">commercial or otherwise. </div><div class="t m0 x2 h6 ya ff4 fs3 fc0 sc0 ls0 ws0">"e authors and publisher have taken care in preparation of this book, but make no expressed </div><div class="t m0 x2 h6 yb ff3 fs3 fc0 sc0 ls0 ws0">or implied warranty of any kind and assume no responsibility for errors or omissions. No </div><div class="t m0 x2 h6 yc ff3 fs3 fc0 sc0 ls0 ws0">liability is assumed for incidental or consequential damagers in connection with or arising out </div><div class="t m0 x2 h6 yd ff3 fs3 fc0 sc0 ls0 ws0">of the use of the information or programs container herein. </div><div class="t m0 x2 h6 ye ff3 fs3 fc0 sc0 ls0 ws0">Published in San Francisco, California by Fullstack.io. </div></div><div class="c x3 yf w3 h7"><div class="t m1 x4 h8 y10 ff5 fs4 fc1 sc0 ls0 ws0">FULLSTACK</div><div class="t m1 x5 h9 y11 ff6 fs5 fc1 sc0 ls0 ws0">.io</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/622bc0933d2fbb00079a6174/bg3.jpg"><div class="t m2 x6 ha y12 ff7 fs6 fc0 sc0 ls0 ws0">Contents</div><div class="t m2 x7 hb y13 ff8 fs7 fc0 sc0 ls0 ws0">Book Revision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1</div><div class="t m2 x7 hb y14 ff8 fs7 fc0 sc0 ls0 ws0">Bug Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1</div><div class="t m2 x7 hb y15 ff8 fs7 fc0 sc0 ls0 ws0">Be notified of updates via Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1</div><div class="t m2 x7 hb y16 ff8 fs7 fc0 sc0 ls0 ws0">We’d love to hear from you! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1</div><div class="t m2 x6 hc y17 ff9 fs7 fc0 sc0 ls0 ws0">Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2</div><div class="t m2 x6 hc y18 ff9 fs7 fc0 sc0 ls0 ws0">How to Get the Most Out of This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1</div><div class="t m2 x7 hb y19 ff8 fs7 fc0 sc0 ls0 ws0">Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1</div><div class="t m2 x7 hb y1a ff8 fs7 fc0 sc0 ls0 ws0">Vue 2.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2</div><div class="t m2 x7 hb y1b ff8 fs7 fc0 sc0 ls0 ws0">Running Code Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2</div><div class="t m2 x7 hb y1c ff8 fs7 fc0 sc0 ls0 ws0">Code Blocks and Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3</div><div class="t m2 x7 hb y1d ff8 fs7 fc0 sc0 ls0 ws0">Instruction for Windows users . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4</div><div class="t m2 x7 hb y1e ff8 fs7 fc0 sc0 ls0 ws0">Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4</div><div class="t m2 x7 hb y1f ff8 fs7 fc0 sc0 ls0 ws0">Emailing Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5</div><div class="t m2 x7 hb y20 ff8 fs7 fc0 sc0 ls0 ws0">Get excited! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5</div><div class="t m2 x6 hc y21 ff9 fs7 fc0 sc0 ls0 ws0">I - Your first Vue.js Web Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6</div><div class="t m2 x7 hb y22 ff8 fs7 fc0 sc0 ls0 ws0">Building UpVote! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6</div><div class="t m2 x7 hb y23 ff8 fs7 fc0 sc0 ls0 ws0">Development environment setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7</div><div class="t m2 x7 hb y24 ff8 fs7 fc0 sc0 ls0 ws0">JavaScript ES6/ES7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8</div><div class="t m2 x7 hb y25 ff8 fs7 fc0 sc0 ls0 ws0">Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8</div><div class="t m2 x7 hb y26 ff8 fs7 fc0 sc0 ls0 ws0">Setting up the view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13</div><div class="t m2 x7 hb y27 ff8 fs7 fc0 sc0 ls0 ws0">Making the view data-driven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15</div><div class="t m2 x7 hb y28 ff8 fs7 fc0 sc0 ls0 ws0">List rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18</div><div class="t m2 x7 hb y29 ff8 fs7 fc0 sc0 ls0 ws0">Sorting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22</div><div class="t m2 x7 hb y2a ff8 fs7 fc0 sc0 ls0 ws0">Event handling (our app’s first interaction) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23</div><div class="t m2 x7 hb y2b ff8 fs7 fc0 sc0 ls0 ws0">Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27</div><div class="t m2 x7 hb y2c ffa fs8 fc0 sc0 ls0 ws0">v-bind and v-on shorthand syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35</div><div class="t m2 x7 hb y2d ff8 fs7 fc0 sc0 ls0 ws0">Congratulations! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36</div><div class="t m2 x6 hc y2e ff9 fs7 fc0 sc0 ls0 ws0">II - Single-file components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37</div><div class="t m2 x7 hb y2f ff8 fs7 fc0 sc0 ls0 ws0">Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37</div><div class="t m2 x7 hb y30 ff8 fs7 fc0 sc0 ls0 ws0">Setting up our development environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38</div><div class="t m2 x7 hb y31 ff8 fs7 fc0 sc0 ls0 ws0">Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39</div><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></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/622bc0933d2fbb00079a6174/bg4.jpg"><div class="t m2 x6 hd y32 ff8 fs9 fc0 sc0 ls0 ws0">CONTENTS</div><div class="t m2 x7 hb y33 ff8 fs7 fc0 sc0 ls0 ws0">Single-File Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46</div><div class="t m2 x7 hb y34 ff8 fs7 fc0 sc0 ls0 ws0">Breaking the app into components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48</div><div class="t m2 x7 hb y35 ff8 fs7 fc0 sc0 ls0 ws0">Managing data between components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53</div><div class="t m2 x7 hb y36 ff8 fs7 fc0 sc0 ls0 ws0">Simple State Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54</div><div class="t m2 x7 hb y37 ff8 fs7 fc0 sc0 ls0 ws0">Steps to building Vue apps from scratch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57</div><div class="t m2 x7 hb y38 ff8 fs7 fc0 sc0 ls0 ws0">Step 1: A static version of the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58</div><div class="t m2 x7 hb y39 ff8 fs7 fc0 sc0 ls0 ws0">Step 2: Breaking the app into components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60</div><div class="t m2 x7 hb y3a ff8 fs7 fc0 sc0 ls0 ws0">Step 3: Hardcode Initial States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64</div><div class="t m2 x7 hb y3b ff8 fs7 fc0 sc0 ls0 ws0">Step 4: Create state mutations (and corresponding component actions) . . . . . . . . . . . . 75</div><div class="t m2 x7 hb y3c ff8 fs7 fc0 sc0 ls0 ws0">The Calendar App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100</div><div class="t m2 x7 hb y3d ff8 fs7 fc0 sc0 ls0 ws0">Methodology review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101</div><div class="t m2 x6 hc y3e ff9 fs7 fc0 sc0 ls0 ws0">III - Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102</div><div class="t m2 x7 hb y3f ff8 fs7 fc0 sc0 ls0 ws0">Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102</div><div class="t m2 x7 hb y40 ff8 fs7 fc0 sc0 ls0 ws0">JavaScript Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102</div><div class="t m2 x7 hb y41 ff8 fs7 fc0 sc0 ls0 ws0">Vue Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103</div><div class="t m2 x7 hb y42 ff8 fs7 fc0 sc0 ls0 ws0">Event Bus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115</div><div class="t m2 x7 hb y43 ff8 fs7 fc0 sc0 ls0 ws0">Custom events and managing data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123</div><div class="t m2 x7 hb y44 ff8 fs7 fc0 sc0 ls0 ws0">Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124</div><div class="t m2 x6 hc y45 ff9 fs7 fc0 sc0 ls0 ws0">IV - Introduction to Vuex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125</div><div class="t m2 x7 hb y46 ff8 fs7 fc0 sc0 ls0 ws0">Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125</div><div class="t m2 x7 hb y47 ff8 fs7 fc0 sc0 ls0 ws0">What is Flux? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125</div><div class="t m2 x7 hb y48 ff8 fs7 fc0 sc0 ls0 ws0">Flux implementations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126</div><div class="t m2 x7 hb y49 ff8 fs7 fc0 sc0 ls0 ws0">Vuex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126</div><div class="t m2 x7 hb y4a ff8 fs7 fc0 sc0 ls0 ws0">Refactoring the note-taking app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127</div><div class="t m2 x7 hb y4b ff8 fs7 fc0 sc0 ls0 ws0">Vuex Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130</div><div class="t m2 x7 hb y4c ff8 fs7 fc0 sc0 ls0 ws0">Building the components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136</div><div class="t m2 x6 hc y4d ff9 fs7 fc0 sc0 ls0 ws0">V - Vuex and Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144</div><div class="t m2 x7 hb y4e ff8 fs7 fc0 sc0 ls0 ws0">Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144</div><div class="t m2 x7 hb y4f ff8 fs7 fc0 sc0 ls0 ws0">Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144</div><div class="t m2 x7 hb y50 ff8 fs7 fc0 sc0 ls0 ws0">The Server API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150</div><div class="t m2 x7 hb y51 ff8 fs7 fc0 sc0 ls0 ws0">Playing with the API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152</div><div class="t m2 x7 hb y52 ff8 fs7 fc0 sc0 ls0 ws0">Client and server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157</div><div class="t m2 x7 hb y53 ff8 fs7 fc0 sc0 ls0 ws0">Preparing the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159</div><div class="t m2 x7 hb y54 ff8 fs7 fc0 sc0 ls0 ws0">The Vuex Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167</div><div class="t m2 x7 hb y55 ffa fs8 fc0 sc0 ls0 ws0">productModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173</div><div class="t m2 x7 hb y56 ffa fs8 fc0 sc0 ls0 ws0">cartModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183</div><div class="t m2 x7 hb y57 ff8 fs7 fc0 sc0 ls0 ws0">Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193</div><div class="t m2 x7 hb y58 ff8 fs7 fc0 sc0 ls0 ws0">Vuex and medium to large scale applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201</div><div class="t m2 x7 hb y59 ff8 fs7 fc0 sc0 ls0 ws0">Recap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206</div><div class="t m2 x6 hc y5a ff9 fs7 fc0 sc0 ls0 ws0">VI - Form Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207</div><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></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="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/622bc0933d2fbb00079a6174/bg5.jpg"><div class="t m2 x6 hd y32 ff8 fs9 fc0 sc0 ls0 ws0">CONTENTS</div><div class="t m2 x7 hb y33 ff8 fs7 fc0 sc0 ls0 ws0">Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207</div><div class="t m2 x7 hb y34 ff8 fs7 fc0 sc0 ls0 ws0">Forms 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207</div><div class="t m2 x7 hb y35 ff8 fs7 fc0 sc0 ls0 ws0">Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207</div><div class="t m2 x7 hb y36 ff8 fs7 fc0 sc0 ls0 ws0">The Basic Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209</div><div class="t m2 x7 hb y37 ff8 fs7 fc0 sc0 ls0 ws0">Text Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214</div><div class="t m2 x7 hb y38 ff8 fs7 fc0 sc0 ls0 ws0">Multiple Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222</div><div class="t m2 x7 hb y39 ff8 fs7 fc0 sc0 ls0 ws0">Validations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225</div><div class="t m2 x7 hb y3a ff8 fs7 fc0 sc0 ls0 ws0">Async Persistence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237</div><div class="t m2 x7 hb y3b ff8 fs7 fc0 sc0 ls0 ws0">Vuex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244</div><div class="t m2 x7 hb y3c ff8 fs7 fc0 sc0 ls0 ws0">Form Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257</div><div class="t m2 x6 hc y5b ff9 fs7 fc0 sc0 ls0 ws0">VII - Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259</div><div class="t m2 x7 hb y3e ff8 fs7 fc0 sc0 ls0 ws0">What is routing? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259</div><div class="t m2 x7 hb y3f ff8 fs7 fc0 sc0 ls0 ws0">URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259</div><div class="t m2 x7 hb y40 ff8 fs7 fc0 sc0 ls0 ws0">Single-page applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261</div><div class="t m2 x7 hb y41 ff8 fs7 fc0 sc0 ls0 ws0">Basic Vue Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263</div><div class="t m2 x7 hb y42 ff8 fs7 fc0 sc0 ls0 ws0">Dynamic Route Matching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286</div><div class="t m2 x7 hb y43 ff8 fs7 fc0 sc0 ls0 ws0">The Server API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290</div><div class="t m2 x7 hb y44 ff8 fs7 fc0 sc0 ls0 ws0">Starting point of the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293</div><div class="t m2 x7 hb y5c ff8 fs7 fc0 sc0 ls0 ws0">Integrating vue-router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296</div><div class="t m2 x7 hb y5d ff8 fs7 fc0 sc0 ls0 ws0">Supporting authenticated routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324</div><div class="t m2 x7 hb y5e ff8 fs7 fc0 sc0 ls0 ws0">Implementing login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329</div><div class="t m2 x7 hb y5f ff8 fs7 fc0 sc0 ls0 ws0">Vue Watchers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336</div><div class="t m2 x7 hb y60 ff8 fs7 fc0 sc0 ls0 ws0">Navigation Guards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343</div><div class="t m2 x7 hb y61 ff8 fs7 fc0 sc0 ls0 ws0">Recap and further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349</div><div class="t m2 x6 hc y4b ff9 fs7 fc0 sc0 ls0 ws0">VIII - Unit Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350</div><div class="t m2 x7 hb y4c ff8 fs7 fc0 sc0 ls0 ws0">End-to-end vs. Unit Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350</div><div class="t m2 x7 hb y62 ff8 fs7 fc0 sc0 ls0 ws0">Testing tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351</div><div class="t m2 x7 hb y63 ff8 fs7 fc0 sc0 ls0 ws0">Testing a basic Vue component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353</div><div class="t m2 x7 hb y64 ff8 fs7 fc0 sc0 ls0 ws0">Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353</div><div class="t m2 x7 hb y65 ff8 fs7 fc0 sc0 ls0 ws0">Testing App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359</div><div class="t m2 x7 hb y66 ffa fs8 fc0 sc0 ls0 ws0">vue-test-utils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365</div><div class="t m2 x7 hb y67 ff8 fs7 fc0 sc0 ls0 ws0">More assertions for App.vue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369</div><div class="t m2 x7 hb y68 ff8 fs7 fc0 sc0 ls0 ws0">Writing tests for a weather app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384</div><div class="t m2 x7 hb y69 ff8 fs7 fc0 sc0 ls0 ws0">Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424</div><div class="t m2 x7 hb y6a ff8 fs7 fc0 sc0 ls0 ws0">Further reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428</div><div class="t m2 x6 hc y56 ff9 fs7 fc0 sc0 ls0 ws0">IX - Fullstack Vue Screencast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430</div><div class="t m2 x7 hb y57 ff8 fs7 fc0 sc0 ls0 ws0">Building SimpleCoinCap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430</div><div class="t m2 x7 hb y58 ff8 fs7 fc0 sc0 ls0 ws0">Agenda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431</div><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a><a class="l" rel='nofollow' onclick='return false;'><div class="d m3"></div></a></div><div class="pi" data-data='{"ctm":[1.568627,0.000000,0.000000,1.568627,0.000000,0.000000]}'></div></div>