Learning Vue.js 2

Learning Vue.js 2

by Olga Filipova
Released December 2016
Publisher(s): Packt Publishing
ISBN: 9781786469946

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn how to build amazing and complex reactive web applications easily with Vue.js

About This Book

  • Learn how to propagate DOM changes across the website without writing extensive jQuery callbacks code.
  • Learn how to achieve reactivity and easily compose views with Vue.js and understand what it does behind the scenes.
  • Explore the core features of Vue.js with small examples, learn how to build dynamic content into preexisting web applications, and build Vue.js applications from scratch.

Who This Book Is For

This book is perfect for novice web developer seeking to learn new technologies or frameworks and also for webdev gurus eager to enrich their experience. Whatever your level of expertise, this book is a great introduction to the wonderful world of reactive web apps.

What You Will Learn

  • Build a fully functioning reactive web application in Vue.js from scratch.
  • The importance of the MVVM architecture and how Vue.js compares with other frameworks such as Angular.js and React.js.
  • How to bring reactivity to an existing static application using Vue.js.
  • How to use plugins to enrich your applications.
  • How to develop customized plugins to meet your needs.
  • How to use Vuex to manage global application’s state.

In Detail

Vue.js is one of the latest new frameworks to have piqued the interest of web developers due to its reactivity, reusable components, and ease of use.

This book shows developers how to leverage its features to build high-performing, reactive web interfaces with Vue.js. From the initial structuring to full deployment, this book provides step-by-step guidance to developing an interactive web interface from scratch with Vue.js.

You will start by building a simple application in Vue.js which will let you observe its features in action. Delving into more complex concepts, you will learn about reactive data binding, reusable components, plugins, filters, and state management with Vuex. This book will also teach you how to bring reactivity to an existing static application using Vue.js. By the time you finish this book you will have built, tested, and deployed a complete reactive application in Vue.js from scratch.

Style and approach

This book is a thorough, step-by-step guide showing readers how to build complete web apps with Vue.js. While teaching its intricacies, this book shows how to implement the MVVM architecture in the real world and build high-performing web interfaces.

