Book Image

Vue.js Quick Start Guide

By : Ajdin Imsirovic
Book Image

Vue.js Quick Start Guide

By: Ajdin Imsirovic

Overview of this book

Vue.js is the latest trending frontend framework. Simplicity, reactivity, and ?exibility are some of the key benefits that Vue offers to developers. This book will help you learn everything you need to know to build stunning reactive web apps with Vue.js 2 quickly and easily. This book will take you through the Vue 2 framework. You will start by learning the different Vue installation options: CDN, NPM, and Vue CLI. Then we will look at the core concepts of Vue: templates and components – ways to modularize Vue code. You will learn how to utilize directives, which are Vue-specific HTML attributes with additional features. Also, you will see how Vue uses a streamlined approach to development, with reusable methods, computed properties, and watchers, and how it controls state with the help of its data option. You will learn about the concepts of reactive programming in Vue, and how to understand communication between parent and child components. We will take a look at props and slots, working with CSS, filters, and mixins. We will also look at ways to add transitions and animations to Vue apps. Then you will extend Vue by building custom directives and your own plugins. Finally, you will learn about Vuex – a Vue plugin that allows us to centralize state, and also introduce Nuxt, which is a framework that builds on top of Vue and solves some issues of single-page applications. After learning about these components, you will be ready to build your own reactive web apps with Vue.js 2.
Table of Contents (15 chapters)
Title Page
Copyright and Credits
Packt Upsell
Contributors
Preface
Index

Index

A

  • Atom
    • reference / Setting up code editors to use with Vue

B

  • Bootstrap component
    • reference / Working with mixins

C

  • child component
    • functionality, adding / Adding basic functionality to a child component
  • CodePen
    • reference / The quickest way to start using Vue2
  • component
    • about / Understanding components, templates, and props
    • life cycle / What is a component's lifecycle?
  • component hierarchy / Vue component hierarchy, and global and local components
  • computed properties / Computed properties and methods, What exactly are these dependencies?
  • create-nuxt-app
    • used, for installing Nuxt.js / Installing with create-nuxt-app
  • CSS animations
    • about / Transitions and animations in CSS
    • working / How CSS transitions work, How CSS animations work
    • versus CSS transitions / Differences between transitions and animations in CSS
    • rules / Rules for CSS animations
    • with transition component / CSS animations with transition component
  • CSS styles
    • binding, in Vue / Binding CSS styles in Vue
  • CSS transitions
    • about / Transitions and animations in CSS
    • versus CSS animations / Differences between transitions and animations in CSS
    • rules / Rules for CSS transitions
  • custom-article component
    • props option, adding / Adding props and data for better components
    • contents, adding with data object / Adding content to our components with the help of the data object
  • custom directives
    • about / Understanding custom directives
    • building / Building a simple custom directive
    • values, passing to / Passing values to custom directives
  • custom transition classes / Custom transition classes

D

  • data-driven views
    • reactivity / What is reactivity?
    • achieving / How does Vue achieve this?
  • data store / What is state?
  • directives
    • creating / Making our own directives
    • custom directives / Understanding custom directives
    • local directives, using / Using local directives
  • dynamic CSS classes
    • used, for animating button on click / Animating a button on click with dynamic CSS classes

E

  • enter transition
    • setting up / Setting up the enter transition
  • eslint error
    • debugging / Debugging an eslint error

F

  • filters
    • using / Using filters
    • example / An example of a filter that rounds up student grades
    • using, as replacement for conditional directives / Using filters as a replacement for conditional directives
    • chaining, in Vue / Chaining filters in Vue
  • fruit counter app
    • building, with Vuex / Building a fruit counter app with Vuex
    • enhancing / Improving our fruit counter app

G

  • global component / Vue component hierarchy, and global and local components
  • global registration / Vue component hierarchy, and global and local components

H

  • HelloAgain.vue
    • props, adding / Adding props to our HelloAgain.vue
    • data, passing from children to parent components / Passing data from children to parent components

I

  • IDEs (integrated development environments) / Setting up code editors to use with Vue
  • index.vue file
    • editing / Editing the index.vue file
  • initial page load / Single-page applications and server-side rendering

J

  • JavaScript
    • animation hooks / JavaScript animation hooks

L

  • leave transition
    • setting up / Setting up the leave transition
  • life cycle hooks
    • about / Lifecycle hooks
    • using / How do we use lifecycle hooks?
  • local component / Vue component hierarchy, and global and local components
  • local registration / Vue component hierarchy, and global and local components

M

  • methods / Computed properties and methods
  • mixins
    • working with / Working with mixins
    • simple app with repetitive functionality, building / Building a simple app with repetitive functionality in different components
    • DRY / Staying DRY with mixins
    • viewportSize mixin, refactoring / Refactoring our viewportSize mixin
    • reference / Refactoring our viewportSize mixin
  • mutable / State management, data stores, and one-way data flows

N

  • Nuxt.js
    • installing / Installing Nuxt.js and previewing the default project
    • default project, previewing / Installing Nuxt.js and previewing the default project
    • installing, with vue init command / Installing Nuxt.js with the vue init command
    • eslint error, debugging / Debugging an eslint error
    • installing, with create-nuxt-app / Installing with create-nuxt-app
    • index.vue file, editing / Editing the index.vue file
  • Nuxt app
    • navigation, adding via components folder / Adding navigation to Nuxt apps via the components folder
    • content, adding to pages / Adding content to our Nuxt app's pages
    • page transitions, adding / Adding page transitions to our Nuxt.js app
  • Nuxt pages
    • using, as routes / Nuxt pages as routes

