The Majesty Of Vue.js PDF,文字版-非扫描版。ContentsIntroductionAbout Vue.jsVueis overviewWhat people say about vue jsComparison with Otheer frameworksAngularReactEmberPolymerRiotWeelcomeXabout the bookXWho is this book forGet in touchHomenkErrataConⅴ entions翻·Vueis Fundamentals11. Install Vue. js1.1 Standalone version21.1.1 Download from vuejs org1.1.2 Include from CDn1.2 Download using NPm·鲁番21.3 Download using Bower2. Getting Started42.1 Hello World42.2 Two-way Binding2.3 Comparison with jQuery.72.4 HomeworkCONTENTS3. A Flayor of directives103.1 v-show3.2-if133.2. 1 Template v-if143.3V-else·.153.4 v-if vs. v-show183.5 Homework19生. List Rendering..204. 1 Install Use Bootstrap4.2 v-for234.2.1 Range v-for4.3 Array Rendering4.3.1 Loop Through an array254.3.2 Loop Through an Array of objects274 Object v-for304.5 Filtered results324.6 Ordered Results384.7 Custom Filter424.8 Homework455. Interactivity465.1 Event Handling465.1.1 Handling Events Inline465.1.2 Handling Events using Methods485.1.3 Shorthand for v-on5.2 Event modifiers505.3 Key modifiers545.4 Computed Properties545.4.1 USing Computed Properties to Filter an Array5.5 Homework626. Components61 What are Components,··636.2 USing Components636.3 Templates.....,,.....6.4 Properties6.5 Reusability6.6 Altogether now726.7 Homework817. Class and Style bindings837.1 Class binding7.1.1 Object Syntax83CONTENTS7.1.2 Array Syntax7.2 Style binding887.2.1 Object Syntax887.2.2 Array Syntax7.3 Bindings in Action907. 4 Homework92Consuming an aPi,,,,,,,,,938. Preface948.1 CRUD948.2 API948.2.1 Download book's code翻翻958.2.2 API Endpoints969. Working with real data9.1 Get Data Asynchronous989.2 Refactoring,101Update data1049.4 Delete data10610. Integrating vue-resource,,10910.1 Overview,.,,,,,,,,,,,,,10910.2 Migrating..11010.3 Enhancing Functionality11110.3, 1 Edit stori11110.3.2 Create New stories11410.3.3 Store Update Uni12010.4 JavaScript File10.5 Source Code12210.6 Homework12710.6.1 Prefa12710.6.2 API Endpoints12710.6, 3 Your Code128IntroductionAbout Vue. jsVueis OverviewVue. js(pronounced /vju: like view)is a library for building interactive web interfaces. The goal ofVue. js is to provide the benefits of reactive data binding and composable view components withan api that is as simple as possibleVue js itself is not a full-blown framework- it is focused on the view layer only. It is therefore veryeasy to pick up and to integrate with other libraries or existing projects. On the other hand, whenused in combination with proper tooling and supporting libraries, Vue. js is also perfectly capable ofpowering sophisticated Single-Page ApplicationsIf you are an experienced frontend developer and want to know how Vue. js compares to otherlibraries/frameworks, check out the Comparison with Other Frameworks chapterIf you are interested to learn more information about vue. js core take a look at Vue. js official guidelWhat people say about vue.jsVue js is what made me love JavaScript. It's extremely easy and enjoyable to use. It has a greatecosystem o plugins and tools that extend its basic services. You can quickly include it in any project,small or big, write a few lines of code and you are set. Vue. js is fast, lightweight and is the future ofFront end development!Alex kyriakidisWhen i started picking up Javascript i got excited learning a ton of possibilities, but when my friendsuggested to learn vue. js and I followed his advice, things went wild. While reading and watchingtutorials I kept thinking all the stuff I've done so far and how much easier I could have done them ifI had invest time to learn vue earlier My opinion is that if you want to do your work fast, nice andeasy Vue is the ys framework you needKostas maniatishttp://vuejs.org/guide/overview.htmlout vueJSMark my words: Vue. js will sky-rocket in popularity in 2016. It's that goodJeffrey WayVue is what I always wanted in a javaScript framework. It's a framework that scales with you as adeveloper. You can sprinkle it onto one page, or build an advanced single page application with Vuexand vue router. It's truly the most polished javaScript framework I've ever seenTaylor OtwellVue. js is the first framework I've found that feels just as natural to use in a server-rendered app asit does in a full-blown SPA. Whether I just need a small widget on a single page or Im building acomplex Javascript client, it never feels like not enough or like overkillAdam wathanVue. js has been able to make a framework that is both simple to use and easy to understand. It'sa breath of fresh air in a world where others are fighting to see who can make the most complexframework.”Eric barnesThe reason i like vue js is because I m a hybrid designer/developer. Ive looked at React, Angularand a few others but the learning curve and terminology has always put me off. Vue. js is the firstgs framework I understand. ALso, not only is it easy to pick up for the less confidence Sers, such asis pretty unprecedented in gS world and it's that reason I started London vue js Meetup s e s. Thismyself, but I've noticed experienced Angular and React developers take note, and liking, VueJack barhamAbout Vue. jsIVComparison with other frameworksAngularThere are a few reasons to use vue over Angular, although they might not apply for everyoneVue. js is much simpler than Angular, both in terms of APi and design. You can learn almosteverything about it really fast and get productiveVue. js is a more flexible, less opinionated solution. That allows you to structure your app theway you want it to be, instead of being forced to do everything the Angular way. It's onlyan interface layer so you can use it as a light feature in pages instead of a full blown SPA.Itgives you bigger room to mix and match with other libraries, but you are also responsible formaking more architectural decisions. For example, Vue. js core doesnt come with routing orajax functionalities by default, and usually assumes you are building the application using anexternal module bundler. This is probably the nost important distinctionAngular uses two-way binding between scopes. While Vue also supports explicit two-waybindings, it defaults to a one-way, parent-to-child data flow between components. Using one-way binding makes the flow of data easier to reason about in large appsVue. js has a clearer separation between directives and components. Directives are meant toencapsulate dom manipulations only, while Components stand for a self-contained unit thathas its own view and data logic. In Angular there's a lot of confusion between the twoVuehas better performance and is much, much easier to optimize because it doesn t usedirty checking. Angular gets slow when there are a lot of watchers, because every timeanything in the scope changes, all these watchers need to be re-evaluated again. Also, thedigest cycle may have to run multiple times to " stabilize if some watcher triggers anotherupdate. Angular users often have to resort to esoteric techniques to get around the digestcycle, and in some situations there's simply no way to optimize a scope with a large amountof watchers. Vue. js doesnt suffer from this at all because it uses a transparent dependency-tracking observing system with async queueing-all changes trigger independently unlessthey have explicit dependency relationships. The only optimization hint you'll ever need isthe track-by paaram on v-for listsInterestingly, there are quite some similarities in how Angular 2 and Vue are addressing theseAngular 1 issuesAbout Vue. jsReactReact and Vue. js do share a similarity in that they both provide reactive composable viewcomponents. There are, of course, many differences as wellFirst, the internal implementation is fundamentally different. React's rendering leverages the virtualDOM- an in-memory representation of what the actual dom should look like. When the statechanges, React does a full re-render of the Virtual DOM, diffs it, and then patches the real dOmThe virtual-DOM approach provides a functional way to describe your view at any point of time,which is really nice. Because it doesnt use observables and re-renders the entire app on every update,the view is by definition guaranteed to be in sync with the data. It also opens up possibilities toisomorphic JavaScript applicationsInstead of a Virtual DOM, Vue. js uses the actual DOM as the template and keeps references toactual nodes for data bindings. This limits Vue. js to environments where DOM is present. However,contrary to the common misconception that Virtual- DOM makes react faster than anything else,Vue. js actually out-performs React when it comes to hot updates, and requires almost no handtuned optimization. With React, you need to implement shou l dComponentUpdate everywhere oruse immutable data structures to achieve fully optimized re-rendersAPI-wise, one issue with React (or JSX)is that the render function often involves a lot of logic, andends up looking more like a piece of program (which in fact it is) rather than a visual representationof the interface. For some developers this is a bonus, but for designer/developer hybrids like me,having a template makes it much easier to think visually about the design and css. JSx mixed withJavaScript logic breaks that visual model i need to map the code to the design. In contrast, Vue jspays the cost of a lightweight data-binding dsl so that we have a visually scannable template andwith logic encapsulated into directives and filtersAnother issue with React is that because DOM updates are completely delegated to the Virtual DOM,it's a bit tricky when you actually want to control the dOM yourself (although theoretically youcan, you'd be essentially working against the library when you do that). For applicaLions that needsad-hoc custom dom manipulations, especially animations with complex timing requirements, thiscan become a pretty annoying restriction On this front, Vue. js allows for more flexibility and thereare multiple FWA/ Awwwards winning sites built with Vue. jsSome additional notesThe React team has very ambitious goals in making react a platform-agnostic ui developmentparadigm, while Vue is focused on providing a pragmatic solution for the webReact, due to its functional nature, plays very well with functional programming patternsis much easier to pick up and get productive with in this regard Lepers and beginners.VueHowever it also introduces a higher learning barrier for junior dehttpsi/github.com/vuejs/vue/wiki/projects-using-vuejs#interactive-experiences