Vue.js in Action

Previous Chapter

List of Figures

Index

[SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X]

SYMBOL

_id route @ symbol, 2^nd * symbol $destroy method $vm0 variable

A

actions in Vuex active-class prop Add to cart buttons, binding events to addEventListener addToCart function albumData property animationDuration animationName animations adding to applications JavaScript hooks overview of updating applications API (application programming interface) APP_LOG_LIFECYCLE_EVENTS variable applications adding animations to adding Axios to adding Bootstrap to adding CSS to converting with Vue-CLI adding child edit routes adding Main components adding product route with parameters creating Form components redirection routing setting up components setting up router-link with style setting up router-link with tags setting up routes wildcards creating new with Vue-CLI for searching music, creating with Nuxt.js in reactive programming setting up with Firebase updating args (arguments), global custom directives with arrays, adding async components asyncData option attribute binding authentication states, updating Vuex with authentication, updating header components with availableInventory property, 2^nd, 3^rd Axios client adding to applications overview of

B

backtick beforeEach function beforeEnter guard beforeUpdate function binding events overview of to Add to cart buttons HTML classes to star ratings to DOM events binding argument binding.modifers.large binding.modifiers.small Bootstrap framework bounce-enter-active class bounce-leave-active class branch Browserify building blocks, creating in Nuxt.js buttons Add to cart buttons, binding events to adding user affordance to comparing v-show with v-if/v-else tracking inventories v-if to display checkout pages v-show directives working with computed properties working with inventories disabled displaying with v-else displaying with v-if for cart items adding as toggles computed properties with radio buttons and value binding

C

calculators in JavaScript in Vue camelCase canAddToCart function cart array cart items buttons for adding as toggles computed properties with displaying counts for cartCount method cartItemCount function charactersRemaining property check boxes, binding values to checkout pages, displaying with v-if checkRating method, 2^nd child edit routes child props, modifying with .sync childIncrementCounter method Chrome browser debugger Developer Tools vue-devtools for CI (continuous integration), testing className method clickHappened function colon character compilation scope component-fade-enter-active class component-fade-leave-active class component-scoped CSS components async components creating global registration in Nuxt.js local registration creating dynamic components applications custom events listening to events modifying child props using .sync defining template components inline template strings text/x-template script elements header components, updating with authentication overview of props to pass data dynamic props literal props prop validation relationships in setting up single-file components slots named scoped testing transitioning computed properties examining update events with when to use computed property conditionals available inventory messages adding messages with v-else adding messages with v-else-if displaying amount of remaining inventory with v-if products, refactoring apps with v-for directives console for JavaScript content distribution context.params object counts for cart items createElement argument cross-site scripting (XSS) attacks CSS classes adding to applications testing currentView property

D

dangerouslySetInnerHTML option data defining product data displaying passing with props dynamic props literal props prop validation data binding debugging, 2^nd default values delivery continuous, testing testing dependencies, installing with Nuxt.js deployment continuous, testing testing directives, custom global with modifers, values, and args learning disabled CSS class disabling lifecycle logging disclosure triangles displaying cart item counts checkout pages with v-if data disabled buttons with v-else with v-if products defining product data marking up product views div element <div> tag, 2^nd DOM events, binding to binding events to Add to cart buttons event binding domPropsInnerHTML property DRY (don’t repeat yourself) dynamic components, creating applications with dynamic props

E

ease of reuse EditProduct component el argument, 2^nd environments for testing setting up Chrome Developer Tools installing Node.js installing npm installing Vue-CLI vue-devtools for Chrome ES6 modules ESLint, 2^nd events binding overview of to Add to cart buttons custom listening to update events expect variable

F

fade-enter class fade-enter-active class fade-leave-active class fade-leave-to class filters adding to markup object writing functions find function Firebase platform Realtime database, updating Main.vue to use setting up setting up applications with updating header component with authentication Form components <form> element form-components template formatPrice function forms modifiers .lazy v-model modifiers .number modifiers trimming input values v-model binding value binding radio buttons and to check boxes v-for directives v-for directives without optional key value fullName function functionality, reusing with mixins functions, rendering