O

  • one-way data flow / What is state?, The Vuex state management pattern

P

  • props / Understanding components, templates, and props

S

  • server-side rendering / Single-page applications and server-side rendering
  • single-page applications (SPAs) / Single-page applications and server-side rendering
  • slots / Introduction to slots
  • state / What is state?
  • store / The store
  • Sublime Text
    • reference / Setting up code editors to use with Vue
  • Sublime Text 3
    • Vue.js, working witj / Working with Vue.js in Sublime Text 3
    • downloading / Dowloading Sublime Text 3
    • Package Manager, installing / Install Package Manager

T

  • templates / Understanding components, templates, and props
  • transition components
    • naming / Naming transition components
    • CSS animations / CSS animations with transition component
  • transition duration
    • combining / Combining transition modes, duration, keys, and v-if
  • transition element
    • in Vue / The transition element in Vue
  • transition groups
    • working with / Working with transition groups
  • transition keys
    • combining / Combining transition modes, duration, keys, and v-if
  • transition modes
    • combining / Combining transition modes, duration, keys, and v-if
  • transition v-if
    • combining / Combining transition modes, duration, keys, and v-if

U

  • universal web app / Single-page applications and server-side rendering

V

  • viewportSize mixin
    • refactoring / Refactoring our viewportSize mixin
  • Visual Studio Code (VS Code)
    • reference / Setting up code editors to use with Vue
    • Vue.js, working with / Working with Vue.js in VS Code
    • installing / Installing VS Code and extensions
    • extensions / Installing VS Code and extensions
    • download link / Installing VS Code and extensions
  • Vue
    • about / What is Vue?
    • using / The quickest way to start using Vue2, Why use Vue?
    • reference / The quickest way to start using Vue2, Vue component hierarchy, and global and local components
    • Mustache template example / Mustache template example
    • data option, using as function / Using Vue's data option as a function
    • issues, solving / What problems does Vue solve?
    • as jQuery successor / Vue, a jQuery successor
    • as learning tool for beginners / A learning tool for beginners
    • features / A versatile and progressive framework, A tool for animations and transitions, Features similar to other modern frontend frameworks and libraries
    • declarative code / Declarative code
    • directives / Directives
    • modifiers / Modifiers
    • methods / Vue methods
    • computed properties and watchers / Computed properties and watchers
    • data-driven views / Data-driven views in Vue
    • component templates, building / Other ways of building component templates in Vue
    • complex page, creating with components / Creating a more complex page out of components in Vue
    • watchers / Watchers in Vue
    • used, for setting up code editors / Setting up code editors to use with Vue
    • transition element / The transition element in Vue
    • CSS styles, binding / Binding CSS styles in Vue
  • Vue-based layouts
    • improving, with v-for / Improving our Vue-based layouts with v-for
  • Vue-cli
    • using / Using Vue-CLI
    • installing / Installing and updating Vue-cli
    • updating / Installing and updating Vue-cli
    • npm package, reference / Installing and updating Vue-cli
    • new project, initializing / Initializing a new project with Vue-cli 
  • Vue-cli-based project
    • structure / The structure of our Vue-cli-based project
  • Vue-cli installation
    • Git bash, installing / Installing Git bash
    • nvm, installing / Installing nvm
    • nvm, adding / Why use nvm?
  • Vue.js
    • working with, in VS Code / Working with Vue.js in VS Code
  • Vue.js, Sublime Text 3
    • working with / Working with Vue.js in Sublime Text 3
  • Vue2
    • using / The quickest way to start using Vue2
  • Vue Cli 3
    • used, for NPM plugin installation / Installing our NPM plugin in a Vue project using Vue CLI 3
  • Vue DevTools plugin
    • used, for tracking Vuex state / Using the Vue DevTools plugin to track our Vuex state
  • Vue instance
    • components, adding / Adding simple components to a Vue instance
  • Vue Native
    • reference / Feels like a right fit for a variety of projects
  • Vue plugins
    • working with / Working with Vue plugins
    • reference / Working with Vue plugins
    • creating / Creating the simplest possible Vue plugin
    • creating, with options defined / Creating a plugin with options defined
    • publishing / Publishing a Vue plugin
    • simple plugin, adding / Adding a simple plugin
    • vue-tour, reference / Additional plugins to learn from
    • vue-multiselect, reference / Additional plugins to learn from
    • v-tooltip, reference / Additional plugins to learn from
  • Vuex
    • fruit counter app, building / Building a fruit counter app with Vuex
  • Vuex state management pattern
    • about / The Vuex state management pattern
    • store / The store
    • getters, in Vuex store / Getters in the Vuex store
    • store mutations / Vuex store mutations
    • actions, in Vuex store / Actions in Vuex store
    • hot reloading / Hot reloading

W

  • watchers / Watchers in Vue
  • web page
    • building, with components / Building a simple web page out of components
  • WebStorm
    • reference / Setting up code editors to use with Vue