Building web applications with Vue.js: MVVM patterns for conventional and single-page websites

Preface
Contents
About the Author
List of Figures
List of Tables
1: Introduction: Before the Real Thing Starts
1.1 What Do We Cover in the Introductory Chapter?
1.2 The Aim of the Book
1.3 What Should You Already Be Able to Do?
1.4 What Do You Need to Work with the Book?
1.4.1 The Vue.js Framework
1.4.1.1 Integrating a CDN
1.4.1.2 Deploying the Framework via Your Own Web Servers
1.4.1.3 Further Integration Options
1.5 The Features of Vue.js
1.5.1 Directives
1.5.2 The Virtual DOM
1.5.3 Data Binding and Reactivity
1.5.4 Creation of Components
1.5.5 An Own Event System
1.5.6 Animation and Transition Effects
1.5.7 Calculated Properties
1.5.8 Templates
1.5.9 Watcher
1.5.10 Routing
1.5.11 Vue CLI
1.6 Summary
2: First Examples: Just Test Vue.js Once
2.1 What Do We Cover in the Chapter?
2.2 The Basic Framework and a First Example
2.3 Dynamics for the Example
2.3.1 Real Response and v-model
2.4 Summary
3: Behind the Scenes: How and Why Does Vue.js Work?
3.1 What Do We Cover in This Chapter?
3.2 The Principle of Fault Tolerance and the DOM Concept
3.2.1 The DOM Concept From a Particular Point of View
3.2.1.1 DOM as a Dynamic Object Interface
3.2.1.2 Access to DOM Elements
3.2.1.3 The Blueprint for the DOM of the Web Page: HTML
3.2.1.4 Principle of Fault Tolerance: What Happens in the DOM Tree?
3.3 Arrays, Objects and JSON
3.3.1 Hash Lists
3.3.2 The JavaScript Object Notation
3.3.3 Callbacks and Function References
3.3.3.1 Own “Event Handler” for Monitoring
3.4 MVC and MVVC
3.4.1 Design Patterns
3.4.2 The MVC Pattern
3.4.3 MVVC
3.5 Summary
4: Vue.js in Depth: The Vue Instance, Vue Templates, and Data Binding
4.1 What Do We Cover in the Chapter?
4.2 The Vue Instance
4.2.1 Responding to the Creation of the Vue Object: The Life Cycle
4.3 Basic Information About Vue.js Templates
4.3.1 The Template Attribute
4.3.2 Under the Template Hood
4.3.3 Different Types of Data Binding in Templates
4.3.3.1 General Use of v-bind in Templates
4.3.3.2 React Only Once: v-once
4.3.3.3 HTML Rendering: v-html
4.3.3.4 Moustache Syntax in Combination with Directives
4.3.3.5 Data Binding with Attributes
4.3.3.5.1 Variant 1: True
4.3.3.5.2 Variant 1: False
4.3.4 Using JavaScript Expressions for Data Binding
4.4 More on Directives
4.4.1 Arguments
4.4.2 Dynamic Arguments
4.4.3 Restrictions for Dynamic Argument Values
4.4.4 Modifiers for Attributes
4.5 Components
4.5.1 Watch Out!
4.5.2 Global Versus Local Registration
4.5.3 Data Transfer
4.5.4 The Way Back: Slots
4.5.5 Asynchronous Data Transmission
4.5.6 Single File Components
4.6 Which Side Would You Like to Have? Routing
4.6.1 MVVC/MVC and Routing
4.6.2 The Concrete Implementation in Vue.js
4.7 Summary
5: Working with Arrays: Iterations with the v-for Directive
5.1 What Do We Cover in the Chapter?
5.2 The v-for Directive
5.2.1 Static Display of Values From an Array
5.2.2 Access to the Index of the Current Element
5.3 Access to More Complex Structures
5.3.1 Nested v-for Directives
5.3.2 Addressing Individual Entries Directly
5.4 Specific Applications of the v-for Directive
5.4.1 The v-for Directive with a Range of Values
5.4.2 Access to the Parent Elements
5.4.3 Key and Index in One Object
5.4.4 The Key Attribute for Binding the Id
5.4.5 Calling Callbacks
5.5 Observing Changes in Arrays
5.5.1 Mutating Methods
5.5.2 Sorting Arrays and Working with Methods
5.5.2.1 The v-on Directive
5.5.2.2 The CSS File with Dynamics
5.5.3 Generating New Arrays
5.6 Summary
6: Conditional Rendering: The v-if Directive – Making Decisions
6.1 What Do We Cover in the Chapter?
6.2 The v-if, v-else and v-else-if Directives
6.3 The v-show Directive
6.4 When v-if and When v-show?
6.5 A Special Combination: The Directive v-for with v-if or v-show
6.5.1 A Wrapper with v-if is Better
6.6 Summary
7: Events, Methods, Observers and Calculated Properties: Calculated Results and Reactions
7.1 What Do We Cover in the Chapter?
7.2 Basic Considerations on the Distribution of Tasks
7.3 Methods of a Vue Object and the Methods Property
7.4 The Event Handling in Vue.js
7.4.1 Background to Event Handling
7.4.1.1 The Event Object
7.4.1.2 Bubbling and the Bubble Phase
7.4.2 The Concrete Example of v-on
7.4.3 Evaluating the Event object
7.4.4 Event Modifier
7.4.5 Other Modifiers
7.4.6 User-Defined Events
7.5 The Computed Property
7.6 When Methods and When Calculated Properties?
7.7 Watcher (Observer)
7.7.1 Observing the Geolocation with a Watcher
7.7.2 Ajax with a Watcher
7.7.2.1 What Is Ajax?
7.7.2.2 The Source Code
7.8 Summary
8: Dynamic Layouts with Data Binding: Making Stylesheets Dynamic
8.1 What Do We Cover in the Chapter?
8.2 Data Binding and the v-bind Directive for Conditional Classes
8.2.1 Switching CSS Classes
8.2.1.1 Switching a Class Dynamically
8.2.1.2 Switching Several Classes Dynamically
8.2.2 The Array Notation for Multiple Properties
8.2.3 Logic in the HTML File
8.3 Data Binding and the v-bind Directive for Inline Styles
8.4 Abbreviations (Shorthands)
8.4.1 The v-bind Abbreviation
8.4.2 Abbreviation v-on
8.5 Summary
9: Forms and Form Data Binding: Interaction with the User
9.1 What Do We Cover in the Chapter?
9.2 Basics of Using Forms on the Web
9.2.1 The Contained Form Elements
9.3 Basic Use of Form Binding in Vue.js
9.3.1 Vue Instance First
9.3.1.1 Paying Attention to Special Features
9.4 Some Concrete Examples
9.4.1 A Simple Form with Different Form Elements
9.4.1.1 Text Fields
9.5 Dynamic Options
9.6 A Task List as a Practical Example
9.6.1 A First Simple Version of a Todo List
9.6.2 A Permanent Task List
9.6.2.1 Background to Local Storage
9.6.2.2 Making the Todo List Persistent
9.6.3 Persistence the Second: Server-Side
9.7 More on Value Bindings for Forms
9.7.1 The Modifiers
9.7.1.1 The .lazy Modifier
9.7.1.2 The .number Modifier
9.7.1.3 The .trim Modifier
9.8 Summary
10: Filtering Techniques: Selected Data Only
10.1 What Do We Cover in the Chapter?
10.2 Basics of Filters for JavaScript Arrays
10.2.1 The Arrow Notation
10.3 Filters in Vue.js
10.3.1 Local Filters
10.3.2 Global Filters by Extending the Vue Instance
10.3.3 Dynamic Filtering
10.3.4 Chaining Filters
10.3.5 Transfer to Parameters
10.4 Summary
11: Transitions and Animations: Moving Things
11.1 What Do We Cover in the Chapter?
11.2 Transitions with Transition
11.3 The Transition Classes
11.4 CSS Animations
11.5 Special Situations
11.5.1 Using Transitions and Animations Together
11.5.2 Explicit Transition Times: The Duration Specification
11.5.3 JavaScript Hooks
11.5.4 Animation of Data
11.6 Summary
12: Outlook: What Else Is There in Vue.js?
12.1 What Do We Cover in the Chapter?
12.2 Use Vue.js in CMS or in Combination with Other Frameworks
12.3 Server-Side Rendering
12.4 Mixins
12.5 User-Defined Directives
12.6 Plugins
12.6.1 Using a Plugin
12.6.2 Writing a Plugin
12.7 Summary
Appendix
Important Sources on the Internet About Vue.js (Table A.1)
Solutions to Tasks
Tasks in Chap. 2
Tasks in Chap. 4
Tasks in Chap. 6
Index