Table of contents

  1. Learning Vue.js 2
    1. Learning Vue.js 2
    2. Credits
    3. About the Author
    4. Acknowledgments
    5. About the Reviewer
    6. www.PacktPub.com
      1. Why subscribe?
    7. Dedication
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Going Shopping with Vue.js
      1. Buzzwords
      2. Vue.js history
      3. The most important thing about Vue.js
      4. Let's go shopping!
        1. Implementing a shopping list using jQuery
        2. Implementing a shopping list using Vue.js
        3. Analyzing data binding using developer tools
        4. Bringing user input to the data with two-way binding
        5. Rendering the list of items using the v-for directive
        6. Check and uncheck shopping list items
        7. Adding new shopping list items using the v-on directive
      5. Using Vue.js in an existing project
      6. Vue.js 2.0!
      7. Projects using Vue.js
        1. Grammarly
        2. Optimizely
        3. FilterBlend
        4. PushSilver
      8. Book roadmap
      9. Let's manage time!
        1. Toggle the title by using computed properties
        2. Left-pad time values using computed properties
        3. Keep state with start, pause, and stop buttons
      10. Exercise
      11. Summary
    10. 2. Fundamentals – Installing and Using
      1. MVVM architectural pattern
      2. DefineProperty, getters, and setters
      3. Comparing with other frameworks
        1. React
        2. Angular
        3. Vue
      4. Vue.js fundamentals
        1. Reusable components
        2. Vue.js directives
        3. Plugins in Vue.js
        4. Exercise
        5. Application state and Vuex
        6. vue-cli
        7. Vue plugins for IDEs
      5. Installing, using, and debugging a Vue.js application
        1. Installing Vue.js
          1. Standalone
          2. CDN
          3. Bower
          4. CSP-compliant
          5. npm
          6. vue-cli
          7. Dev build
      6. Debugging your Vue application
      7. Scaffolding our applications
        1. Scaffolding the shopping list application
        2. Bootstraping your Pomodoro application
      8. Exercise
      9. Summary
    11. 3. Components – Understanding and Using
      1. Revisiting components
      2. Benefits of using components
        1. Declaring templates in HTML
        2. Handling data and el properties inside a component
        3. Scope of the components
        4. Components inside other components
      3. Rewriting the shopping list with simple components
        1. Defining templates for all the components
        2. Defining and registering all the components
      4. Exercise
      5. Single-file components
        1. Plugins for IDEs
        2. Style and scope
        3. Hot-reloading
        4. Preprocessors
          1. HTML preprocessors
          2. CSS preprocessors
          3. JavaScript preprocessors
      6. Rewriting our shopping list application with single-file components
        1. AddItemComponent
        2. Configuring ItemComponent and ItemsComponent
      7. Exercise
      8. Rewriting the Pomodoro application with single-file components
      9. Reactive binding of CSS transitions
      10. Summary
    12. 4. Reactivity – Binding Data to Your Application
      1. Revisiting data binding
      2. Interpolating data
        1. Adding title of the Pomodoro state
        2. Exercise
      3. Using expressions and filters
        1. Expressions
        2. Filters
        3. Exercise
      4. Revisiting and applying directives
        1. Two-way binding using the v-model directive
        2. Two-way binding between components
        3. Binding attributes using the v-bind directive
        4. Conditional rendering using v-if and v-show directives
        5. Array iteration using the v-for directive
          1. Creating ShoppingListComponent and modifying ItemsComponent
          2. Modifying App.vue
        6. Event listeners using the v-on directive
        7. Shorthands
        8. Exercise
      5. Kittens
      6. Summary
    13. 5. Vuex – Managing State in Your Application
      1. Parent-child components' communication, events, and brain teaser
      2. Why do we need a global state store?
      3. What is Vuex?
      4. How does the store work and what is so special about it?
      5. Greetings with store
        1. Store state and getters
        2. Mutations
        3. Actions
      6. Installing and using the Vuex store in our applications
      7. Using the Vuex store in the shopping list application
      8. Using Vuex store in the Pomodoro application
        1. Bringing life to start, pause, and stop buttons
        2. Binding Pomodoro minutes and seconds
        3. Creating the Pomodoro timer
        4. Changing the kitten
      9. Summary
    14. 6. Plugins – Building Your House with Your Own Bricks
      1. The nature of Vue plugins
      2. Using the vue-resource plugin in the shopping list application
        1. Creating a simple server
        2. Installing vue-resource, creating resources, and its methods
        3. Fetching all the shopping lists the application starts
        4. Updating server status on changes
        5. Creating a new shopping list
        6. Deleting existing shopping lists
        7. Exercise
      3. Creating and using a plugin in the Pomodoro application
        1. Creating the NoiseGenerator plugin
        2. Using the plugin in the Pomodoro application
        3. Creating a button to toggle the sound
        4. Exercise
      4. Summary
    15. 7. Testing – Time to Test What We Have Done So Far!
      1. Why unit tests?
      2. Unit tests for Vue application
      3. Writing unit tests for the shopping list application
        1. Testing actions, getters, and mutations
        2. Good test criteria
        3. Code coverage
        4. Faking server responses and writing asynchronous tests
        5. Testing components
      4. Writing unit tests for our Pomodoro application
      5. What is end- to-end testing?
      6. Nightwatch for e2e
      7. Writing e2e tests for the Pomodoro application
      8. Summary
    16. 8. Deploying – Time to Go Live!
      1. Software deployment
        1. What is GitHub?
        2. What is Travis?
        3. What is Heroku?
      2. Moving the application to the GitHub repository
      3. Setting continuous integration with Travis
      4. Deploying the Pomodoro application
        1. Checking logs
        2. Preparing the application to run on Heroku
      5. Deploying the shopping list application
        1. Trying Heroku locally
    17. 9. What Is Next?
      1. The journey so far
      2. Vue 2.0
      3. Revisiting our applications
        1. Shopping list application
        2. The Pomodoro application
      4. Why is it just the beginning?
        1. Adding features to our applications
          1. Shopping list application
          2. The Pomodoro application
        2. Beautifying our applications
          1. Logotype
          2. Identity and design
          3. Animations and transitions
        3. Extending our applications to other devices
      5. Summary
    18. A. Solutions to Exercises
      1. Exercise for chapter 1
      2. Exercises for chapter 2
        1. Enhancing MathPlugin
        2. Creating a Chrome application of the Pomodoro timer
      3. Exercises for chapter 3
        1. Exercise 1
        2. Exercise 2
      4. Summary

Product information

  • Title: Learning Vue.js 2
  • Author(s): Olga Filipova
  • Release date: December 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781786469946