O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The Majesty of Vue.js

Book Description

Create fast front-end applications and increase the performance of your existing projects with Vue.js integration

About This Book

  • Learn about computed properties, components, filters, routing, ES6, and workflow automation
  • This book will show you how easy Vue.js is to grasp, and that its integration can save you a lot of time and effort
  • This book will guide you through the path of the rapidly spreading JavaScript Framework Vue.js

Who This Book Is For

This book is for anyone interested in learning to use a lightweight and simple JavaScript framework. No excessive knowledge is required, though it would be good to be familiar with HTML and JavaScript.

This book is also useful for those who already know their way around Vue.js and want to expand their knowledge.

What You Will Learn

  • Get to know the fundamentals of Vue.js
  • Consume an API using Vue Resource
  • Explore components, filters, methods, and computed properties are and find out how to use them to build robust applications
  • Break your applications into Single File Components
  • Build Single Page Applications using Vue Router
  • Automate your workflow using Vue.js

In Detail

Vue.js is a library to build interactive web interfaces. The aim is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible.

This book will teach you how to efficiently implement Vue.js in your projects. It starts with the fundamentals of Vue.js to building large-scale applications. You will find out what components, filters, methods, and computed properties are and how to use them to build robust applications.

Further on, you will become familiar with ES6, single file components, module bundlers, and workflow automation. The best way to learn to code is to write it, so there’s an exercise at the end of most of the chapters for you to solve and actually test yourself on what you have learned. You can solve these in order to gain a better understanding of Vue.js.

By the end of this book, you will be able to create fast front-end applications and increase the performance of your existing projects with Vue.js integration.

Style and approach

The book is written in an informal, intuitive, and easy-to-follow format, and all examples are detailed enough to provide adequate guidance to everyone.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. The Majesty of Vue.js
    1. The Majesty of Vue.js
    2. Credits
    3. About the Authors
    4. www.PacktPub.com
      1. Why subscribe?
    5. Preface
      1. Who this book is for
      2. Homework
      3. Conventions
      4. Reader feedback
      5. Customer support
        1. Downloading the example code
      6. Downloading the color images of this book 
        1. Errata
        2. Piracy
        3. Questions
    6. 1. Install Vue.js
      1. Standalone version
        1. Downloading from vuejs.org
        2. Include from CDN
      2. Downloading using NPM
      3. Downloading using Bower
    7. 2. Getting Started
      1. Hello Vue
        1. Two-way binding
        2. Comparison with jQuery
        3. Homework
    8. 3. A Flavor of Directives
      1. v-show
      2. v-if
        1. Template v-if
      3. v-else
      4. v-if versus v-show
      5. Homework
    9. 4. List Rendering
      1. Installing and using Bootstrap
      2. v-for
        1. Range v-for
      3. Array rendering
        1. Looping through an array
        2. Looping through an array of objects
      4. Object v-for
      5. Filtered results
      6. Ordered results
      7. Custom filter
      8. Homework
    10. 5. Interactivity
      1. Event handling
        1. Handling events inline
        2. Handling events using methods
        3. Shorthand for v-on
      2. Event modifiers
      3. Key modifiers
      4. Computed properties
        1. Using computed properties to filter an array
      5. Homework
    11. 6. Components
      1. What are Components?
      2. Using Components
      3. Templates
      4. Properties
      5. Reusability
      6. Altogether now
      7. Homework
    12. 7. Class and Style Bindings
      1. Class binding
        1. Object syntax
        2. Array syntax
      2. Style binding
        1. The object syntax
        2. The array syntax
      3. Bindings in action
      4. Homework
    13. 8. Consuming an API – Preface
      1. CRUD
      2. API
        1. Download book's code
        2. API endpoints
    14. 9. Working with Real Data
      1. Geting data asynchronously
      2. Refactoring
      3. Updating data
      4. Deleting data
    15. 10. Integrating vue-resource
      1. Overview
      2. Migrating
      3. Enhancing functionality
        1. Editing stories
        2. Creating new stories
        3. Storing and updating unit
      4. JavaScript file
      5. Source code
      6. Homework
        1. Preface
        2. API endpoints
        3. Your code
    16. 11. Pagination
      1. Implementation
      2. Pagination links
      3. Homework
    17. 12. ECMAScript 6
      1. ES6 features
        1. Compatibility
        2. Variable declarations
          1. let declarations
          2. Constant declarations
        3. Arrow functions
        4. Modules
        5. Classes
        6. Default parameter values
    18. 13. Advanced Workflow
      1. Compiling ES6 with Babel
        1. Installation
        2. Configuration
        3. Build alias
        4. Usage
        5. Homework
      2. Workflow automation with Gulp
        1. Task runners
        2. Installation
        3. Usage
        4. Watch
        5. Homework
      3. Module bundling with Webpack
        1. Module bundlers
        2. Webpack
        3. Installation
        4. Usage
        5. Automation
      4. Summary
    19. 14. Mastering Single File Components
      1. vue-cli
        1. Vue's templates
        2. Installation
        3. Usage
      2. Webpack template
        1. Project structure
        2. index.html
        3. Hello.vue
        4. App.vue
          1. main.js
      3. Forming .vue files
        1. Nested components
    20. 15. Swapping Components
      1. Dynamic components
        1. The is component
        2. Navigation
    21. 16. Vue Router
      1. Installation
      2. Usage
      3. Nested routes
      4. Route matching
        1. Named routes
        2. Route object
        3. Dynamic segments
        4. Route alias
        5. Route go
        6. Filtering transitions
      5. Homework
    22. 17. Further Learning
      1. Tutorials
      2. Videos
      3. Books
      4. Open source projects
    23. 18. Closing Thoughts