G

getters in Vuex global directives global mixins global registration GUI (graphical user interface), 2^nd

H

<h2> tag handleCalcEvent head element header components, updating with authentication header property <header> tag headless browser helpers in Vuex Homebrew package manager, installing Node.js with hooks adding JavaScript hooks HTML classes, binding to star ratings HTML directive

I

id property image property img node <img> tag importing products from product.json increment method, 2^nd increment-me event incrementCounter method inline template strings input values, trimming inputs modifiers .lazy v-model modifiers .number modifiers trimming input values v-model binding value binding binding values to check boxes radio buttons and v-for directives v-for directives without optional key value inspecting properties installing dependencies with Nuxt.js Node.js using Homebrew using MacPorts using NVM using one-click installers verification of via Linux package management system npm Vue-CLI Vuex in Vue-CLI instances applying output filters adding filters to markup testing values writing filter functions displaying data displaying products defining product data marking up product views inspecting properties JavaScript console root Vue instances interactivity adding arrays adding cart item buttons adding user affordance to buttons adding cart item buttons as toggles comparing v-show with v-if/v-else tracking inventories v-else to display disabled buttons v-if to display checkout pages v-if to display disabled buttons v-show directives working with computed properties working with inventories binding to DOM events binding events to Add to cart buttons event binding displaying cart item counts inventories available inventory messages adding messages with v-else adding messages with v-else-if displaying amount of remaining inventory with v-if tracking

J

JavaScript programming language calculators in console hooks Vue vs. jsdom-global variable JSX extension, rendering

K

Kebab case key values, optional keyframes

L

layouts, updating in Nuxt.js lazy loading .lazy v-model modifier lifecycle code disabling logging hooks, adding of Vue Linux package management system, installing Node.js with lists literal props local directives local registration localVue variable logging lifecycle code, disabling Long Term Support (LTS) looping overview of products adding star ratings with v-for range binding HTML classes to star ratings importing products from product.json refactoring apps with v-for directives setting up products LTS (Long Term Support)

M

MacPorts package manager, installing Node.js with madeOrder property Main components <main> element Main.vue, updating to use Firebase Realtime database mapActions mapGetters mapMutations mapState markups adding filters to of product views master branch middleware with Nuxt.js mixins global reusing functionality with modifiers .lazy v-model modifier .number modifier global custom directives with trimming input values modules in Vuex mutation methods mutations in Vuex MVC (Model-View-Controller) pattern MVVM (Model-View-ViewModel) pattern facilitating with Vue overview of my-comp component mySession property

N

named slots namespaces navigation guards, 2^nd Node Version Manager (NVM), installing Node.js with Node.js environment, installing using Homebrew using MacPorts using NVM using one-click installers verification of via Linux package management system npm install command npm package manager, installing npm run dev command, 2^nd, 3^rd, 4^th .number modifier Nuxt.js framework adding stores with Vuex creating building blocks in creating components in creating music search applications with creating projects with generating routes with installing dependencies with middleware with updating default layouts in NVM (Node Version Manager), installing Node.js with

O

oldVnode onAuthStateChanged one-click installers, installing Node.js with one-way data binding <option> tag options object order property order.dontSendGift property order.sendGift property output filters adding filters to markup adding to markup testing values write filter functions

P

parameters, adding product routes with parseInt method <pre> tag prefix property pressed method price property product property product routes, adding with parameters product.json, importing products from products displaying defining product data marking up product views importing from product.json looping adding star ratings with v-for range binding HTML classes to star ratings refactoring apps with v-for directives setting up productsRef, 2^nd progressive framework properties props child props, modifying with .sync dynamic props literal props testing to pass data validation of

Q

query parameters querySelector() method

