Vue.js: Up and Running

Vue.js: Up and Running

by Callum Macrae
Released March 2018
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491997246

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.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

Get a brisk introduction to building fast, interactive single-page web applications with Vue.js, the popular JavaScript framework that organizes and simplifies web development. With this practical guide, you’ll quickly move from basics to custom components and advanced features—including JSX, the JavaScript syntax extension.

Author Callum Macrae shows you how to use the most useful libraries in the Vue ecosystem, such as vue-router for routing, vuex for state management, and vue-test-utils for testing. If you’re a frontend developer familiar with JavaScript, HTML, and CSS, this book will show you how to develop a fully featured web application using Vue.

  • Learn Vue.js basics, including its use of templates to display data on a page
  • Set up Vue projects from scratch, or use vue-cli to set up from a template
  • Create a maintainable codebase by splitting code into self-contained components
  • Discover how Vue.js works with CSS to style your websites and applications
  • Use render functions and JSX, rather than templates, to determine what Vue displays
  • Control how code is executed and displayed with vue-router
  • Manage state in one centralized place with the Vuex library
  • Write unit tests to ensure your Vue components don’t break in the future

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. Who This Book Is For
    2. Book Layout
    3. Style Guide
    4. Conventions Used in This Book
    5. O’Reilly Safari
    6. How to Contact Us
    7. Acknowledgments
  2. 1. Vue.js: The Basics
    1. Why Vue.js?
    2. Installation and Setup
      1. vue-loader and webpack
    3. Templates, Data, and Directives
    4. v-if Versus v-show
    5. Looping in Templates
    6. Binding Arguments
    7. Reactivity
      1. How It Works
      2. Caveats
    8. Two-Way Data Binding
    9. Setting HTML Dynamically
    10. Methods
      1. this
    11. Computed Properties
    12. Watchers
      1. Watching Properties of Objects in the Data Object
      2. Getting the Old Value
      3. Deep Watching
    13. Filters
    14. Accessing Elements Directly Using ref
    15. Inputs and Events
      1. The v-on Shortcut
      2. Event Modifiers
    16. Life-Cycle Hooks
    17. Custom Directives
      1. Hook Arguments
    18. Transitions and Animations
      1. CSS Transitions
      2. JavaScript Animations
    19. Summary
  3. 2. Components in Vue.js
    1. Component Basics
    2. Data, Methods, and Computed Properties
    3. Passing in Data
      1. Prop Validation
      2. Casing of Props
      3. Reactivity
      4. Data Flow and the .sync Modifier
      5. Custom Inputs and v-model
    4. Passing Content into Components with Slots
      1. Fallback Content
      2. Named Slots
      3. Scoped Slots
    5. Custom Events
    6. Mixins
      1. Merging Mixins and Components
    7. vue-loader and .vue Files
    8. Non-prop Attributes
    9. Components and v-for
    10. Summary
  4. 3. Styling with Vue
    1. Class Binding
    2. Inline Style Binding
      1. Array Syntax
      2. Multiple Values
    3. Scoped CSS with vue-loader
    4. CSS Modules with vue-loader
    5. Preprocessors
    6. Summary
  5. 4. Render Functions and JSX
    1. The Tag Name
    2. The Data Object
    3. Children
    4. JSX
    5. Summary
  6. 5. Client-Side Routing with vue-router
    1. Installation
    2. Basic Usage
    3. HTML5 History Mode
    4. Dynamic Routing
      1. Reacting to Route Updates
      2. Passing Params to Components as Props
    5. Nested Routes
    6. Redirect and Alias
    7. Navigation
      1. The output Tag
      2. Active Class
      3. Native Events
      4. Programmatic Navigation
    8. Navigation Guards
      1. Per-Route Guards
      2. In-Component Guards
    9. Route Order
      1. 404 Pages
    10. Route Names
    11. Summary
  7. 6. State Management with Vuex
    1. Installation
    2. Concept
    3. State and State Helpers
      1. State Helpers
    4. Getters
      1. Getter Helpers
    5. Mutations
      1. Mutation Helpers
      2. Mutations Must Be Synchronous
    6. Actions
      1. Action Helpers
      2. Destructuring
    7. Promises and Actions
    8. Modules
      1. File Structure
      2. Namespaced Modules
    9. Summary
  8. 7. Testing Vue Components
    1. Testing a Simple Component
    2. Introducing vue-test-utils
    3. Querying the DOM
    4. mount() Options
    5. Mocking and Stubbing Data
    6. Working with Events
    7. Summary
  9. A. Bootstrapping Vue
    1. vue-cli
      1. webpack
      2. pwa
      3. webpack-simple
      4. simple
      5. browserify
      6. browserify-simple
      7. Your Own Template
    2. Nuxt.js
  10. B. Vue from React
    1. Getting Started
    2. Similarities
      1. Components
      2. Reactivity
      3. Life-Cycle Hooks
      4. Setting CSS Classes
    3. Differences
      1. Mutation
      2. JSX Versus Templates
      3. CSS Modules
    4. Ecosystem
      1. Routing
      2. State Management
      3. Unit-Testing Components
  11. Index

Product information

  • Title: Vue.js: Up and Running
  • Author(s): Callum Macrae
  • Release date: March 2018
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491997246