Pro Vue.js 2 Год издания: 2018 Автор: Adam Freeman Издательство: Apress ISBN: ISBN-10: 1484238044 ISBN-13: 978-1484238042 Язык: Английский Формат: PDF Качество: Издательский макет или текст (eBook) Интерактивное оглавление: Да Количество страниц: 719 Описание: Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of the Model-View-Controller (MVC) pattern on the client, creating a strong foundation for complex and rich web apps.
Примеры страниц
Оглавление
About the Author ....................................................................................................xxi About the Technical Reviewer ..............................................................................xxiii ■■Part I: Getting Started with Vue.js ...................................................... 1 ■■Chapter 1: Your First Vue.js Application ................................................................ 3 Preparing the Development Environment ......................................................................... 3 Installing Node.js ....................................................................................................................................3 Installing the @vue/cli Package .............................................................................................................4 Installing Git ............................................................................................................................................5 Installing an Editor ..................................................................................................................................5 Installing a Browser ................................................................................................................................6 Creating the Project .......................................................................................................... 6 Understanding the Project Structure ......................................................................................................6 Starting the Development Tools ..............................................................................................................8 Replacing the Placeholder Content .................................................................................. 9 Adding a CSS Framework .....................................................................................................................11 Styling the HTML Elements ...................................................................................................................12 Adding Dynamic Content ................................................................................................ 13 Displaying the List of Tasks ..................................................................................................................14 Adding a Checkbox ...............................................................................................................................16 Filtering Completed Tasks ....................................................................................................................19 Creating New Tasks ..............................................................................................................................21 Storing Data Persistently ......................................................................................................................23 Adding the Finishing Touches ...............................................................................................................25 Summary ........................................................................................................................ 28 ■■Chapter 2: Understanding Vue.js ......................................................................... 29 Should I Use Vue.js? ....................................................................................................... 29 Understanding Round-Trip Applications ...............................................................................................30 Understanding Single-Page Applications .............................................................................................30 Understanding Application Complexity .................................................................................................31 What Do I Need to Know? ............................................................................................... 32 How Do I Set Up My Development Environment? ........................................................... 32 What Is the Structure of This Book? ............................................................................... 32 Part 1: Getting Started with Vue.js ........................................................................................................32 Part 2: Working with Vue.js ...................................................................................................................32 Part 3: Advanced Vue.js Features ..........................................................................................................33 Are There Lots of Examples? .......................................................................................... 33 Where Can You Get the Example Code? ......................................................................... 35 Where Can You Get Corrections for This Book? .............................................................. 35 How Can You Contact Me? ............................................................................................. 35 Summary ........................................................................................................................ 36 ■■Chapter 3: HTML and CSS Primer ........................................................................ 37 Preparing for This Chapter ............................................................................................. 37 Understanding HTML Elements ...................................................................................... 40 Understanding Element Content ...........................................................................................................41 Understanding Attributes ......................................................................................................................42 Examining the Live HTML Document .............................................................................. 44 Understanding Bootstrap ................................................................................................ 45 Applying Basic Bootstrap Classes ........................................................................................................46 Using Bootstrap to Create Grids ...........................................................................................................47 Using Bootstrap to Style Tables ............................................................................................................48 Using Bootstrap to Style Forms ............................................................................................................50 Summary ........................................................................................................................ 51 ■■Chapter 4: Essential JavaScript Primer ............................................................... 53 Preparing for This Chapter ............................................................................................. 54 Using Statements ........................................................................................................... 56 Defining and Using Functions ........................................................................................ 57 Defining Functions with Parameters .................................................................................................... 58 Defining Functions That Return Results ...............................................................................................60 Using Functions as Arguments to Other Functions ............................................................................... 61 Using Variables and Types .............................................................................................. 62 Using the Primitive Types .....................................................................................................................64 Using JavaScript Operators ............................................................................................ 66 Using Conditional Statements ..............................................................................................................67 The Equality Operator vs. the Identity Operator .................................................................................... 68 Explicitly Converting Types ...................................................................................................................69 Working with Arrays ....................................................................................................... 71 Using an Array Literal ...........................................................................................................................71 Reading and Modifying the Contents of an Array ................................................................................. 71 Enumerating the Contents of an Array .................................................................................................. 72 Using the Spread Operator ...................................................................................................................73 Using the Built-in Array Methods ..........................................................................................................74 Working with Objects ..................................................................................................... 75 Using Object Literals .............................................................................................................................76 Using Functions as Methods ................................................................................................................ 77 Copying Properties from One Object to Another ................................................................................... 78 Understanding JavaScript Modules ................................................................................ 78 Creating and Using a Simple JavaScript Module ..................................................................................79 Defining Multiple Features in a Module ................................................................................................81 Combining Multiple Files in a Module ..................................................................................................83 Understanding JavaScript Promises .............................................................................. 84 Understanding the Asynchronous Operation Problem .......................................................................... 84 Using a JavaScript Promise ..................................................................................................................85 Simplifying the Asynchronous Code .....................................................................................................86 Summary ........................................................................................................................ 87 ■■Chapter 5: SportsStore: A Real Application ......................................................... 89 Creating the SportsStore Project .................................................................................... 89 Adding Additional Packages .................................................................................................................90 Preparing the RESTful Web Service ......................................................................................................92 Starting the Project Tools ......................................................................................................................95 Creating the Data Store .................................................................................................. 96 Creating the Product Store ............................................................................................. 98 Creating the Product List ....................................................................................................................100 Adding the Product List to the Application ......................................................................................... 101 Filtering the Price Data .......................................................................................................................103 Adding Product Pagination .................................................................................................................104 Adding Category Selection .................................................................................................................112 Using the RESTful Web Service .................................................................................... 115 Summary ...................................................................................................................... 118 ■■Chapter 6: SportsStore: Checkout and Orders ................................................... 119 Preparing for This Chapter ........................................................................................... 119 Creating the Shopping Cart Placeholder ...................................................................... 120 Configuring URL Routing .............................................................................................. 121 Displaying a Routed Component .........................................................................................................122 Implementing the Cart Features ................................................................................... 123 Adding a Module to the Data Store .....................................................................................................123 Adding the Product Selection Feature ................................................................................................125 Displaying the Cart Contents ..............................................................................................................127 Creating a Global Filter .......................................................................................................................131 Testing the Basic Cart Features ..........................................................................................................132 Making the Cart Persistent .................................................................................................................132 Adding the Cart Summary Widget ......................................................................................................136 Adding the Checkout and Orders Features ................................................................... 138 Creating and Registering the Checkout Components ......................................................................... 139 Adding Form Validation .......................................................................................................................143 Adding the Remaining Fields and Validation ......................................................................................147 Summary ...................................................................................................................... 150 ■■Chapter 7: SportsStore: Scaling and Administration ......................................... 151 Preparing for This Chapter ........................................................................................... 151 Dealing with Larger Amounts of Data ........................................................................... 153 Improving Page Navigation .................................................................................................................153 Reducing the Amount of Data Requested by the Application ............................................................. 155 Adding Search Support .......................................................................................................................161 Starting the Administration Features ........................................................................... 166 Implementing Authentication ..............................................................................................................166 Adding the Administration Component Structure ............................................................................... 173 Implementing the Order Administration Feature ................................................................................ 175 Summary ...................................................................................................................... 178 ■■Chapter 8: SportsStore: Administration and Deployment .................................. 179 Preparing for This Chapter ........................................................................................... 179 Adding the Product Administration Features ................................................................ 180 Presenting the Product List ................................................................................................................182 Adding the Editor Placeholder and URL Routes ..................................................................................183 Implementing the Editor Feature ........................................................................................................185 Deploying SportsStore .................................................................................................. 189 Preparing the Application for Deployment ..........................................................................................189 Building the Application for Deployment ............................................................................................194 Testing the Deployment-Ready Application ........................................................................................ 195 Deploying the Application ...................................................................................................................197 Summary ...................................................................................................................... 200 ■■Part II: Vue.js in Detail .................................................................... 201 ■■Chapter 9: Understanding Vue.js ....................................................................... 203 Preparing for This Chapter ........................................................................................... 203 Adding the Bootstrap CSS Framework ............................................................................................... 204 Running the Example Application .......................................................................................................205 Creating an Application Using the DOM API .................................................................. 205 Understanding How the DOM API Application Works .......................................................................... 207 Creating a Vue Object ................................................................................................... 208 Adding Data to the Vue Object ............................................................................................................210 Adding an Event Handler ....................................................................................................................211 Correcting the Message ..................................................................................................................... 212 Understanding the Vue Object Structure ............................................................................................214 Introducing a Component ............................................................................................. 214 Registering and Applying the Component ..........................................................................................216 Separating the Template from the JavaScript Code ........................................................................... 218 Summary ...................................................................................................................... 220 ■■Chapter 10: Understanding Vue.js Projects and Tools ....................................... 221 Creating a Vue.js Development Project ........................................................................ 222 Configuring the Linter .........................................................................................................................225 Completing the Project Configuration .................................................................................................226 Understanding the Project Structure ............................................................................ 227 Understanding the Source Code Folder ..............................................................................................228 Understanding the Packages Folder ...................................................................................................229 Using the Development Tools ....................................................................................... 233 Understanding the Compilation and Transformation Process ............................................................. 234 Understanding the Development HTTP Server ................................................................................... 236 Understanding Hot Model Replacement .............................................................................................237 Understanding the Error Display .........................................................................................................240 Using the Linter ............................................................................................................ 242 Customizing the Linter Rules ..............................................................................................................245 Debugging the Application ........................................................................................... 247 Exploring the Application State ...........................................................................................................247 Using the Browser Debugger ..............................................................................................................248 Configuring the Development Tools .............................................................................. 250 Building the Application for Deployment ...................................................................... 250 Installing and Using an HTTP Server ..................................................................................................253 Summary ...................................................................................................................... 254 ■■Chapter 11: Understanding Data Bindings ........................................................ 255 Preparing for This Chapter ........................................................................................... 256 Understanding the Elements of a Component .............................................................. 258 Understanding the Template Element ................................................................................................. 259 Understanding the Script Element ......................................................................................................259 Understanding the Style Element .......................................................................................................259 Resetting the Component in the Example Application ................................................. 260 Displaying a Data Value ................................................................................................ 261 Using More Complex Expressions in a Data Binding .......................................................................... 264 Calculating Values with Computed Properties .................................................................................... 267 Calculating Data Values with a Method ..............................................................................................270 Formatting Data Values with Filters ................................................................................................... 273 Summary ...................................................................................................................... 279 ■■Chapter 12: Using the Basic Directives ............................................................. 281 Preparing for This Chapter ........................................................................................... 282 Setting an Element’s Text Content ................................................................................ 284 Displaying Raw HTML .................................................................................................. 285 Selectively Displaying Elements ................................................................................... 287 Selectively Displaying Adjacent Peer Elements .................................................................................. 289 Choosing Between Sections of Content .............................................................................................. 291 Selectively Displaying Elements Using CSS ....................................................................................... 293 Setting an Element’s Attributes and Properties ............................................................ 296 Using an Object to Configure Classes .................................................................................................298 Setting Individual Styles .....................................................................................................................301 Setting Other Attributes ......................................................................................................................302 Setting Multiple Attributes ..................................................................................................................303 Setting an HTMLElement Property ......................................................................................................305 Summary ...................................................................................................................... 307 ■■Chapter 13: Using the Repeater Directive ......................................................... 309 Preparing for This Chapter ........................................................................................... 310 Enumerating an Array ................................................................................................... 311 Using the Alias ....................................................................................................................................314 Identifying the Key ..............................................................................................................................316 Getting the Item Index ........................................................................................................................319 Understanding Array Change Detection ..............................................................................................322 Enumerating Object Properties .................................................................................... 325 Understanding Object Property Ordering ............................................................................................327 Repeating HTML Elements Without a Data Source ....................................................... 329 Using Computed Properties with the v-for Directive .................................................... 330 Paging Data ........................................................................................................................................330 Filtering and Sorting Data ...................................................................................................................332 Summary ...................................................................................................................... 335 ■■Chapter 14: Handling Events ............................................................................. 337 Preparing for This Chapter ........................................................................................... 338 Handling Events ........................................................................................................... 339 Understanding Events and Event Objects .................................................................... 340 Using a Method to Handle Events ................................................................................ 342 Combining Events, Methods, and Repeated Elements ................................................. 345 Listening for Multiple Events from the Same Element ................................................. 346 Using Event Handling Modifiers ................................................................................... 350 Managing Event Propagation ..............................................................................................................350 Preventing Duplicate Events ...............................................................................................................357 Using Mouse Event Modifiers ....................................................................................... 358 Using Keyboard Event Modifiers .................................................................................. 359 Summary ...................................................................................................................... 362 ■■Chapter 15: Working with Form Elements ......................................................... 363 Preparing for This Chapter ........................................................................................... 364 Creating Two-Way Model Bindings ............................................................................... 366 Adding a Two-Way Binding .................................................................................................................367 Adding Another Input Element ............................................................................................................368 Simplifying Two-Way Bindings ...........................................................................................................370 Binding to Form Elements ............................................................................................ 372 Binding to Text Fields ..........................................................................................................................372 Binding to Radio Buttons and Checkboxes ......................................................................................... 373 Binding to Select Elements .................................................................................................................376 Using the v-model Modifiers ........................................................................................ 377 Formatting Values as Numbers .......................................................................................................... 377 Delaying Updates ................................................................................................................................379 Removing Whitespace Characters ......................................................................................................380 Binding to Different Data Types .................................................................................... 381 Selecting an Array of Items ................................................................................................................381 Using Custom Values for Form Elements ............................................................................................383 Validating Form Data .................................................................................................... 387 Defining the Validation Rules ..............................................................................................................389 Performing Validation .........................................................................................................................391 Responding to Live Changes ..............................................................................................................394 Summary ...................................................................................................................... 396 ■■Chapter 16: Using Components ......................................................................... 397 Preparing for This Chapter ........................................................................................... 398 Understanding Components as Building Blocks ........................................................... 399 Understanding Child Component Names and Elements ..................................................................... 402 Using Component Features in Child Components .............................................................................. 404 Understanding Component Isolation ............................................................................ 405 Using Component Props .....................................................................................................................407 Creating Custom Events .....................................................................................................................414 Using Component Slots ......................................................................................................................417 Summary ...................................................................................................................... 424 ■■Part III: Advanced Vue.js Features .................................................. 425 ■■Chapter 17: Understanding the Component Lifecycle ....................................... 427 Preparing for This Chapter ........................................................................................... 428 Understanding the Component Lifecycle ..................................................................... 431 Understanding the Creation Phase .....................................................................................................431 Understanding the Mounting Phase ...................................................................................................433 Understanding Update Phase .............................................................................................................436 Understanding the Destruction Phase ................................................................................................443 Handling Component Errors ......................................................................................... 446 Summary ...................................................................................................................... 449 ■■Chapter 18: Loosely Coupled Components ........................................................ 451 Preparing for This Chapter ........................................................................................... 452 Creating the Product Display Component ...........................................................................................454 Creating the Product Editor Component .............................................................................................455 Displaying the Child Components .......................................................................................................457 Understanding Dependency Injection ........................................................................... 459 Defining a Service ..............................................................................................................................459 Consuming a Service via Dependency Injection .................................................................................460 Overriding Antecedent Services .........................................................................................................461 Creating Reactive Services .................................................................................................................463 Using Advanced Dependency Injection Features ................................................................................ 466 Using an Event Bus ...................................................................................................... 469 Sending Events Using an Event Bus ...................................................................................................470 Receiving Events from the Event Bus .................................................................................................471 Creating Local Event Buses ................................................................................................................474 Summary ...................................................................................................................... 477 ■■Chapter 19: Using RESTful Web Services .......................................................... 479 Preparing for This Chapter ........................................................................................... 480 Preparing the HTTP Server .................................................................................................................480 Preparing the Example Application .....................................................................................................481 Running the Example Application and HTTP Server ........................................................................... 484 Understanding RESTful Web Services .......................................................................... 486 Consuming a RESTful Web Service .............................................................................. 488 Handling the Response Data ..............................................................................................................489 Making the HTTP Request ..................................................................................................................489 Receiving the Response .....................................................................................................................491 Processing the Data ...........................................................................................................................492 Creating an HTTP Service ............................................................................................. 494 Consuming the HTTP Service .............................................................................................................495 Adding Other HTTP Operations ...........................................................................................................496 Creating an Error Handling Service ....................................................................................................499 Summary ...................................................................................................................... 504 ■■Chapter 20: Using a Data Store ......................................................................... 505 Preparing for This Chapter ........................................................................................... 506 Creating and Using a Data Store .................................................................................. 509 Understanding Separate State and Mutations .................................................................................... 511 Providing Access to the Vuex Data Store ............................................................................................ 512 Using the Data Store ...........................................................................................................................513 Inspecting Data Store Changes ..........................................................................................................516 Defining Computed Properties in the Data Store ......................................................... 518 Using a Getter in a Component ...........................................................................................................520 Providing Arguments to Getters ..........................................................................................................521 Performing Asynchronous Operations .......................................................................... 522 Receiving Change Notifications .................................................................................... 525 Mapping Data Store Features into Components ........................................................... 530 Using Data Store Modules ............................................................................................ 533 Registering and Using a Data Store Module ....................................................................................... 534 Using Module Namespaces ................................................................................................................538 Summary ...................................................................................................................... 540 ■■Chapter 21: Dynamic Components .................................................................... 541 Preparing for This Chapter ........................................................................................... 542 Preparing Components for Dynamic Lifecycles ............................................................ 543 Getting the Application Data ...............................................................................................................543 Managing Watch Events .....................................................................................................................545 Displaying Components Dynamically ........................................................................... 546 Presenting Different Components in an HTML Element ...................................................................... 546 Selecting Components Using a Data Binding .....................................................................................548 Automatically Navigating Around the Application ...............................................................................552 Using Asynchronous Components ................................................................................ 557 Disabling Prefetch Hints .....................................................................................................................560 Configuring Lazy Loading ...................................................................................................................561 Summary ...................................................................................................................... 564 ■■Chapter 22: URL Routing ................................................................................... 565 Preparing for This Chapter ........................................................................................... 566 Getting Started with URL Routing ................................................................................. 567 Providing Access to the Routing Configuration ................................................................................... 569 Using the Routing System to Display Components ............................................................................. 570 Navigating to Different URLs ..............................................................................................................572 Understanding and Configuring URL Route Matching .................................................. 577 Understanding URL Matching and Formatting ....................................................................................578 Using the HTML5 History API for Routing ...........................................................................................578 Using a Route Alias .............................................................................................................................582 Getting Routing Data in Components ..................................................................................................583 Matching Routes Dynamically ............................................................................................................587 Using Regular Expressions to Match URLs .........................................................................................591 Creating Named Routes ......................................................................................................................594 Dealing with Navigation Changes ................................................................................ 597 Summary ...................................................................................................................... 601 ■■Chapter 23: URL Routing Element Features ....................................................... 603 Preparing for This Chapter ........................................................................................... 604 Working with Router-Link Elements ............................................................................. 606 Selecting the Element Type ................................................................................................................608 Selecting the Navigation Event ...........................................................................................................610 Styling Router Link Elements .............................................................................................................611 Creating Nested Routes ................................................................................................ 617 Planning the Application Layout .........................................................................................................617 Adding Components to the Project .....................................................................................................617 Defining the Routes ............................................................................................................................619 Creating the Navigation Elements ......................................................................................................621 Testing the Nested Routes ..................................................................................................................622 Using Named Router-View Elements ............................................................................ 624 Summary ...................................................................................................................... 628 ■■Chapter 24: Advanced URL Routing ................................................................... 629 Preparing for This Chapter ........................................................................................... 629 Using Separate Files for Related Routes ...................................................................... 630 Guarding Routes ........................................................................................................... 632 Defining Global Navigation Guards .....................................................................................................632 Defining Route-Specific Guards ......................................................................................................... 637 Defining Component Route Guards .....................................................................................................640 Loading Components on Demand ................................................................................ 648 Displaying a Component Loading Message ........................................................................................ 649 Creating Routing-Free Components ............................................................................. 654 Summary ...................................................................................................................... 656 ■■Chapter 25: Transitions ..................................................................................... 657 Preparing for This Chapter ........................................................................................... 658 Creating the Components ...................................................................................................................659 Configuring URL Routing .................................................................................................................... 662 Creating the Navigation Elements ......................................................................................................663 Getting Started with Transitions ................................................................................... 665 Understanding the Transition Classes and CSS Transition .................................................................. 668 Understanding the Transition Sequence .............................................................................................670 Using an Animation Library .......................................................................................... 670 Switching Between Multiple Elements ......................................................................... 672 Applying a Transition to URL Routed Elements ................................................................................... 675 Applying a Transition for an Element’s Appearance ........................................................................... 676 Applying Transitions for Collection Changes ................................................................ 678 Using Transition Events ................................................................................................ 680 Using the Enter and Leave Events ......................................................................................................682 Drawing Attention to Other Changes ............................................................................ 683 Summary ...................................................................................................................... 686 ■■Chapter 26: Extending Vue.js ............................................................................. 687 Preparing for This Chapter ........................................................................................... 688 Creating Custom Directives .......................................................................................... 690 Understanding How Directives Work .................................................................................................. 692 Using Custom Directive Expressions ..................................................................................................695 Using Custom Directive Arguments ....................................................................................................696 Using Custom Directive Modifiers ......................................................................................................698 Communicating Between Hook Functions ..........................................................................................700 Defining Single Function Directives ....................................................................................................701 Creating Component Mixins ......................................................................................... 702 Creating a Vue.js Plugin ................................................................................................ 706 Creating the Plugin .............................................................................................................................709 Using a Plugin .....................................................................................................................................711 Summary ...................................................................................................................... 713 Index ..................................................................................................................... 715
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum You cannot attach files in this forum You can download files in this forum
![[Quote]](./templates/default/images/lang/en/icon_quote.gif "Reply with quote"){kind=icon}
![[Profile]](./templates/default/images/lang/en/icon_profile.gif "View user's profile"){kind=icon}
![[PM]](./templates/default/images/lang/en/icon_pm.gif "Send private message"){kind=icon}
