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

Description

Get started with Vue.js quickly and easily with this book This book provides a compact and practical introduction to the popular Vue.js. Use the MVVC concept for applications on the web on the basis of MVC design patterns and create single-page web applications easily. You will use one of the powerful frameworks based only on elementary WWW standard technologies. With Vue.js you will understand and apply data binding, components, directives and modularity. With this book, you will not only learn the most important basics of Vue.js. You will also learn how to create and maintain web applications with this JavaScript web framework. The focus of this comprehensive work is on the following aspects: - HTML/CSS/JavaScript and the Web: The Vue.js environment - Basis of JavaScript (above all JSON) - Working with the Vue instance - templates - Double Curly Syntax and Data Binding   With its strong application focus, this book on Vue.js is an ideal companion for self-study or relevant courses. In terms of content, it is aimed at: (a) creators of websites (b) programmers c) Web designer   Dive even deeper into the matter   Ralph Steyer shows which prerequisites you should have to work with this book. Then you will learn more about the framework and the special features of Vue.js. In the further course, the author covers these partial aspects, among others: - First examples - just test Vue.js once - How and why does Vue.js work? - Conditional Rendering: The v-if directive - making decisions - Dynamic layouts with data binding - making stylesheets dynamic - Forms and form data binding - interaction with the user - Transitions and animations - Moving things   If you want to learn even more about the application, this book gives you an outlook on further possible uses and functions of Vue.js in the final chapter. To make it easier for you to get started, you will find program codes and illustrations in each chapter that illustrate complex processes. 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