R

radio buttons, value binding and rating class reactive programming applications in facilitating with Vue Realtime Database records, sorting redirect option redirection refactoring apps with v-for directives registration global local regression testing render(createElement) function rendering functions JSX server-side response.data.products root Vue instances router-link setting up with style setting up with tags router-link component router-link element <router-link> tag routes child edit routes, adding generating with Nuxt.js product routes, adding with parameters setting up routing, 2^nd

S

scoped slots <script> tag SEO (search engine optimization) server-side rendering (SSR) servers, communicating with Nuxt.js server-side rendering using Firebase using VuexFire SET_SESSION mutation SET_STORE mutation setters setTimeout shallow function showCheckout method showProduct property, 2^nd signIn method signOut method single source of truth single-file components sitename property sitename variable slot-scope attribute slots named scoped snapshot tests software, history of facilitating MVVM with Vue facilitating reactivity with Vue JavaScript calculators JavaScript vs Vue MVC pattern MVVM pattern reactive applications Vue calculators sortedProducts property sorting records src attribute SSR (server-side rendering) staging environment star ratings adding with v-for range binding HTML classes to state.msg.toUppercase() method states authentication states, updating Vuex with in Vuex static files store.commit function stores, adding with Vuex style method <style> tag styleMe directive styles, setting up router-link with submitForm function, 2^nd .sync modifier syntax highlighting

T

tags, setting up router-link with template components, defining inline template strings single-file components text/x-template script elements <template> element template tag ternary operator testing components continuous integration creating test cases overview of with vue-test-utils CSS classes delivery deployment environments props setting up Chrome debugger text types of values with mocked Vuex text-center class, 2^nd text() function text/x-template script elements this keyword to attribute toContain function toggles, adding cart item buttons as Toolbar component tr element transclusion transition classes <transition> element transitions, 2^nd adding to applications JavaScript hooks overview of updating applications true-value attribute two-way data binding typeof operator

U

unit tests update events updating default layouts in Nuxt.js header components with authentication Main.vue to use Firebase Realtime database Vuex with authentication states user affordance, adding to buttons adding cart item buttons as toggles comparing v-show with v-if/v-else tracking inventories v-else to display disabled buttons v-if to display checkout pages v-if to display disabled buttons v-show directives working with computed properties working with inventories

V

v-card-media component v-else directive adding messages with comparing v-show displaying disabled buttons with v-else-if directive, adding messages with v-enter class v-enter-active class v-enter-to class v-for directive refactoring apps with without optional key value v-for range, adding star ratings with v-html binding v-if directive comparing v-show with displaying amount of remaining inventory with displaying checkout pages with displaying disabled buttons with v-leave class v-leave-active class v-leave-to class v-model binding v-once directive v-show directive comparing with v-else comparing with v-if v-text directive validating props value binding binding values to check boxes radio buttons and v-for directives v-for directives without optional key value values global custom directives with testing verifying Node.js installation virtual DOM vm property vnode Vue-CLI adding Vuex to converting apps with adding Axios to applications adding Bootstrap to applications adding child edit routes adding CSS to applications adding Main components adding product route with parameters creating Form components redirection routing setting up components setting up router-link with style setting up router-link with tags setting up routes wildcards creating new applications with installing installing Vuex in vue-devtools for Chrome, 2^nd vue-router library vue-test-utils library Vue.js framework advantages of calculators in facilitating MVVM pattern with facilitating reactivity with future of JavaScript vs lifecycle of adding lifecycle hooks disabling logging exploring lifecycle code Vuetify Vuex library actions in adding stores with adding to Vue-CLI getters in helpers in installing in Vue-CLI mocked, testing with modules in mutations in overview of state in updating with authentication states VuexFire library

W

watch functions Webpack webstore variable wildcards wrapper.find function

X

XMLHttpRequest XSS (cross-site scripting) attacks

Previous Chapter

List of Figures