Vue.js 2 cookbook build modern, interactive web applications with Vue.js
101 hands-on recipes that teach you how to build professional, structured web apps with Vue.js About This Book Understand and use Vue’s reactivity system, data binding, and computed properties Create fluid transitions in your application with Vue’s built-in transition system Use Vuex and Webpack to...
Other Authors: | |
---|---|
Format: | eBook |
Language: | Inglés |
Published: |
Birmingham, England ; Mumbai, [India] :
Packt
2017.
|
Edition: | 1st edition |
Subjects: | |
See on Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009630133206719 |
Table of Contents:
- Cover
- Copyright
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Customer Feedback
- Table of Contents
- Preface
- Chapter 1: Getting Started with Vue.js
- Introduction
- Writing Hello World with Vue.js
- Getting Ready
- How to do it...
- How it works...
- There's more
- Writing lists
- Getting Ready
- How to do it...
- Range of numbers
- Arrays
- Arrays with index notation
- Objects
- How it works...
- Range of numbers
- Arrays
- Objects
- Creating a dynamic and animated list
- Getting Ready
- How to do it...
- How it works...
- There's more
- Reacting to events such as clicks and keystrokes
- Getting Ready
- How to do it...
- How it works...
- Two-way data binding
- There's more
- Choosing a development environment
- How to do it...
- Just the browser
- Adding dependencies with just the browser
- TextEditor
- Adding dependencies with a TextEditor
- Node package manager (npm)
- Adding dependencies with npm
- IDE
- Wrap up
- Formatting your text with filters
- Getting Ready
- How to do it...
- How it works...
- Debugging your application with mustaches (for example, a JSON filter)
- How to do it...
- How it works...
- X-raying your application with Vue developer tools
- Getting Ready
- How to do it...
- Upgrading to Vue.js 2
- How to do it...
- How it works...
- Deprecation of broadcast, dispatch, and the events option
- Deprecation of array filters
- Deprecation of Vue.config.delimiters
- Renaming of life cycle hooks
- Chapter 2: Basic Vue.js Features
- Introduction
- Learning how to use computed properties
- Getting ready
- How to do it...
- There's more...
- Caching computed properties
- Computed setters
- Filtering a list with a computed property
- Getting ready
- How to do it...
- How it works...
- There's more.
- Sorting a list with a computed property
- Getting ready
- How to do it...
- How it works...
- There's more...
- Formatting currencies with filters
- Getting ready
- How to do it...
- How it works...
- There's more...
- Formatting dates with filters
- Getting ready
- How to do it...
- Displaying and hiding an element conditionally
- Getting ready
- How to do it...
- How it works...
- Adding styles conditionally
- How to do it...
- How it works...
- Adding some fun to your app with CSS transitions
- Getting ready
- How to do it...
- How it works...
- There's more...
- Outputting raw HTML
- Getting ready
- How to do it...
- How it works...
- There's more...
- Creating a form with checkboxes
- Getting ready
- How to do it...
- How it works...
- There's more...
- Creating a form with radio buttons
- Getting ready
- How to do it...
- How it works...
- There's more...
- Creating a form with a select element
- Getting ready
- How to do it...
- How it works...
- There's more...
- Chapter 3: Transitions and Animations
- Introduction
- Integrating with third-party CSS animation libraries such as animate.css
- Getting ready
- How to do it...
- How does it work...
- Adding your own transition classes
- Getting ready
- How to do it...
- How it works...
- Animating with JavaScript instead of CSS
- Getting ready
- How to do it...
- How it works...
- There's more...
- Transitioning on the initial render
- Getting ready
- How to do it...
- How it works...
- Transitioning between elements
- Getting ready
- How to do it...
- How it works...
- There's more...
- Transitioning between more than two elements
- Setting the key attribute dynamically
- Letting an element leave before the enter phase in a transition
- Getting ready
- How to do it...
- The two elements problem
- Transition modes.
- How it works...
- Adding entering and leaving transitions for elements of a list
- Getting ready
- How to do it...
- How it works...
- Transitioning elements that move in a list
- Getting ready
- How to do it...
- How it works...
- Animating the state of your components
- Getting ready
- How to do it...
- How it works...
- Packaging reusable transitions into components
- Getting ready
- How to do it...
- Building the basic web page
- Building the reusable transition
- Using our transition with the elements in our page
- How it works...
- Dynamic transitions
- Getting ready
- How to do it...
- How it works...
- Chapter 4: All About Components
- Introduction
- Creating and registering a component
- Getting ready
- How to do it...
- How it works...
- Scope of components
- The render function
- Passing data to your components with props
- Getting ready
- How to do it...
- How it works...
- Kebab case and camel case
- There's more
- Making components talk to each other
- Getting ready
- How to do it...
- How it works...
- Making components talk with Vuex
- Getting ready
- How to do it...
- How it works...
- There's more
- Reading a child's state
- Getting ready
- How to do it...
- How it works...
- Using ref with v-for
- Using components in your own components
- Getting ready
- How to do it...
- How it works...
- Using mixins in your components
- Getting ready
- How to do it...
- How it works...
- Mixin order
- There's more
- Content distribution with slots
- Getting ready
- How to do it...
- How it works...
- There's more
- Named slots
- Scoped slots
- Single file components with Webpack
- Getting ready
- How do do it...
- How it works...
- There's more
- Loading your components asynchronously
- Getting ready
- How to do it...
- How it works...
- Having recursive components.
- Getting ready
- How to do it...
- How it works...
- Recursive component and local registration
- Avoiding a stack overflows!
- Reusable component checklist
- Getting ready
- How to do it...
- How it works...
- Chapter 5: Vue Communicates with the Internet
- Introduction
- Sending basic AJAX requests with Axios
- Getting ready
- How to do it...
- How it works...
- Validating user data before sending it
- Getting ready
- How to do it...
- How it works...
- Creating a form and sending data to your server
- Getting ready
- How to do it...
- How it works...
- There's more...
- Recovering from an error during a request
- Getting ready
- How to do it...
- How it works...
- Creating a REST client (and server!)
- Getting ready
- How to do it...
- How it works...
- Implementing infinite scrolling
- Getting ready
- How to do it...
- How it works...
- Processing a request before sending it out
- Getting ready
- How to do it...
- How it works...
- Preventing XSS attacks to your app
- Getting ready
- How to do it...
- How it works...
- Chapter 6: Single Page Applications
- Introduction
- Creating an SPA with vue-router
- Getting ready
- How to do it…
- How it works…
- There's more…
- Fetching data before switching route
- Getting ready
- How to do it…
- How it works…
- Using named dynamic routes
- Getting ready
- How to do it…
- How it works…
- Having more than one router-view in your page
- Getting ready
- How to do it…
- How it works…
- Compose your routes hierarchically
- Getting ready
- How to do it...
- How it works…
- Using route aliases
- Getting ready
- How to do it…
- How it works…
- Adding transitions between your routes
- Getting ready
- How to do it…
- How it works…
- Managing errors for your routes
- Getting ready
- How to do it…
- How it works….
- Adding a progress bar to load pages
- Getting ready
- How to do it…
- How it works…
- How to redirect to another route
- Getting ready
- How to do it…
- How it works…
- There's more…
- Redirecting to 404s
- Named redirecting
- Redirecting with parameters
- Dynamic redirecting
- Saving scrolling position when hitting back
- Getting ready
- How to do it…
- How it works…
- Chapter 7: Unit Testing and End-to-End Testing
- Introduction
- Using Jasmine for testing Vue
- Getting ready
- How to do it...
- How it works...
- There's more...
- Adding some Karma to your workflow
- Getting ready
- How to do it...
- How it works...
- There's more...
- Testing your application state and methods
- Getting ready
- How to do it...
- How it works...
- Testing the DOM
- Getting ready
- How to do it...
- How it works...
- Testing DOM asynchronous updates
- Getting ready
- How to do it...
- How it works...
- End-to-end testing with nightwatch
- Getting ready
- How to do it...
- How it works...
- Simulating a double-click in nightwatch
- Getting ready
- How it works...
- How it works...
- Different styles of unit testing
- Getting ready
- How to do it...
- How it works...
- Stubbing external API calls with Sinon.JS
- Getting ready
- How to do it...
- How it works...
- Measuring the coverage of your code
- Getting ready
- How to do it...
- How it works...
- Chapter 8: Organize + Automate + Deploy = Webpack
- Introduction
- Extracting logic from your components to keep the code tidy
- Getting ready
- How to do it...
- Creating a clean Webpack project
- Building the compound interest calculator
- How it works...
- Bundling your component with Webpack
- Getting ready
- How to do it...
- How it works...
- There's more...
- Organizing your dependencies with Webpack
- Getting ready
- How to do it.
- How it works.